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

Commit d2267da

Browse files
RafaelGBRafaelGB
committed
Merge branch '23-when-cells-are-empty-the-size-of-column-does-not-have-min'
2 parents 3d6959e + 209780b commit d2267da

File tree

13 files changed

+180
-65
lines changed

13 files changed

+180
-65
lines changed

‎docs/changelog.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
## 0.1.1
2+
### No longer broken
3+
- Now if you update a cell and then use global filter, the value is updated correctly
14
## 0.1.0
25
### Shiny new things
36
- New button to download a CSV file with the current data (supports filtering!). Temporally this feature is inside menu bar. We are working on move it into the actual file options of Obsidian [ISSUE#15](https://github.com/RafaelGB/obsidian-db-folder/issues/15)

‎src/cdm/FolderModel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export type TableDataType = {
6868
export interface DatabaseHeaderProps {
6969
columns: any,
7070
data: any,
71-
initialState: any,
71+
initialState: TableDataType,
7272
defaultColumn: any,
7373
getSubRows: any,
7474
getRowId: any,

‎src/cdm/StyleModel.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export type ColumnWidthState = {
2+
widthRecord: Record<string, number>,
3+
totalWidth: number
4+
}
5+
6+
export type HeaderContextType = {
7+
columnWidthState: ColumnWidthState,
8+
setColumnWidthState: (a: ColumnWidthState) => void
9+
}

‎src/components/Cell.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export default function DefaultCell(cellProperties: Cell) {
6767
file: note.getFile(),
6868
key: (cellProperties.column as any).key,
6969
value: event.target.value,
70+
row: cellProperties.row,
71+
columnId: (cellProperties.column as any).id,
7072
});
7173
}
7274

‎src/components/Header.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1-
import React, { useState } from "react";
1+
import React, { useContext, useState } from "react";
22
import { randomColor } from "helpers/Colors";
33
import TextIcon from "components/img/Text";
44
import MultiIcon from "components/img/Multi";
55
import HashIcon from "components/img/Hash";
66
import PlusIcon from "components/img/Plus";
77
import HeaderMenu from "components/HeaderMenu";
88
import MarkdownObsidian from "components/img/Markdown";
9-
import { ActionTypes, DataTypes, MetadataColumns } from "helpers/Constants";
9+
import {
10+
ActionTypes,
11+
DataTypes,
12+
MetadataColumns,
13+
WidthVariables,
14+
} from "helpers/Constants";
1015
import { LOGGER } from "services/Logger";
1116
import { DatabaseHeaderProps } from "cdm/FolderModel";
1217
import ReactDOM from "react-dom";
1318
import { c } from "helpers/StylesHelper";
19+
import { HeaderContext } from "components/contexts/HeaderContext";
1420

1521
function setOptionsOfSelectDataType(
1622
options: any[],
@@ -36,10 +42,12 @@ function setOptionsOfSelectDataType(
3642
*/
3743
export default function Header(headerProps: DatabaseHeaderProps) {
3844
LOGGER.debug(`=>Header ${headerProps.column.label}`);
45+
/** state of width columns */
46+
const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
3947
// TODO : add a tooltip to the header
4048
const created: boolean = false;
4149
/** Properties of header */
42-
const { setSortBy, rows } = headerProps;
50+
const { setSortBy, rows, initialState } = headerProps;
4351
/** Column values */
4452
const { id, dataType, options } = headerProps.column;
4553
/** reducer asociated to database */
@@ -50,7 +58,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
5058
const [referenceElement, setReferenceElement] = useState(null);
5159
const [isMetadata, setIsMetadata] = useState(headerProps.column.isMetadata);
5260
const [labelState, setLabelState] = useState(headerProps.column.label);
53-
5461
React.useEffect(() => {
5562
setDomReady(true);
5663
});
@@ -75,11 +82,30 @@ export default function Header(headerProps: DatabaseHeaderProps) {
7582
break;
7683
}
7784

85+
function adjustWidthOfTheColumn() {
86+
const columnNumber =
87+
initialState.columns.length + 1 - initialState.metadataColumns.length;
88+
const columnName = `newColumn${columnNumber}`;
89+
const columnLabel = `New Column ${columnNumber}`;
90+
// Add width of the new column
91+
columnWidthState.widthRecord[columnName] =
92+
(columnLabel.length + WidthVariables.ICON_SPACING) *
93+
WidthVariables.MAGIC_SPACING;
94+
// Add new width to the total width
95+
columnWidthState.totalWidth =
96+
columnWidthState.totalWidth +
97+
(columnLabel.length + WidthVariables.ICON_SPACING) *
98+
WidthVariables.MAGIC_SPACING;
99+
setColumnWidthState(columnWidthState);
100+
return { name: columnName, position: columnNumber, label: columnLabel };
101+
}
102+
78103
function handlerAddColumnToLeft(e: any) {
79104
dataDispatch({
80105
type: ActionTypes.ADD_COLUMN_TO_LEFT,
81106
columnId: MetadataColumns.ADD_COLUMN,
82107
focus: true,
108+
columnInfo: adjustWidthOfTheColumn(),
83109
});
84110
}
85111

@@ -98,6 +124,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
98124
? ReactDOM.createPortal(
99125
<HeaderMenu
100126
column={headerProps.column}
127+
columns={headerProps.columns}
101128
dispatch={dataDispatch}
102129
setSortBy={setSortBy}
103130
propertyIcon={propertyIcon}
@@ -107,6 +134,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
107134
referenceElement={referenceElement}
108135
labelState={labelState}
109136
setLabelState={setLabelState}
137+
initialState={initialState}
110138
/>,
111139
document.getElementById("popper-container")
112140
)

‎src/components/HeaderMenu.tsx‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
import { TableColumn } from "cdm/FolderModel";
2-
import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
1+
import { TableColumn, TableDataType } from "cdm/FolderModel";
2+
import {
3+
ActionTypes,
4+
DataTypes,
5+
StyleVariables,
6+
WidthVariables,
7+
} from "helpers/Constants";
38
import { dbTrim } from "helpers/StylesHelper";
49
import ArrowUpIcon from "components/img/ArrowUp";
510
import ArrowDownIcon from "components/img/ArrowDown";
@@ -9,20 +14,23 @@ import TrashIcon from "components/img/Trash";
914
import TextIcon from "components/img/Text";
1015
import MultiIcon from "components/img/Multi";
1116
import HashIcon from "components/img/Hash";
12-
import React, { useEffect, useState } from "react";
17+
import React, { useContext, useEffect, useState } from "react";
1318
import { ActionType } from "react-table";
1419
import { usePopper } from "react-popper";
20+
import { HeaderContext } from "components/contexts/HeaderContext";
1521
type HeaderMenuProps = {
1622
dispatch: (action: ActionType) => void;
1723
setSortBy: any;
1824
column: TableColumn;
25+
columns: TableColumn[];
1926
propertyIcon: any;
2027
expanded: boolean;
2128
setExpanded: (expanded: boolean) => void;
2229
created: boolean;
2330
referenceElement: any;
2431
labelState: string;
2532
setLabelState: (label: string) => void;
33+
initialState: TableDataType;
2634
};
2735
const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
2836
const {
@@ -35,7 +43,10 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
3543
referenceElement,
3644
labelState,
3745
setLabelState,
46+
initialState,
3847
} = headerMenuProps;
48+
/** state of width columns */
49+
const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
3950
/** Column values */
4051
const { id, key, dataType } = headerMenuProps.column;
4152
const [keyState, setkeyState] = useState(dbTrim(key));
@@ -89,10 +100,12 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
89100
},
90101
{
91102
onClick: (e: any) => {
103+
console.log("columnWidthState");
92104
dispatch({
93105
type: ActionTypes.ADD_COLUMN_TO_LEFT,
94106
columnId: id,
95107
focus: false,
108+
columnInfo: adjustWidthOfTheColumn(),
96109
});
97110
setExpanded(false);
98111
},
@@ -101,10 +114,12 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
101114
},
102115
{
103116
onClick: (e: any) => {
117+
console.log("columnWidthState");
104118
dispatch({
105119
type: ActionTypes.ADD_COLUMN_TO_RIGHT,
106120
columnId: id,
107121
focus: false,
122+
columnInfo: adjustWidthOfTheColumn(),
108123
});
109124
setExpanded(false);
110125
},
@@ -119,6 +134,11 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
119134
key: keyState,
120135
});
121136
setExpanded(false);
137+
// Adjust the width of the columns
138+
columnWidthState.totalWidth =
139+
columnWidthState.totalWidth - columnWidthState.widthRecord[id];
140+
delete columnWidthState.widthRecord[id];
141+
setColumnWidthState(columnWidthState);
122142
},
123143
icon: <TrashIcon />,
124144
label: "Delete",
@@ -204,6 +224,24 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
204224
e.preventDefault();
205225
}
206226

