Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 3328a60

Browse files
RafaelGBRafaelGB
committed
change label now rescale well column width
1 parent 0c75422 commit 3328a60

File tree

7 files changed

+67
-66
lines changed

7 files changed

+67
-66
lines changed

‎src/components/Cell.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ export default function DefaultCell(cellProperties: Cell) {
4545

4646
const handleKeyDown = (event: any) => {
4747
if (event.key === "Enter") {
48-
console.log("blur on enter");
4948
event.target.blur();
5049
}
5150
};

‎src/components/Header.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
120120
{!isMetadata && domReady
121121
? ReactDOM.createPortal(
122122
<HeaderMenu
123-
column={headerProps.column}
124-
columns={headerProps.columns}
125-
dispatch={dataDispatch}
123+
headerProps={headerProps}
126124
setSortBy={setSortBy}
127125
propertyIcon={propertyIcon}
128126
expanded={expanded}
@@ -133,7 +131,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
133131
setLabelState={setLabelState}
134132
isInline={isInline}
135133
setIsInline={setIsInline}
136-
initialState={initialState}
137134
/>,
138135
document.getElementById("popper-container")
139136
)

‎src/components/HeaderMenu.tsx‎

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { TableColumn, TableDataType } from "cdm/FolderModel";
21
import {
3-
ActionTypes,
4-
DataTypes,
5-
StyleVariables,
6-
WidthVariables,
7-
} from "helpers/Constants";
8-
import { dbTrim, recalculateColumnWidth } from "helpers/StylesHelper";
2+
DatabaseHeaderProps,
3+
TableColumn,
4+
TableDataType,
5+
} from "cdm/FolderModel";
6+
import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
7+
import { dbTrim } from "helpers/StylesHelper";
98
import ArrowUpIcon from "components/img/ArrowUp";
109
import ArrowDownIcon from "components/img/ArrowDown";
1110
import ArrowLeftIcon from "components/img/ArrowLeft";
@@ -20,25 +19,25 @@ import { ActionType } from "react-table";
2019
import { usePopper } from "react-popper";
2120
import { HeaderContext } from "components/contexts/HeaderContext";
2221
import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
22+
import { getColumnWidthStyle } from "./styles/ColumnWidthStyle";
2323
type HeaderMenuProps = {
24-
dispatch: (action: ActionType) => void;
24+
headerProps: DatabaseHeaderProps;
2525
setSortBy: any;
26-
column: TableColumn;
27-
columns: TableColumn[];
2826
propertyIcon: any;
2927
expanded: boolean;
3028
setExpanded: (expanded: boolean) => void;
3129
created: boolean;
3230
referenceElement: any;
3331
labelState: string;
3432
setLabelState: (label: string) => void;
35-
initialState: TableDataType;
3633
isInline: boolean;
3734
setIsInline: (isInline: boolean) => void;
3835
};
3936
const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
37+
/** state of width columns */
38+
const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
39+
/** Header props */
4040
const {
41-
dispatch,
4241
setSortBy,
4342
propertyIcon,
4443
expanded,
@@ -47,15 +46,13 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
4746
referenceElement,
4847
labelState,
4948
setLabelState,
50-
initialState,
5149
isInline,
5250
setIsInline,
5351
} = headerMenuProps;
54-
/** state of width columns */
55-
const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
52+
const { column, columns, rows, initialState } = headerMenuProps.headerProps;
53+
const dispatch = (headerMenuProps.headerProps as any).dataDispatch;
5654
/** Column values */
57-
const { id, key, dataType, position } = headerMenuProps.column;
58-
const [keyState, setkeyState] = useState(dbTrim(key));
55+
const [keyState, setkeyState] = useState(dbTrim(column.key));
5956
const [popperElement, setPopperElement] = useState(null);
6057
const [inputRef, setInputRef] = useState(null);
6158
const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -96,15 +93,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
9693
const buttons = [
9794
{
9895
onClick: (e: any) => {
99-
setSortBy([{ id: id, desc: false }]);
96+
setSortBy([{ id: column.id, desc: false }]);
10097
setExpanded(false);
10198
},
10299
icon: <ArrowUpIcon />,
103100
label: "Sort ascending",
104101
},
105102
{
106103
onClick: (e: any) => {
107-
setSortBy([{ id: id, desc: true }]);
104+
setSortBy([{ id: column.id, desc: true }]);
108105
setExpanded(false);
109106
},
110107
icon: <ArrowDownIcon />,
@@ -114,9 +111,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
114111
onClick: (e: any) => {
115112
dispatch({
116113
type: ActionTypes.ADD_COLUMN_TO_LEFT,
117-
columnId: id,
114+
columnId: column.id,
118115
focus: false,
119-
columnInfo: adjustWidthOfTheColumn(position - 1),
116+
columnInfo: adjustWidthOfTheColumn(column.position - 1),
120117
});
121118
setExpanded(false);
122119
},
@@ -127,9 +124,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
127124
onClick: (e: any) => {
128125
dispatch({
129126
type: ActionTypes.ADD_COLUMN_TO_RIGHT,
130-
columnId: id,
127+
columnId: column.id,
131128
focus: false,
132-
columnInfo: adjustWidthOfTheColumn(position + 1),
129+
columnInfo: adjustWidthOfTheColumn(column.position + 1),
133130
});
134131
setExpanded(false);
135132
},
@@ -140,11 +137,11 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
140137
onClick: (e: any) => {
141138
dispatch({
142139
type: ActionTypes.DELETE_COLUMN,
143-
columnId: id,
140+
columnId: column.id,
144141
key: keyState,
145142
});
146143
setExpanded(false);
147-
delete columnWidthState.widthRecord[id];
144+
delete columnWidthState.widthRecord[column.id];
148145
setColumnWidthState(columnWidthState);
149146
},
150147
icon: <TrashIcon />,
@@ -160,7 +157,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
160157
onClick: (e: any) => {
161158
dispatch({
162159
type: ActionTypes.UPDATE_COLUMN_TYPE,
163-
columnId: id,
160+
columnId: column.id,
164161
dataType: DataTypes.SELECT,
165162
});
166163
setShowType(false);
@@ -173,7 +170,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
173170
onClick: (e: any) => {
174171
dispatch({
175172
type: ActionTypes.UPDATE_COLUMN_TYPE,
176-
columnId: id,
173+
columnId: column.id,
177174
dataType: DataTypes.TEXT,
178175
});
179176
setShowType(false);
@@ -186,7 +183,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
186183
onClick: (e: any) => {
187184
dispatch({
188185
type: ActionTypes.UPDATE_COLUMN_TYPE,
189-
columnId: id,
186+
columnId: column.id,
190187
dataType: DataTypes.NUMBER,
191188
});
192189
setShowType(false);
@@ -212,15 +209,24 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
212209
);
213210

214211
function persistLabelChange() {
212+
// trim label will get a valid yaml key
213+
const newKey = dbTrim(labelState);
215214
dispatch({
216215
type: ActionTypes.UPDATE_COLUMN_LABEL,
217-
columnId: id,
218-
accessor: keyState,
216+
columnId: column.id,
217+
accessor: newKey,
218+
newKey: newKey,
219219
label: labelState,
220-
columnInfo: adjustWidthOfTheColumn(position),
221220
});
222221
setExpanded(false);
223-
setkeyState(dbTrim(labelState));
222+
setkeyState(newKey);
223+
columnWidthState.widthRecord[newKey] = getColumnWidthStyle(
224+
rows,
225+
newKey,
226+
labelState
227+
);
228+
delete columnWidthState.widthRecord[column.id];
229+
setColumnWidthState(columnWidthState);
224230
}
225231

226232
function handleKeyDown(e: any) {
@@ -246,17 +252,20 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
246252
initialState.columns.length - initialState.shadowColumns.length;
247253
const columnName = `newColumn${columnNumber}`;
248254
const columnLabel = `New Column ${columnNumber}`;
249-
setColumnWidthState(
250-
recalculateColumnWidth(columnWidthState, columnName, columnLabel)
255+
columnWidthState.widthRecord[columnName] = getColumnWidthStyle(
256+
rows,
257+
columnName,
258+
columnLabel
251259
);
260+
setColumnWidthState(columnWidthState);
252261
return { name: columnName, position: wantedPosition, label: columnLabel };
253262
}
254263

255264
function handleChangeToggleInlineFrontmatter(e: any) {
256265
setIsInline(e.target.checked);
257266
dispatch({
258267
type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
259-
columnId: id,
268+
columnId: column.id,
260269
isInline: e.target.checked,
261270
});
262271
}
@@ -321,7 +330,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
321330
<span className="svg-icon svg-text icon-margin">
322331
{propertyIcon}
323332
</span>
324-
<span style={{ textTransform: "capitalize" }}>{dataType}</span>
333+
<span style={{ textTransform: "capitalize" }}>
334+
{column.dataType}
335+
</span>
325336
</button>
326337
{showType && (
327338
<div

‎src/components/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import Header from "components/Header";
2121
import { useDraggableInPortal } from "components/portals/UseDraggableInPortal";
2222
import { c } from "helpers/StylesHelper";
2323
import { HeaderNavBar } from "components/NavBar";
24-
import getColumnsWidthStyle from "components/styles/ColumnWidthStyle";
24+
import { getColumnsWidthStyle } from "components/styles/ColumnWidthStyle";
2525
import { HeaderContext } from "components/contexts/HeaderContext";
2626

2727
const defaultColumn = {

‎src/components/reducers/DatabaseDispatch.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,9 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
9797
const update_column_label_index = state.columns.findIndex(
9898
(column: any) => column.id === action.columnId
9999
);
100-
// trim label will get a valid yaml key
101-
const update_col_key: string = dbTrim(action.label);
102100
// Update configuration & row files on disk
103-
console.log("option label", action.label);
104101
state.view.diskConfig
105-
.updateColumnKey(action.columnId, update_col_key, action.label)
102+
.updateColumnKey(action.columnId, action.newKey, action.label)
106103
.then(async () => {
107104
// Once the column is updated, update the rows in case the key is changed
108105

@@ -111,31 +108,30 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
111108
await updateRowFile(
112109
row.note.getFile(),
113110
action.columnId,
114-
update_col_key,
111+
action.newKey,
115112
state,
116113
UpdateRowOptions.COLUMN_KEY
117114
);
118115
})
119116
);
120117
});
121-
// Update state
122118
return update(state, {
123119
skipReset: { $set: true },
124-
// Add column visually into the new label
120+
// Modify column visually with the new label
125121
columns: {
126122
[update_column_label_index]: {
127123
$merge: {
128124
label: action.label,
129-
id: update_col_key,
130-
key: update_col_key,
131-
accessor: update_col_key,
125+
id: action.newKey,
126+
key: action.newKey,
127+
accessor: action.newKey,
132128
},
133129
},
134130
},
135-
// Add data visually into the new label
131+
// Modify data visually with the new key
136132
data: {
137133
$set: state.data.map((row: RowDataType) => {
138-
row[update_col_key] = row[action.columnId];
134+
row[action.newKey] = row[action.columnId];
139135
delete row[action.columnId];
140136
return row;
141137
}),
@@ -343,6 +339,9 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
343339
],
344340
},
345341
});
342+
/**
343+
* Check if the given option cell is a candidate for moving the file into a subfolder
344+
*/
346345
case ActionTypes.UPDATE_OPTION_CELL:
347346
// check if this column is configured as a group folder
348347
if (dbconfig.group_folder_column === action.key) {
@@ -377,7 +376,10 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
377376
},
378377
});
379378
}
380-
// otherwise go UPDATE_CELL
379+
// Otherwise, update the value of the cell using the normal update method
380+
/**
381+
* Update the value of a cell in the table and save it on disk
382+
*/
381383
case ActionTypes.UPDATE_CELL:
382384
// Obtain current column index
383385
const update_cell_index = state.columns.findIndex(

‎src/components/styles/ColumnWidthStyle.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { MetadataColumns, WidthVariables } from "helpers/Constants";
44
import { getNormalizedPath } from "helpers/VaultManagement";
55
import { Row } from "react-table";
66

7-
const getColumnWidthStyle = (rows: Array<Row<object>>, accessor: string, headerText: string, customMaxWidth?: number): number => {
7+
export const getColumnWidthStyle = (rows: Array<Row<object>>, accessor: string, headerText: string, customMaxWidth?: number): number => {
88
const maxWidth = (customMaxWidth ?? 400)
99

1010
const cellLength = Math.max(
@@ -23,13 +23,12 @@ const lengthOfNormalizeCellValue = (row: any, accessor: string): number => {
2323
return value.length
2424
}
2525

26-
const getColumnsWidthStyle = (rows: Array<Row<object>>, columns: TableColumn[]): ColumnWidthState => {
26+
export const getColumnsWidthStyle = (rows: Array<Row<object>>, columns: TableColumn[]): ColumnWidthState => {
2727
const columnWidthStyle: ColumnWidthState = {
2828
widthRecord: {}
2929
}
3030
columns.forEach((column: TableColumn) => {
3131
columnWidthStyle.widthRecord[column.id] = getColumnWidthStyle(rows, column.key, column.label);
3232
})
3333
return columnWidthStyle
34-
}
35-
export default getColumnsWidthStyle;
34+
}

‎src/helpers/StylesHelper.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,4 @@ export function shortId() {
2626
*/
2727
export function dbTrim(str: string) {
2828
return str.trim().replaceAll("\n", "").replaceAll("\t", "").replaceAll(" ", "_");
29-
}
30-
31-
export function recalculateColumnWidth(columnWidthState: ColumnWidthState, columnName: string, columnLabel: string): ColumnWidthState {
32-
columnWidthState.widthRecord[columnName] =
33-
(columnLabel.length + WidthVariables.ICON_SPACING) *
34-
WidthVariables.MAGIC_SPACING;
35-
return columnWidthState;
3629
}

0 commit comments

Comments
 (0)