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

Commit 613d6f0

Browse files
RafaelGBRafaelGB
committed
Merge branch 'bug-scrolling'
2 parents 0f22eeb + 0e9f5c2 commit 613d6f0

File tree

15 files changed

+180
-139
lines changed

15 files changed

+180
-139
lines changed

‎docs/changelog.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
## 0.2.1
2+
*Published on 2022/05/08*
3+
### Improved
4+
- Now when you press enter inside a text cell, it will ends the modification with onBlur event.
5+
### No longer broken
6+
- Create a column now adjust width automatically.
7+
- total width of columns not broken anymore. This bug was introduced in 0.2.0
8+
- Frontmatter fields that are not in the schema and were empty will not be insert a null value if a database field is updated. [ISSUE#29](https://github.com/RafaelGB/obsidian-db-folder/issues/29)
19
## 0.2.0
210
*Published on 2022/05/07*
311
### Shiny new things

‎src/cdm/StyleModel.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export type ColumnWidthState = {
2-
widthRecord: Record<string, number>,
3-
totalWidth: number
2+
widthRecord: Record<string, number>
43
}
54

65
export type HeaderContextType = {

‎src/components/Cell.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ export default function DefaultCell(cellProperties: Cell) {
4343
`<=> Cell.rendering dataType: ${dataType}. value: ${value.value}`
4444
);
4545

46+
const handleKeyDown = (event: any) => {
47+
if (event.key === "Enter") {
48+
event.target.blur();
49+
}
50+
};
4651
// onChange handler
4752
const handleOnChange = (event: ContentEditableEvent) => {
4853
// cancelling previous timeouts
@@ -54,19 +59,19 @@ export default function DefaultCell(cellProperties: Cell) {
5459
// initialize a setimeout by wrapping in our editNoteTimeout so that we can clear it out using clearTimeout
5560
setEditNoteTimeout(
5661
setTimeout(() => {
57-
onChange(event);
62+
onChange(event.target.value);
5863
// timeout until event is triggered after user has stopped typing
5964
}, 1500)
6065
);
6166
};
6267

63-
function onChange(event: ContentEditableEvent) {
68+
function onChange(changedValue: string) {
6469
// save on disk
6570
dataDispatch({
6671
type: ActionTypes.UPDATE_CELL,
6772
file: note.getFile(),
6873
key: (cellProperties.column as any).key,
69-
value: event.target.value,
74+
value: changedValue,
7075
row: cellProperties.row,
7176
columnId: (cellProperties.column as any).id,
7277
});
@@ -80,6 +85,7 @@ export default function DefaultCell(cellProperties: Cell) {
8085
<ContentEditable
8186
html={(value.value && value.value.toString()) || ""}
8287
onChange={handleOnChange}
88+
onKeyDown={handleKeyDown}
8389
onBlur={() =>
8490
setValue((old) => ({ value: old.value, update: true }))
8591
}

‎src/components/Header.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
9292
columnWidthState.widthRecord[columnName] =
9393
(columnLabel.length + WidthVariables.ICON_SPACING) *
9494
WidthVariables.MAGIC_SPACING;
95-
// Add new width to the total width
96-
columnWidthState.totalWidth =
97-
columnWidthState.totalWidth +
98-
(columnLabel.length + WidthVariables.ICON_SPACING) *
99-
WidthVariables.MAGIC_SPACING;
10095
setColumnWidthState(columnWidthState);
10196
return { name: columnName, position: columnNumber, label: columnLabel };
10297
}
@@ -125,9 +120,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
125120
{!isMetadata && domReady
126121
? ReactDOM.createPortal(
127122
<HeaderMenu
128-
column={headerProps.column}
129-
columns={headerProps.columns}
130-
dispatch={dataDispatch}
123+
headerProps={headerProps}
131124
setSortBy={setSortBy}
132125
propertyIcon={propertyIcon}
133126
expanded={expanded}
@@ -138,7 +131,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
138131
setLabelState={setLabelState}
139132
isInline={isInline}
140133
setIsInline={setIsInline}
141-
initialState={initialState}
142134
/>,
143135
document.getElementById("popper-container")
144136
)

‎src/components/HeaderMenu.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { TableColumn, TableDataType } from "cdm/FolderModel";
21
import {
3-
ActionTypes,
4-
DataTypes,
5-
StyleVariables,
6-
WidthVariables,
7-
} from "helpers/Constants";
2+
DatabaseHeaderProps,
3+
TableColumn,
4+
TableDataType,
5+
} from "cdm/FolderModel";
6+
import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
87
import { dbTrim } from "helpers/StylesHelper";
98
import ArrowUpIcon from "components/img/ArrowUp";
109
import ArrowDownIcon from "components/img/ArrowDown";
@@ -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 } = 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(),
116+
columnInfo: adjustWidthOfTheColumnsWhenAdd(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(),
129+
columnInfo: adjustWidthOfTheColumnsWhenAdd(column.position + 1),
133130
});
134131
setExpanded(false);
135132
},
@@ -140,14 +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-
// Adjust the width of the columns
148-
columnWidthState.totalWidth =
149-
columnWidthState.totalWidth - columnWidthState.widthRecord[id];
150-
delete columnWidthState.widthRecord[id];
144+
delete columnWidthState.widthRecord[column.id];
151145
setColumnWidthState(columnWidthState);
152146
},
153147
icon: <TrashIcon />,
@@ -163,7 +157,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
163157
onClick: (e: any) => {
164158
dispatch({
165159
type: ActionTypes.UPDATE_COLUMN_TYPE,
166-
columnId: id,
160+
columnId: column.id,
167161
dataType: DataTypes.SELECT,
168162
});
169163
setShowType(false);
@@ -176,7 +170,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
176170
onClick: (e: any) => {
177171
dispatch({
178172
type: ActionTypes.UPDATE_COLUMN_TYPE,
179-
columnId: id,
173+
columnId: column.id,
180174
dataType: DataTypes.TEXT,
181175
});
182176
setShowType(false);
@@ -189,7 +183,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
189183
onClick: (e: any) => {
190184
dispatch({
191185
type: ActionTypes.UPDATE_COLUMN_TYPE,
192-
columnId: id,
186+
columnId: column.id,
193187
dataType: DataTypes.NUMBER,
194188
});
195189
setShowType(false);
@@ -209,20 +203,30 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
209203
settingsReferenceElement,
210204
settingsPopperElement,
211205
{
212-
placement: "right",
206+
placement: "auto",
213207
strategy: "fixed",
214208
}
215209
);
216210

217211
function persistLabelChange() {
212+
// trim label will get a valid yaml key
213+
const newKey = dbTrim(labelState);
218214
dispatch({
219215
type: ActionTypes.UPDATE_COLUMN_LABEL,
220-
columnId: id,
221-
accessor: keyState,
216+
columnId: column.id,
217+
accessor: newKey,
218+
newKey: newKey,
222219
label: labelState,
223220
});
224221
setExpanded(false);
225-
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);
226230
}
227231

228232
function handleKeyDown(e: any) {
@@ -243,29 +247,25 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
243247
e.preventDefault();
244248
}
245249

246-
function adjustWidthOfTheColumn() {
250+
function adjustWidthOfTheColumnsWhenAdd(wantedPosition: number) {
247251
const columnNumber =
248-
initialState.columns.length + 1 - initialState.shadowColumns.length;
252+
initialState.columns.length - initialState.shadowColumns.length;
249253
const columnName = `newColumn${columnNumber}`;
250254
const columnLabel = `New Column ${columnNumber}`;
251-
// Add width of the new column
252-
columnWidthState.widthRecord[columnName] =
253-
(columnLabel.length + WidthVariables.ICON_SPACING) *
254-
WidthVariables.MAGIC_SPACING;
255-
// Add new width to the total width
256-
columnWidthState.totalWidth =
257-
columnWidthState.totalWidth +
258-
(columnLabel.length + WidthVariables.ICON_SPACING) *
259-
WidthVariables.MAGIC_SPACING;
255+
columnWidthState.widthRecord[columnName] = getColumnWidthStyle(
256+
rows,
257+
columnName,
258+
columnLabel
259+
);
260260
setColumnWidthState(columnWidthState);
261-
return { name: columnName, position: columnNumber, label: columnLabel };
261+
return { name: columnName, position: wantedPosition, label: columnLabel };
262262
}
263263

264264
function handleChangeToggleInlineFrontmatter(e: any) {
265265
setIsInline(e.target.checked);
266266
dispatch({
267267
type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
268-
columnId: id,
268+
columnId: column.id,
269269
isInline: e.target.checked,
270270
});
271271
}
@@ -330,7 +330,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
330330
<span className="svg-icon svg-text icon-margin">
331331
{propertyIcon}
332332
</span>
333-
<span style={{ textTransform: "capitalize" }}>{dataType}</span>
333+
<span style={{ textTransform: "capitalize" }}>
334+
{column.dataType}
335+
</span>
334336
</button>
335337
{showType && (
336338
<div

0 commit comments

Comments
 (0)