227+
function adjustWidthOfTheColumn() {
228+
const columnNumber =
229+
initialState.columns.length + 1 - initialState.metadataColumns.length;
230+
const columnName = `newColumn${columnNumber}`;
231+
const columnLabel = `New Column ${columnNumber}`;
232+
// Add width of the new column
233+
columnWidthState.widthRecord[columnName] =
234+
(columnLabel.length + WidthVariables.ICON_SPACING) *
235+
WidthVariables.MAGIC_SPACING;
236+
// Add new width to the total width
237+
columnWidthState.totalWidth =
238+
columnWidthState.totalWidth +
239+
(columnLabel.length + WidthVariables.ICON_SPACING) *
240+
WidthVariables.MAGIC_SPACING;
241+
setColumnWidthState(columnWidthState);
242+
return { name: columnName, position: columnNumber, label: columnLabel };
243+
}
244+
207245
return (
208246
<div>
209247
{expanded && (

‎src/components/Table.tsx‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,16 @@ import { useDraggableInPortal } from "components/portals/UseDraggableInPortal";
2222
import { c } from "helpers/StylesHelper";
2323
import { HeaderNavBar } from "components/NavBar";
2424
import getColumnsWidthStyle from "components/styles/ColumnWidthStyle";
25+
import { HeaderContext } from "./contexts/HeaderContext";
2526

2627
const defaultColumn = {
27-
minWidth: 25,
28+
minWidth: 50,
2829
maxWidth: 400,
2930
Cell: DefaultCell,
3031
Header: Header,
3132
sortType: "alphanumericFalsyLast",
3233
};
3334

34-
function useInstance(instance: TableInstance<any>) {
35-
const { allColumns } = instance;
36-
37-
let rowSpanHeaders: any = [];
38-
39-
allColumns.forEach((column: any, i: any) => {
40-
const { id } = column;
41-
rowSpanHeaders = [
42-
...rowSpanHeaders,
43-
{ id, topCellValue: null, topCellIndex: 0 },
44-
];
45-
});
46-
47-
Object.assign(instance, { rowSpanHeaders });
48-
}
49-
5035
/**
5136
* Table component based on react-table
5237
* @param initialState
@@ -94,6 +79,11 @@ export function Table(initialState: TableDataType) {
9479
}),
9580
[]
9681
);
82+
83+
function useTableDataInstance(instance: TableInstance<TableDataType>) {
84+
Object.assign(instance, { initialState });
85+
}
86+
9787
const propsUseTable: any = {
9888
columns,
9989
data,
@@ -192,13 +182,14 @@ export function Table(initialState: TableDataType) {
192182
useSortBy,
193183
useColumnOrder,
194184
(hooks) => {
195-
hooks.useInstance.push(useInstance);
185+
hooks.useInstance.push(useTableDataInstance);
196186
}
197187
);
198188
// Manage column width
199-
const [columnsWidthStyle, setColumnsWidthStyle] = React.useState(
189+
const [columnsWidthState, setColumnsWidthState] = React.useState(
200190
getColumnsWidthStyle(rows, columns)
201191
);
192+
202193
const [isDragUpdate, setDragUpdate] = React.useState(false);
203194
// Manage DnD
204195
const currentColOrder = React.useRef(null);
@@ -282,7 +273,12 @@ export function Table(initialState: TableDataType) {
282273
{(droppableProvided, snapshot) => (
283274
<div
284275
key={`div-Droppable-${i}`}
285-
{...headerGroup.getHeaderGroupProps()}
276+
{...headerGroup.getHeaderGroupProps({
277+
style: {
278+
...headerGroup.getHeaderGroupProps().style,
279+
maxWidth: `${columnsWidthState.totalWidth}px`,
280+
},
281+
})}
286282
ref={droppableProvided.innerRef}
287283
className={`${c("tr header-group")}`}
288284
>
@@ -308,12 +304,22 @@ export function Table(initialState: TableDataType) {
308304
: {
309305
...tableCellBaseProps,
310306
style: {
311-
width: `${columnsWidthStyle[column.id]}px`,
307+
width: `${
308+
columnsWidthState.widthRecord[column.id]
309+
}px`,
312310
},
313311
};
312+
314313
return (
315314
<div {...tableCellProps}>
316-
{column.render("Header")}
315+
<HeaderContext.Provider
316+
value={{
317+
columnWidthState: columnsWidthState,
318+
setColumnWidthState: setColumnsWidthState,
319+
}}
320+
>
321+
{column.render("Header")}
322+
</HeaderContext.Provider>
317323
</div>
318324
);
319325
})}
@@ -334,15 +340,20 @@ export function Table(initialState: TableDataType) {
334340
<div {...row.getRowProps()} className={`${c("tr")}`} key={row.id}>
335341
{row.cells.map((cell) => {
336342
const tableCellBaseProps = {
337-
...cell.getCellProps(),
343+
...cell.getCellProps({
344+
style: {
345+
...cell.getCellProps().style,
346+
maxWidth: `${columnsWidthState.totalWidth}px`,
347+
},
348+
}),
338349
className: `${c("td")}`,
339350
};
340351
const tableCellProps = isDragUpdate
341352
? tableCellBaseProps
342353
: {
343354
...tableCellBaseProps,
344355
style: {
345-
width: columnsWidthStyle[cell.column.id],
356+
width: columnsWidthState.widthRecord[cell.column.id],
346357
},
347358
};
348359
return <div {...tableCellProps}>{cell.render("Cell")}</div>;

‎src/components/contexts/HeaderContext.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HeaderContextType } from "cdm/StyleModel";
2+
import { createContext } from "react";
3+
4+
export const HeaderContext = createContext<HeaderContextType | null>(null); //exporting context object

‎src/components/index/Database.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import React, { useEffect, useReducer } from "react";
22
import { Table } from "components/Table";
33
import { TableDataType } from "cdm/FolderModel";
4-
import { DatabaseContext } from "context/context";
54
import { databaseReducer } from "components/reducers/DatabaseDispatch";
65
import { ActionTypes } from "helpers/Constants";
76
export function createDatabase(tableProps: TableDataType): JSX.Element {
8-
return (
9-
<DatabaseContext.Provider value={app}>
10-
<Database {...tableProps} />
11-
</DatabaseContext.Provider>
12-
);
7+
return <Database {...tableProps} />;
138
}
149

1510
export function Database(tableProps: TableDataType) {

0 commit comments

Comments
 (0)