@vuu-ui/vuu-table 0.13.114 → 0.13.115-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Row.js +16 -19
- package/cjs/Row.js.map +1 -1
- package/cjs/Table.js +8 -15
- package/cjs/Table.js.map +1 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +6 -7
- package/cjs/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +2 -3
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +2 -3
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +3 -5
- package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +5 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/cjs/data-row/DataRow.js +146 -0
- package/cjs/data-row/DataRow.js.map +1 -0
- package/cjs/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/cjs/table-cell/TableCell.js +6 -9
- package/cjs/table-cell/TableCell.js.map +1 -1
- package/cjs/table-cell/TableGroupCell.css.js +1 -1
- package/cjs/table-cell/TableGroupCell.js +7 -8
- package/cjs/table-cell/TableGroupCell.js.map +1 -1
- package/cjs/table-data-source/{moving-window.js → DataRowMovingWindow.js} +19 -29
- package/cjs/table-data-source/DataRowMovingWindow.js.map +1 -0
- package/cjs/table-data-source/useDataSource.js +77 -37
- package/cjs/table-data-source/useDataSource.js.map +1 -1
- package/cjs/useRowClassNameGenerators.js +2 -2
- package/cjs/useRowClassNameGenerators.js.map +1 -1
- package/cjs/useSelection.js +5 -6
- package/cjs/useSelection.js.map +1 -1
- package/cjs/useTable.js +26 -36
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableContextMenu.js +6 -10
- package/cjs/useTableContextMenu.js.map +1 -1
- package/cjs/useTableScroll.js +0 -1
- package/cjs/useTableScroll.js.map +1 -1
- package/cjs/useTableViewport.js +2 -2
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/Row.js +17 -20
- package/esm/Row.js.map +1 -1
- package/esm/Table.js +9 -16
- package/esm/Table.js.map +1 -1
- package/esm/bulk-edit/useBulkEditPanel.js +7 -8
- package/esm/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +2 -3
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +3 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/esm/cell-renderers/input-cell/InputCell.js +3 -5
- package/esm/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +5 -6
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/esm/data-row/DataRow.js +144 -0
- package/esm/data-row/DataRow.js.map +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/table-cell/TableCell.js +6 -9
- package/esm/table-cell/TableCell.js.map +1 -1
- package/esm/table-cell/TableGroupCell.css.js +1 -1
- package/esm/table-cell/TableGroupCell.js +8 -9
- package/esm/table-cell/TableGroupCell.js.map +1 -1
- package/esm/table-data-source/{moving-window.js → DataRowMovingWindow.js} +20 -30
- package/esm/table-data-source/DataRowMovingWindow.js.map +1 -0
- package/esm/table-data-source/useDataSource.js +78 -38
- package/esm/table-data-source/useDataSource.js.map +1 -1
- package/esm/useRowClassNameGenerators.js +2 -2
- package/esm/useRowClassNameGenerators.js.map +1 -1
- package/esm/useSelection.js +6 -7
- package/esm/useSelection.js.map +1 -1
- package/esm/useTable.js +27 -37
- package/esm/useTable.js.map +1 -1
- package/esm/useTableContextMenu.js +7 -11
- package/esm/useTableContextMenu.js.map +1 -1
- package/esm/useTableScroll.js +0 -1
- package/esm/useTableScroll.js.map +1 -1
- package/esm/useTableViewport.js +2 -2
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +10 -10
- package/types/Row.d.ts +1 -1
- package/types/Table.d.ts +1 -12
- package/types/cell-renderers/checkbox-cell/CheckboxCell.d.ts +1 -1
- package/types/cell-renderers/input-cell/InputCell.d.ts +1 -1
- package/types/data-row/DataRow.d.ts +16 -0
- package/types/index.d.ts +1 -0
- package/types/table-cell/TableCell.d.ts +1 -1
- package/types/table-cell/TableGroupCell.d.ts +1 -1
- package/types/table-data-source/DataRowMovingWindow.d.ts +24 -0
- package/types/table-data-source/useDataSource.d.ts +5 -6
- package/types/useTable.d.ts +5 -7
- package/types/useTableContextMenu.d.ts +5 -7
- package/types/useTableScroll.d.ts +1 -3
- package/cjs/table-data-source/moving-window.js.map +0 -1
- package/esm/table-data-source/moving-window.js.map +0 -1
- package/types/table-data-source/moving-window.d.ts +0 -23
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
4
|
var react = require('react');
|
|
5
|
-
var
|
|
5
|
+
var DataRowMovingWindow = require('./DataRowMovingWindow.js');
|
|
6
|
+
var DataRow = require('../data-row/DataRow.js');
|
|
6
7
|
|
|
7
|
-
const
|
|
8
|
+
const NullDataRow = () => ({});
|
|
8
9
|
const useDataSource = ({
|
|
9
10
|
autoSelectFirstRow,
|
|
10
11
|
autoSelectRowKey,
|
|
@@ -18,10 +19,14 @@ const useDataSource = ({
|
|
|
18
19
|
suspenseProps
|
|
19
20
|
}) => {
|
|
20
21
|
const [, forceUpdate] = react.useState(null);
|
|
21
|
-
const
|
|
22
|
+
const dataRows = react.useRef([]);
|
|
22
23
|
const isMounted = react.useRef(true);
|
|
23
24
|
const hasUpdated = react.useRef(false);
|
|
24
25
|
const rangeRef = react.useRef(dataSource.range);
|
|
26
|
+
const dataRowRef = react.useRef(NullDataRow);
|
|
27
|
+
const setColumnsRef = react.useRef(
|
|
28
|
+
void 0
|
|
29
|
+
);
|
|
25
30
|
const totalRowCountRef = react.useRef(0);
|
|
26
31
|
const rowAutoSelected = react.useRef(false);
|
|
27
32
|
const autoSelect = autoSelectRowKey ?? (autoSelectFirstRow || selectionModel === "single-no-deselect");
|
|
@@ -43,45 +48,63 @@ const useDataSource = ({
|
|
|
43
48
|
}
|
|
44
49
|
};
|
|
45
50
|
}, [autoSelect, dataSource, handleConfigChange]);
|
|
46
|
-
const
|
|
47
|
-
() => new
|
|
51
|
+
const dataRowWindow = react.useMemo(
|
|
52
|
+
() => new DataRowMovingWindow.MovingDataRowWindow(rangeRef.current.withBuffer),
|
|
48
53
|
[]
|
|
49
54
|
);
|
|
55
|
+
react.useMemo(() => {
|
|
56
|
+
dataSource.on("resumed", () => {
|
|
57
|
+
const { range } = dataSource;
|
|
58
|
+
if (range.to !== 0) {
|
|
59
|
+
dataRowWindow.setRange(dataSource.range.withBuffer);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}, [dataRowWindow, dataSource]);
|
|
50
63
|
const setData = react.useCallback(
|
|
51
64
|
(updates) => {
|
|
65
|
+
const { current: DataRow2 } = dataRowRef;
|
|
52
66
|
for (const row of updates) {
|
|
53
|
-
|
|
67
|
+
dataRowWindow.add(DataRow2(row));
|
|
54
68
|
}
|
|
55
|
-
|
|
69
|
+
dataRows.current = dataRowWindow.data;
|
|
56
70
|
if (isMounted.current) {
|
|
57
71
|
forceUpdate({});
|
|
58
72
|
}
|
|
59
73
|
},
|
|
60
|
-
[
|
|
74
|
+
[dataRowWindow]
|
|
61
75
|
);
|
|
62
76
|
const selectRow = react.useCallback(
|
|
63
|
-
(
|
|
64
|
-
const rowKey =
|
|
77
|
+
(dataRow) => {
|
|
78
|
+
const rowKey = dataRow.key;
|
|
65
79
|
dataSource.select?.({
|
|
66
80
|
preserveExistingSelection: false,
|
|
67
81
|
rowKey,
|
|
68
82
|
type: "SELECT_ROW"
|
|
69
83
|
});
|
|
70
|
-
onSelect?.(
|
|
84
|
+
onSelect?.(dataRow);
|
|
71
85
|
},
|
|
72
86
|
[dataSource, onSelect]
|
|
73
87
|
);
|
|
88
|
+
const createDataRow = react.useCallback(
|
|
89
|
+
(columns, schemaColumns) => {
|
|
90
|
+
const [DataRow2, setColumns] = DataRow.dataRowFactory(columns, schemaColumns);
|
|
91
|
+
dataRowRef.current = DataRow2;
|
|
92
|
+
setColumnsRef.current = setColumns;
|
|
93
|
+
},
|
|
94
|
+
[]
|
|
95
|
+
);
|
|
74
96
|
const datasourceMessageHandler = react.useCallback(
|
|
75
97
|
(message) => {
|
|
76
98
|
if (message.type === "subscribed") {
|
|
99
|
+
createDataRow(message.columns, message.tableSchema.columns);
|
|
77
100
|
onSubscribed?.(message);
|
|
78
101
|
} else if (message.type === "viewport-update") {
|
|
79
102
|
if (typeof message.size === "number") {
|
|
80
103
|
onSizeChange?.(message.size);
|
|
81
|
-
const size =
|
|
82
|
-
|
|
104
|
+
const size = dataRowWindow.data.length;
|
|
105
|
+
dataRowWindow.setRowCount(message.size);
|
|
83
106
|
totalRowCountRef.current = message.size;
|
|
84
|
-
if (
|
|
107
|
+
if (dataRowWindow.data.length < size) {
|
|
85
108
|
if (isMounted.current === false) {
|
|
86
109
|
console.log("setting state whilst unmounted");
|
|
87
110
|
}
|
|
@@ -93,27 +116,27 @@ const useDataSource = ({
|
|
|
93
116
|
if (autoSelect && rowAutoSelected.current === false) {
|
|
94
117
|
rowAutoSelected.current = true;
|
|
95
118
|
if (typeof autoSelect === "string") {
|
|
96
|
-
const
|
|
97
|
-
if (
|
|
98
|
-
selectRow(
|
|
119
|
+
const dataRow = dataRowWindow.getByKey(autoSelect);
|
|
120
|
+
if (dataRow) {
|
|
121
|
+
selectRow(dataRow);
|
|
99
122
|
} else {
|
|
100
123
|
console.warn(
|
|
101
124
|
`[useDataSource] autoSelect row key ${autoSelect} not in viewport`
|
|
102
125
|
);
|
|
103
126
|
}
|
|
104
|
-
} else if (
|
|
105
|
-
selectRow(
|
|
127
|
+
} else if (dataRowWindow.hasData) {
|
|
128
|
+
selectRow(dataRowWindow.firstRow);
|
|
106
129
|
}
|
|
107
130
|
}
|
|
108
131
|
} else if (message.size === 0) {
|
|
109
132
|
setData([]);
|
|
110
133
|
} else if (typeof message.size === "number") {
|
|
111
|
-
|
|
134
|
+
dataRows.current = dataRowWindow.data;
|
|
112
135
|
hasUpdated.current = true;
|
|
113
136
|
}
|
|
114
137
|
} else if (message.type === "viewport-clear") {
|
|
115
138
|
onSizeChange?.(0);
|
|
116
|
-
|
|
139
|
+
dataRowWindow.setRowCount(0);
|
|
117
140
|
setData([]);
|
|
118
141
|
if (isMounted.current === false) {
|
|
119
142
|
console.log("setting state whilst unmounted");
|
|
@@ -123,16 +146,27 @@ const useDataSource = ({
|
|
|
123
146
|
console.log(`useDataSource unexpected message ${message.type}`);
|
|
124
147
|
}
|
|
125
148
|
},
|
|
126
|
-
[
|
|
149
|
+
[
|
|
150
|
+
autoSelect,
|
|
151
|
+
createDataRow,
|
|
152
|
+
dataRowWindow,
|
|
153
|
+
onSizeChange,
|
|
154
|
+
onSubscribed,
|
|
155
|
+
selectRow,
|
|
156
|
+
setData
|
|
157
|
+
]
|
|
127
158
|
);
|
|
128
159
|
const getSelectedRows = react.useCallback(() => {
|
|
129
|
-
return
|
|
130
|
-
}, [
|
|
160
|
+
return dataRowWindow.getSelectedRows();
|
|
161
|
+
}, [dataRowWindow]);
|
|
131
162
|
react.useEffect(() => {
|
|
132
163
|
if (dataSource.status === "disabled") {
|
|
133
164
|
dataSource.enable?.(datasourceMessageHandler);
|
|
134
165
|
}
|
|
135
166
|
}, [dataSource, datasourceMessageHandler]);
|
|
167
|
+
react.useMemo(() => {
|
|
168
|
+
setColumnsRef.current?.(dataSource.columns);
|
|
169
|
+
}, [dataSource.columns]);
|
|
136
170
|
const setRange = react.useCallback(
|
|
137
171
|
(viewportRange) => {
|
|
138
172
|
if (!rangeRef.current.equals(viewportRange)) {
|
|
@@ -141,7 +175,7 @@ const useDataSource = ({
|
|
|
141
175
|
viewportRange.to,
|
|
142
176
|
renderBufferSize
|
|
143
177
|
);
|
|
144
|
-
|
|
178
|
+
dataRowWindow.setRange(range.withBuffer);
|
|
145
179
|
if (dataSource.status !== "subscribed" && dataSource.status !== "subscribing" && dataSource.status !== "enabling") {
|
|
146
180
|
dataSource?.subscribe(
|
|
147
181
|
{
|
|
@@ -158,8 +192,8 @@ const useDataSource = ({
|
|
|
158
192
|
},
|
|
159
193
|
[
|
|
160
194
|
autoSelectRowKey,
|
|
195
|
+
dataRowWindow,
|
|
161
196
|
dataSource,
|
|
162
|
-
dataWindow,
|
|
163
197
|
datasourceMessageHandler,
|
|
164
198
|
renderBufferSize,
|
|
165
199
|
revealSelected
|
|
@@ -168,6 +202,14 @@ const useDataSource = ({
|
|
|
168
202
|
react.useEffect(() => {
|
|
169
203
|
isMounted.current = true;
|
|
170
204
|
if (dataSource.status !== "initialising") {
|
|
205
|
+
const { columns, tableSchema } = dataSource;
|
|
206
|
+
if (tableSchema) {
|
|
207
|
+
createDataRow(columns, tableSchema.columns);
|
|
208
|
+
} else {
|
|
209
|
+
throw Error(
|
|
210
|
+
`[useDataSource] a resumed dataSource must have a tableSchema`
|
|
211
|
+
);
|
|
212
|
+
}
|
|
171
213
|
dataSource.resume?.(datasourceMessageHandler);
|
|
172
214
|
if (dataSource.range.from > 0) {
|
|
173
215
|
const { from, to } = rangeRef.current.reset;
|
|
@@ -181,20 +223,18 @@ const useDataSource = ({
|
|
|
181
223
|
suspenseProps?.escalateDelay
|
|
182
224
|
);
|
|
183
225
|
};
|
|
184
|
-
}, [
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
);
|
|
226
|
+
}, [
|
|
227
|
+
createDataRow,
|
|
228
|
+
dataSource,
|
|
229
|
+
datasourceMessageHandler,
|
|
230
|
+
setRange,
|
|
231
|
+
suspenseProps
|
|
232
|
+
]);
|
|
192
233
|
return {
|
|
193
|
-
|
|
194
|
-
|
|
234
|
+
dataRows: dataRows.current,
|
|
235
|
+
dataRowsRef: dataRows,
|
|
195
236
|
getSelectedRows,
|
|
196
237
|
range: rangeRef.current,
|
|
197
|
-
removeColumnDataFromCache,
|
|
198
238
|
setRange
|
|
199
239
|
};
|
|
200
240
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n DataSourceConfigChangeHandler,\n DataSourceRow,\n DataSourceSubscribeCallback,\n DataSourceSubscribedMessage,\n DataSourceSuspenseProps,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { TableRowSelectHandlerInternal } from \"@vuu-ui/vuu-table-types\";\nimport { MovingWindow } from \"./moving-window\";\n\nconst { KEY } = metadataKeys;\n\nexport interface DataSourceHookProps\n extends Pick<\n TableProps,\n | \"autoSelectFirstRow\"\n | \"autoSelectRowKey\"\n | \"dataSource\"\n | \"renderBufferSize\"\n | \"revealSelected\"\n | \"selectionModel\"\n > {\n suspenseProps?: DataSourceSuspenseProps;\n onSelect: TableRowSelectHandlerInternal;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n autoSelectFirstRow,\n autoSelectRowKey,\n dataSource,\n onSizeChange,\n onSubscribed,\n renderBufferSize = 0,\n revealSelected,\n onSelect,\n selectionModel,\n suspenseProps,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const data = useRef<DataSourceRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<Range>(dataSource.range);\n const totalRowCountRef = useRef(0);\n const rowAutoSelected = useRef(false);\n\n const autoSelect =\n autoSelectRowKey ??\n (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n (_config, _range, _confirmed, configChanges) => {\n if (configChanges?.filterChanged) {\n rowAutoSelected.current = false;\n }\n },\n [],\n );\n\n useEffect(() => {\n if (autoSelect) {\n dataSource.on(\"config\", handleConfigChange);\n }\n return () => {\n if (autoSelect) {\n dataSource.removeListener(\"config\", handleConfigChange);\n }\n };\n }, [autoSelect, dataSource, handleConfigChange]);\n\n const dataWindow = useMemo(\n () => new MovingWindow(rangeRef.current.withBuffer),\n [],\n );\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n for (const row of updates) {\n dataWindow.add(row);\n }\n data.current = dataWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n }\n },\n [dataWindow],\n );\n\n const selectRow = useCallback(\n (row: DataSourceRow) => {\n const rowKey = row[KEY];\n dataSource.select?.({\n preserveExistingSelection: false,\n rowKey,\n type: \"SELECT_ROW\",\n } as SelectRowRequest);\n onSelect?.(row);\n },\n [dataSource, onSelect],\n );\n\n const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n onSubscribed?.(message);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n const size = dataWindow.data.length;\n dataWindow.setRowCount(message.size);\n totalRowCountRef.current = message.size;\n\n if (dataWindow.data.length < size) {\n if (isMounted.current === false) {\n console.log(\"setting state whilst unmounted\");\n }\n\n forceUpdate({});\n }\n }\n if (message.rows) {\n setData(message.rows);\n if (autoSelect && rowAutoSelected.current === false) {\n // OR if no selected row in message.rows, e.g after a filter\n rowAutoSelected.current = true;\n if (typeof autoSelect === \"string\") {\n const row = message.rows.find((row) => row[KEY] === autoSelect);\n if (row) {\n selectRow(row);\n } else {\n console.warn(\n `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n );\n }\n } else if (message.rows.length > 0) {\n selectRow(message.rows[0]);\n }\n }\n } else if (message.size === 0) {\n setData([]);\n } else if (typeof message.size === \"number\") {\n data.current = dataWindow.data;\n hasUpdated.current = true;\n }\n } else if (message.type === \"viewport-clear\") {\n onSizeChange?.(0);\n dataWindow.setRowCount(0);\n setData([]);\n\n if (isMounted.current === false) {\n console.log(\"setting state whilst unmounted\");\n }\n\n forceUpdate({});\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [autoSelect, dataWindow, onSizeChange, onSubscribed, selectRow, setData],\n );\n\n const getSelectedRows = useCallback(() => {\n return dataWindow.getSelectedRows();\n }, [dataWindow]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n }\n }, [dataSource, datasourceMessageHandler]);\n\n const setRange = useCallback(\n (viewportRange: VuuRange) => {\n if (!rangeRef.current.equals(viewportRange)) {\n const range = Range(\n viewportRange.from,\n viewportRange.to,\n renderBufferSize,\n );\n\n dataWindow.setRange(range.withBuffer);\n\n if (\n dataSource.status !== \"subscribed\" &&\n dataSource.status !== \"subscribing\" &&\n dataSource.status !== \"enabling\"\n ) {\n dataSource?.subscribe(\n {\n range,\n revealSelected,\n selectedKeyValues: autoSelectRowKey\n ? [autoSelectRowKey]\n : undefined,\n },\n datasourceMessageHandler,\n );\n } else {\n dataSource.range = rangeRef.current = range;\n }\n }\n },\n [\n autoSelectRowKey,\n dataSource,\n dataWindow,\n datasourceMessageHandler,\n renderBufferSize,\n revealSelected,\n ],\n );\n\n useEffect(() => {\n isMounted.current = true;\n if (dataSource.status !== \"initialising\") {\n dataSource.resume?.(datasourceMessageHandler);\n\n if (dataSource.range.from > 0) {\n // UI does not currently restore scroll position, so always reset to top of dataset\n const { from, to } = rangeRef.current.reset;\n setRange({ from, to });\n }\n }\n return () => {\n isMounted.current = false;\n dataSource.suspend?.(\n suspenseProps?.escalateToDisable,\n suspenseProps?.escalateDelay,\n );\n };\n }, [dataSource, datasourceMessageHandler, setRange, suspenseProps]);\n\n const removeColumnDataFromCache = useCallback(\n (indexOfRemovedColumn: number) => {\n dataWindow.spliceDataAtIndex(indexOfRemovedColumn);\n data.current = dataWindow.data;\n },\n [dataWindow],\n );\n\n return {\n data: data.current,\n dataRef: data,\n getSelectedRows,\n range: rangeRef.current,\n removeColumnDataFromCache,\n setRange,\n };\n};\n"],"names":["metadataKeys","useState","useRef","useCallback","useEffect","useMemo","MovingWindow","row","Range"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n DataSourceConfigChangeHandler,\n DataSourceRow,\n DataSourceSubscribeCallback,\n DataSourceSubscribedMessage,\n DataSourceSuspenseProps,\n SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n DataRow,\n TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n extends Pick<\n TableProps,\n | \"autoSelectFirstRow\"\n | \"autoSelectRowKey\"\n | \"dataSource\"\n | \"renderBufferSize\"\n | \"revealSelected\"\n | \"selectionModel\"\n > {\n suspenseProps?: DataSourceSuspenseProps;\n onSelect: TableRowSelectHandlerInternal;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n autoSelectFirstRow,\n autoSelectRowKey,\n dataSource,\n onSizeChange,\n onSubscribed,\n renderBufferSize = 0,\n revealSelected,\n onSelect,\n selectionModel,\n suspenseProps,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const dataRows = useRef<DataRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<Range>(dataSource.range);\n const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n undefined,\n );\n const totalRowCountRef = useRef(0);\n const rowAutoSelected = useRef(false);\n\n const autoSelect =\n autoSelectRowKey ??\n (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n (_config, _range, _confirmed, configChanges) => {\n if (configChanges?.filterChanged) {\n rowAutoSelected.current = false;\n }\n },\n [],\n );\n\n useEffect(() => {\n if (autoSelect) {\n dataSource.on(\"config\", handleConfigChange);\n }\n return () => {\n if (autoSelect) {\n dataSource.removeListener(\"config\", handleConfigChange);\n }\n };\n }, [autoSelect, dataSource, handleConfigChange]);\n\n const dataRowWindow = useMemo(\n () => new MovingDataRowWindow(rangeRef.current.withBuffer),\n [],\n );\n\n useMemo(() => {\n dataSource.on(\"resumed\", () => {\n // When we resume a dataSource (after switching tabs etc)\n // client will receive rows. We may not have received any\n // setRange calls at this point so dataWindow range will\n //not yet be set. If the dataWindow range is already set,\n // this is a no-op.\n const { range } = dataSource;\n if (range.to !== 0) {\n dataRowWindow.setRange(dataSource.range.withBuffer);\n }\n });\n }, [dataRowWindow, dataSource]);\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n const { current: DataRow } = dataRowRef;\n for (const row of updates) {\n // for now, we create a new DataRow each time\n dataRowWindow.add(DataRow(row));\n }\n dataRows.current = dataRowWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n }\n },\n [dataRowWindow],\n );\n\n const selectRow = useCallback(\n (dataRow: DataRow) => {\n const rowKey = dataRow.key;\n dataSource.select?.({\n preserveExistingSelection: false,\n rowKey,\n type: \"SELECT_ROW\",\n } as SelectRowRequest);\n onSelect?.(dataRow);\n },\n [dataSource, onSelect],\n );\n\n const createDataRow = useCallback(\n (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n dataRowRef.current = DataRow;\n setColumnsRef.current = setColumns;\n },\n [],\n );\n\n const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n createDataRow(message.columns, message.tableSchema.columns);\n onSubscribed?.(message);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n const size = dataRowWindow.data.length;\n dataRowWindow.setRowCount(message.size);\n totalRowCountRef.current = message.size;\n\n if (dataRowWindow.data.length < size) {\n if (isMounted.current === false) {\n console.log(\"setting state whilst unmounted\");\n }\n\n forceUpdate({});\n }\n }\n if (message.rows) {\n setData(message.rows);\n if (autoSelect && rowAutoSelected.current === false) {\n // OR if no selected row in message.rows, e.g after a filter\n rowAutoSelected.current = true;\n if (typeof autoSelect === \"string\") {\n const dataRow = dataRowWindow.getByKey(autoSelect);\n if (dataRow) {\n selectRow(dataRow);\n } else {\n console.warn(\n `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n );\n }\n } else if (dataRowWindow.hasData) {\n selectRow(dataRowWindow.firstRow);\n }\n }\n } else if (message.size === 0) {\n setData([]);\n } else if (typeof message.size === \"number\") {\n dataRows.current = dataRowWindow.data;\n hasUpdated.current = true;\n }\n } else if (message.type === \"viewport-clear\") {\n onSizeChange?.(0);\n dataRowWindow.setRowCount(0);\n setData([]);\n\n if (isMounted.current === false) {\n console.log(\"setting state whilst unmounted\");\n }\n\n forceUpdate({});\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [\n autoSelect,\n createDataRow,\n dataRowWindow,\n onSizeChange,\n onSubscribed,\n selectRow,\n setData,\n ],\n );\n\n const getSelectedRows = useCallback(() => {\n return dataRowWindow.getSelectedRows();\n }, [dataRowWindow]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n }\n }, [dataSource, datasourceMessageHandler]);\n\n useMemo(() => {\n setColumnsRef.current?.(dataSource.columns);\n }, [dataSource.columns]);\n\n const setRange = useCallback(\n (viewportRange: VuuRange) => {\n if (!rangeRef.current.equals(viewportRange)) {\n const range = Range(\n viewportRange.from,\n viewportRange.to,\n renderBufferSize,\n );\n\n dataRowWindow.setRange(range.withBuffer);\n\n if (\n dataSource.status !== \"subscribed\" &&\n dataSource.status !== \"subscribing\" &&\n dataSource.status !== \"enabling\"\n ) {\n dataSource?.subscribe(\n {\n range,\n revealSelected,\n selectedKeyValues: autoSelectRowKey\n ? [autoSelectRowKey]\n : undefined,\n },\n datasourceMessageHandler,\n );\n } else {\n dataSource.range = rangeRef.current = range;\n }\n }\n },\n [\n autoSelectRowKey,\n dataRowWindow,\n dataSource,\n datasourceMessageHandler,\n renderBufferSize,\n revealSelected,\n ],\n );\n\n useEffect(() => {\n isMounted.current = true;\n if (dataSource.status !== \"initialising\") {\n const { columns, tableSchema } = dataSource;\n if (tableSchema) {\n createDataRow(columns, tableSchema.columns);\n } else {\n throw Error(\n `[useDataSource] a resumed dataSource must have a tableSchema`,\n );\n }\n\n dataSource.resume?.(datasourceMessageHandler);\n\n if (dataSource.range.from > 0) {\n // UI does not currently restore scroll position, so always reset to top of dataset\n const { from, to } = rangeRef.current.reset;\n setRange({ from, to });\n }\n }\n return () => {\n isMounted.current = false;\n dataSource.suspend?.(\n suspenseProps?.escalateToDisable,\n suspenseProps?.escalateDelay,\n );\n };\n }, [\n createDataRow,\n dataSource,\n datasourceMessageHandler,\n setRange,\n suspenseProps,\n ]);\n\n return {\n dataRows: dataRows.current,\n dataRowsRef: dataRows,\n getSelectedRows,\n range: rangeRef.current,\n setRange,\n };\n};\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","MovingDataRowWindow","DataRow","dataRowFactory","Range"],"mappings":"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"}
|
|
@@ -11,10 +11,10 @@ const createClassNameGenerator = (ids) => {
|
|
|
11
11
|
functions.push(fn.fn);
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
return (
|
|
14
|
+
return (dataRow) => {
|
|
15
15
|
const classNames = [];
|
|
16
16
|
functions?.forEach((fn) => {
|
|
17
|
-
const className = fn(
|
|
17
|
+
const className = fn(dataRow);
|
|
18
18
|
if (className) {
|
|
19
19
|
classNames.push(className);
|
|
20
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowClassNameGenerators.js","sources":["../../../packages/vuu-table/src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n getRowClassNameGenerator,\n RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\n\nconst createClassNameGenerator = (\n ids?: string[],\n): RowClassNameGenerator | undefined => {\n const functions: RowClassNameGenerator[] = [];\n ids?.forEach((id) => {\n const fn = getRowClassNameGenerator(id);\n if (fn) {\n functions.push(fn.fn);\n }\n });\n return (
|
|
1
|
+
{"version":3,"file":"useRowClassNameGenerators.js","sources":["../../../packages/vuu-table/src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n getRowClassNameGenerator,\n RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\n\nconst createClassNameGenerator = (\n ids?: string[],\n): RowClassNameGenerator | undefined => {\n const functions: RowClassNameGenerator[] = [];\n ids?.forEach((id) => {\n const fn = getRowClassNameGenerator(id);\n if (fn) {\n functions.push(fn.fn);\n }\n });\n return (dataRow) => {\n const classNames: string[] = [];\n functions?.forEach((fn) => {\n const className = fn(dataRow);\n if (className) {\n classNames.push(className);\n }\n });\n return classNames.join(\" \");\n };\n};\n\nexport const useRowClassNameGenerators = ({\n rowClassNameGenerators,\n}: TableConfig) => {\n return useMemo<RowClassNameGenerator | undefined>(() => {\n return createClassNameGenerator(rowClassNameGenerators);\n }, [rowClassNameGenerators]);\n};\n"],"names":["getRowClassNameGenerator","useMemo"],"mappings":";;;;;AAOA,MAAM,wBAAA,GAA2B,CAC/B,GACsC,KAAA;AACtC,EAAA,MAAM,YAAqC,EAAC;AAC5C,EAAK,GAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACnB,IAAM,MAAA,EAAA,GAAKA,kCAAyB,EAAE,CAAA;AACtC,IAAA,IAAI,EAAI,EAAA;AACN,MAAU,SAAA,CAAA,IAAA,CAAK,GAAG,EAAE,CAAA;AAAA;AACtB,GACD,CAAA;AACD,EAAA,OAAO,CAAC,OAAY,KAAA;AAClB,IAAA,MAAM,aAAuB,EAAC;AAC9B,IAAW,SAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACzB,MAAM,MAAA,SAAA,GAAY,GAAG,OAAO,CAAA;AAC5B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,UAAA,CAAW,KAAK,SAAS,CAAA;AAAA;AAC3B,KACD,CAAA;AACD,IAAO,OAAA,UAAA,CAAW,KAAK,GAAG,CAAA;AAAA,GAC5B;AACF,CAAA;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,CAAmB,KAAA;AACjB,EAAA,OAAOC,cAA2C,MAAM;AACtD,IAAA,OAAO,yBAAyB,sBAAsB,CAAA;AAAA,GACxD,EAAG,CAAC,sBAAsB,CAAC,CAAA;AAC7B;;;;"}
|
package/cjs/useSelection.js
CHANGED
|
@@ -4,7 +4,6 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var tableDomUtils = require('./table-dom-utils.js');
|
|
6
6
|
|
|
7
|
-
const { IDX, KEY, SELECTED } = vuuUtils.metadataKeys;
|
|
8
7
|
const orderedRowKeys = (activeRowIdentifier, newRowIdentifier, rangeSelect = false) => {
|
|
9
8
|
if (rangeSelect && activeRowIdentifier) {
|
|
10
9
|
if (newRowIdentifier.rowIdx > activeRowIdentifier.rowIdx) {
|
|
@@ -46,14 +45,14 @@ const useSelection = ({
|
|
|
46
45
|
[selectionKeys]
|
|
47
46
|
);
|
|
48
47
|
const handleRowClick = react.useCallback(
|
|
49
|
-
(e,
|
|
50
|
-
const {
|
|
48
|
+
(e, dataRow, rangeSelect, keepExistingSelection) => {
|
|
49
|
+
const { index: rowIdx, key: rowKey } = dataRow;
|
|
51
50
|
const { current: activeRowKey } = lastActiveRef;
|
|
52
51
|
const newRowIdentifier = { rowIdx, rowKey };
|
|
53
|
-
if (
|
|
52
|
+
if (dataRow.isSelected && selectionModel === "single-no-deselect") {
|
|
54
53
|
return;
|
|
55
54
|
}
|
|
56
|
-
const selectOperation =
|
|
55
|
+
const selectOperation = dataRow.isSelected ? vuuUtils.deselectItem : vuuUtils.selectItem;
|
|
57
56
|
if (selectionModel === "checkbox" && allowSelectCheckboxRow !== true) {
|
|
58
57
|
const cell = vuuUtils.queryClosest(e.target, ".vuuTableCell");
|
|
59
58
|
if (!cell?.querySelector(".vuuCheckboxRowSelector")) {
|
|
@@ -74,7 +73,7 @@ const useSelection = ({
|
|
|
74
73
|
);
|
|
75
74
|
lastActiveRef.current = newRowIdentifier;
|
|
76
75
|
if (selectRequest) {
|
|
77
|
-
onSelect?.(selectOperation === vuuUtils.selectItem ?
|
|
76
|
+
onSelect?.(selectOperation === vuuUtils.selectItem ? dataRow : null);
|
|
78
77
|
onSelectionChange?.(selectRequest);
|
|
79
78
|
}
|
|
80
79
|
if (allRowsSelected && selectOperation === vuuUtils.deselectItem) {
|
package/cjs/useSelection.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelection.js","sources":["../../../packages/vuu-table/src/useSelection.ts"],"sourcesContent":["import {\n TableRowClickHandlerInternal,\n TableRowSelectHandlerInternal,\n SelectionChangeHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n deselectItem,\n dispatchMouseEvent,\n
|
|
1
|
+
{"version":3,"file":"useSelection.js","sources":["../../../packages/vuu-table/src/useSelection.ts"],"sourcesContent":["import {\n TableRowClickHandlerInternal,\n TableRowSelectHandlerInternal,\n SelectionChangeHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n deselectItem,\n dispatchMouseEvent,\n queryClosest,\n selectItem,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEvent,\n KeyboardEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { getRowElementByAriaIndex } from \"./table-dom-utils\";\nimport { TableProps } from \"./Table\";\nimport { DataSource, RowSelectionEventHandler } from \"@vuu-ui/vuu-data-types\";\n\nconst orderedRowKeys = (\n activeRowIdentifier: RowIdentifier | undefined,\n newRowIdentifier: RowIdentifier,\n rangeSelect = false,\n): [string, string] | [string] => {\n if (rangeSelect && activeRowIdentifier) {\n if (newRowIdentifier.rowIdx > activeRowIdentifier.rowIdx) {\n return [activeRowIdentifier.rowKey, newRowIdentifier.rowKey];\n } else {\n return [newRowIdentifier.rowKey, activeRowIdentifier.rowKey];\n }\n } else {\n return [newRowIdentifier.rowKey];\n }\n};\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\ntype RowIdentifier = {\n rowIdx: number;\n rowKey: string;\n};\n\nexport interface SelectionHookProps\n extends Pick<TableProps, \"allowSelectCheckboxRow\" | \"onSelectionChange\"> {\n containerRef: RefObject<HTMLElement | null>;\n dataSource: DataSource;\n highlightedIndexRef: RefObject<number | undefined>;\n selectionKeys?: string[];\n selectionModel: TableSelectionModel;\n onSelectionChange: SelectionChangeHandler;\n onSelect?: TableRowSelectHandlerInternal;\n}\n\nexport const useSelection = ({\n allowSelectCheckboxRow,\n containerRef,\n dataSource,\n highlightedIndexRef,\n selectionKeys = defaultSelectionKeys,\n selectionModel,\n onSelect,\n onSelectionChange,\n}: SelectionHookProps) => {\n const lastActiveRef = useRef<RowIdentifier | undefined>(undefined);\n const [allRowsSelected, setAllRowsSelected] = useState(false);\n\n const handleRowSelection = useCallback<RowSelectionEventHandler>(\n (selectedRowsCount) => {\n setAllRowsSelected((allSelected) =>\n allSelected && selectedRowsCount < dataSource.size\n ? false\n : allSelected,\n );\n },\n [dataSource.size],\n );\n\n useEffect(() => {\n dataSource.on(\"row-selection\", handleRowSelection);\n return () => dataSource.removeListener(\"row-selection\", handleRowSelection);\n }, [dataSource, handleRowSelection]);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const handleRowClick = useCallback<TableRowClickHandlerInternal>(\n (e, dataRow, rangeSelect, keepExistingSelection) => {\n const { index: rowIdx, key: rowKey } = dataRow;\n const { current: activeRowKey } = lastActiveRef;\n const newRowIdentifier = { rowIdx, rowKey } as RowIdentifier;\n\n if (dataRow.isSelected && selectionModel === \"single-no-deselect\") {\n return;\n }\n\n const selectOperation = dataRow.isSelected ? deselectItem : selectItem;\n\n if (selectionModel === \"checkbox\" && allowSelectCheckboxRow !== true) {\n const cell = queryClosest(e.target, \".vuuTableCell\");\n if (!cell?.querySelector(\".vuuCheckboxRowSelector\")) {\n return;\n }\n }\n\n const [fromRowKey, toRowKey] = orderedRowKeys(\n activeRowKey,\n newRowIdentifier,\n rangeSelect,\n );\n\n const selectRequest = selectOperation(\n selectionModel,\n fromRowKey,\n rangeSelect,\n keepExistingSelection,\n toRowKey,\n );\n\n lastActiveRef.current = newRowIdentifier;\n\n if (selectRequest) {\n onSelect?.(selectOperation === selectItem ? dataRow : null);\n onSelectionChange?.(selectRequest);\n }\n\n if (allRowsSelected && selectOperation === deselectItem) {\n setAllRowsSelected(false);\n }\n },\n [\n allRowsSelected,\n allowSelectCheckboxRow,\n onSelect,\n onSelectionChange,\n selectionModel,\n ],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n (e) => {\n if (isSelectionEvent(e)) {\n const { current: rowIndex } = highlightedIndexRef;\n const { current: container } = containerRef;\n if (rowIndex !== undefined && rowIndex !== -1 && container) {\n const rowEl = getRowElementByAriaIndex(container, rowIndex);\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [containerRef, highlightedIndexRef, isSelectionEvent],\n );\n\n const handleCheckboxColumnHeaderClick = useCallback(() => {\n setAllRowsSelected((allSelected) => {\n if (allSelected) {\n onSelectionChange({\n type: \"DESELECT_ALL\",\n });\n } else {\n onSelectionChange({\n type: \"SELECT_ALL\",\n });\n }\n return !allSelected;\n });\n }, [onSelectionChange]);\n\n return {\n allRowsSelected,\n onCheckBoxColumnHeaderClick: handleCheckboxColumnHeaderClick,\n onKeyDown: handleKeyDown,\n onRowClick: handleRowClick,\n };\n};\n"],"names":["useRef","useState","useCallback","useEffect","deselectItem","selectItem","queryClosest","getRowElementByAriaIndex","dispatchMouseEvent"],"mappings":"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"}
|
package/cjs/useTable.js
CHANGED
|
@@ -30,7 +30,7 @@ const zeroHeaderState = {
|
|
|
30
30
|
const stripInternalProperties = (tableConfig) => {
|
|
31
31
|
return tableConfig;
|
|
32
32
|
};
|
|
33
|
-
const {
|
|
33
|
+
const { IS_EXPANDED, IS_LEAF } = vuuUtils.metadataKeys;
|
|
34
34
|
const NULL_DRAG_DROP = {
|
|
35
35
|
draggable: void 0,
|
|
36
36
|
onMouseDown: void 0
|
|
@@ -68,7 +68,6 @@ const useTable = ({
|
|
|
68
68
|
renderBufferSize = 0,
|
|
69
69
|
revealSelected,
|
|
70
70
|
rowHeight,
|
|
71
|
-
rowToObject = vuuUtils.asDataSourceRowObject,
|
|
72
71
|
scrollingApiRef,
|
|
73
72
|
selectionModel,
|
|
74
73
|
showColumnHeaderMenus = true,
|
|
@@ -145,9 +144,6 @@ const useTable = ({
|
|
|
145
144
|
selectionModel
|
|
146
145
|
]
|
|
147
146
|
);
|
|
148
|
-
const columnMap = react.useMemo(() => {
|
|
149
|
-
return vuuUtils.buildColumnMap(dataSource.columns);
|
|
150
|
-
}, [dataSource.columns]);
|
|
151
147
|
const handleSelectionChange = react.useCallback(
|
|
152
148
|
(selectRequest) => {
|
|
153
149
|
dataSource.select?.(selectRequest);
|
|
@@ -156,12 +152,12 @@ const useTable = ({
|
|
|
156
152
|
[dataSource, onSelectionChange]
|
|
157
153
|
);
|
|
158
154
|
const handleSelect = react.useCallback(
|
|
159
|
-
(
|
|
155
|
+
(dataRow) => {
|
|
160
156
|
if (onSelect) {
|
|
161
|
-
onSelect(
|
|
157
|
+
onSelect(dataRow);
|
|
162
158
|
}
|
|
163
159
|
},
|
|
164
|
-
[
|
|
160
|
+
[onSelect]
|
|
165
161
|
);
|
|
166
162
|
const onSubscribed = react.useCallback(
|
|
167
163
|
({ tableSchema }) => {
|
|
@@ -192,11 +188,11 @@ const useTable = ({
|
|
|
192
188
|
showPaginationControls
|
|
193
189
|
});
|
|
194
190
|
const {
|
|
195
|
-
|
|
196
|
-
|
|
191
|
+
dataRows,
|
|
192
|
+
dataRowsRef,
|
|
197
193
|
getSelectedRows,
|
|
198
194
|
range,
|
|
199
|
-
removeColumnDataFromCache,
|
|
195
|
+
// removeColumnDataFromCache,
|
|
200
196
|
setRange
|
|
201
197
|
} = useDataSource.useDataSource({
|
|
202
198
|
autoSelectFirstRow,
|
|
@@ -212,7 +208,6 @@ const useTable = ({
|
|
|
212
208
|
const { requestScroll, scrollTop, ...scrollProps } = useTableScroll.useTableScroll({
|
|
213
209
|
cellFocusStateRef,
|
|
214
210
|
columns,
|
|
215
|
-
focusCell: focusCellRef.current,
|
|
216
211
|
getRowAtPosition,
|
|
217
212
|
rowHeight,
|
|
218
213
|
scrollingApiRef,
|
|
@@ -292,14 +287,12 @@ const useTable = ({
|
|
|
292
287
|
...tableConfig$1,
|
|
293
288
|
columns: tableConfig$1.columns.filter((col) => col.name !== column.name)
|
|
294
289
|
};
|
|
295
|
-
const indexOfRemovedColumn = columnMap[column.name];
|
|
296
|
-
removeColumnDataFromCache(indexOfRemovedColumn);
|
|
297
290
|
applyTableConfigChange(newTableConfig, {
|
|
298
291
|
type: "column-removed",
|
|
299
292
|
column
|
|
300
293
|
});
|
|
301
294
|
},
|
|
302
|
-
[applyTableConfigChange,
|
|
295
|
+
[applyTableConfigChange, tableConfig$1]
|
|
303
296
|
);
|
|
304
297
|
const hideColumns = react.useCallback(
|
|
305
298
|
(action) => {
|
|
@@ -406,7 +399,6 @@ const useTable = ({
|
|
|
406
399
|
const onResizeColumn = react.useCallback(
|
|
407
400
|
(phase, columnName, width = 0) => {
|
|
408
401
|
if (phase === "resize") {
|
|
409
|
-
console.log(`resize column ${columnName}`);
|
|
410
402
|
cellResizeState.current?.cells.forEach((cell) => {
|
|
411
403
|
cell.style.width = `${width}px`;
|
|
412
404
|
});
|
|
@@ -483,15 +475,15 @@ const useTable = ({
|
|
|
483
475
|
]
|
|
484
476
|
);
|
|
485
477
|
const onToggleGroup = react.useCallback(
|
|
486
|
-
(
|
|
487
|
-
const isJson = vuuUtils.isJsonGroup(column,
|
|
488
|
-
const key =
|
|
489
|
-
if (
|
|
478
|
+
(dataRow, column) => {
|
|
479
|
+
const isJson = vuuUtils.isJsonGroup(column, dataRow);
|
|
480
|
+
const { key } = dataRow;
|
|
481
|
+
if (dataRow.isExpanded) {
|
|
490
482
|
dataSource.closeTreeNode(key, true);
|
|
491
483
|
if (isJson) {
|
|
492
484
|
const idx = columns.indexOf(column);
|
|
493
485
|
const rows = dataSource.getRowsAtDepth?.(idx + 1);
|
|
494
|
-
if (rows && !rows.some((
|
|
486
|
+
if (rows && !rows.some((row) => row[IS_EXPANDED] || row[IS_LEAF])) {
|
|
495
487
|
dispatchTableModelAction({
|
|
496
488
|
type: "hideColumns",
|
|
497
489
|
columns: columns.slice(idx + 2)
|
|
@@ -504,7 +496,7 @@ const useTable = ({
|
|
|
504
496
|
const childRows = dataSource.getChildRows?.(key);
|
|
505
497
|
const idx = columns.indexOf(column) + 1;
|
|
506
498
|
const columnsToShow = [columns[idx]];
|
|
507
|
-
if (childRows && childRows.some((
|
|
499
|
+
if (childRows && childRows.some((row) => row[IS_LEAF])) {
|
|
508
500
|
columnsToShow.push(columns[idx + 1]);
|
|
509
501
|
}
|
|
510
502
|
if (columnsToShow.some((col) => col.hidden)) {
|
|
@@ -516,7 +508,7 @@ const useTable = ({
|
|
|
516
508
|
}
|
|
517
509
|
}
|
|
518
510
|
},
|
|
519
|
-
[
|
|
511
|
+
[columns, dataSource, dispatchTableModelAction]
|
|
520
512
|
);
|
|
521
513
|
const handleToggleGroup = react.useCallback(
|
|
522
514
|
(treeNodeOperation, rowIdx) => {
|
|
@@ -582,9 +574,8 @@ const useTable = ({
|
|
|
582
574
|
[editingFocus, navigationFocus]
|
|
583
575
|
);
|
|
584
576
|
const onContextMenu = useTableContextMenu.useTableContextMenu({
|
|
585
|
-
columnMap,
|
|
586
577
|
columns,
|
|
587
|
-
|
|
578
|
+
dataRows,
|
|
588
579
|
dataSource,
|
|
589
580
|
getSelectedRows,
|
|
590
581
|
headerCount: headerState.count
|
|
@@ -644,11 +635,11 @@ const useTable = ({
|
|
|
644
635
|
rowCount
|
|
645
636
|
});
|
|
646
637
|
const handleRowClick = react.useCallback(
|
|
647
|
-
(evt,
|
|
648
|
-
selectionHookOnRowClick(evt,
|
|
649
|
-
onRowClickProp?.(evt,
|
|
638
|
+
(evt, dataRow, rangeSelect, keepExistingSelection) => {
|
|
639
|
+
selectionHookOnRowClick(evt, dataRow, rangeSelect, keepExistingSelection);
|
|
640
|
+
onRowClickProp?.(evt, dataRow);
|
|
650
641
|
},
|
|
651
|
-
[
|
|
642
|
+
[onRowClickProp, selectionHookOnRowClick]
|
|
652
643
|
);
|
|
653
644
|
const handleKeyDown = react.useCallback(
|
|
654
645
|
(e) => {
|
|
@@ -720,17 +711,17 @@ const useTable = ({
|
|
|
720
711
|
const {
|
|
721
712
|
editType = "commit",
|
|
722
713
|
isValid = true,
|
|
723
|
-
|
|
714
|
+
dataRow,
|
|
724
715
|
columnName,
|
|
725
716
|
value
|
|
726
717
|
} = editState;
|
|
727
718
|
if (editType === "commit" && isValid) {
|
|
728
719
|
if (dataSource.rpcRequest) {
|
|
729
|
-
if (columnName &&
|
|
720
|
+
if (columnName && dataRow) {
|
|
730
721
|
const response = await dataSource.rpcRequest({
|
|
731
722
|
params: {
|
|
732
723
|
column: columnName,
|
|
733
|
-
key:
|
|
724
|
+
key: dataRow.key,
|
|
734
725
|
data: value
|
|
735
726
|
},
|
|
736
727
|
rpcName: "editCell",
|
|
@@ -757,13 +748,13 @@ const useTable = ({
|
|
|
757
748
|
(dragDropState) => {
|
|
758
749
|
const { initialDragElement } = dragDropState;
|
|
759
750
|
const rowIndex = vuuUtils.getAriaRowIndex(initialDragElement) - headerState.count - 1;
|
|
760
|
-
const row =
|
|
751
|
+
const row = dataRowsRef.current.find((row2) => row2.index === rowIndex);
|
|
761
752
|
if (row) {
|
|
762
753
|
dragDropState.setPayload(row);
|
|
763
754
|
}
|
|
764
755
|
onDragStart?.(dragDropState);
|
|
765
756
|
},
|
|
766
|
-
[
|
|
757
|
+
[dataRowsRef, headerState.count, onDragStart]
|
|
767
758
|
);
|
|
768
759
|
const onHeaderHeightMeasured = react.useCallback(
|
|
769
760
|
(height, count) => {
|
|
@@ -795,9 +786,8 @@ const useTable = ({
|
|
|
795
786
|
allRowsSelected,
|
|
796
787
|
"aria-rowcount": dataSource.size,
|
|
797
788
|
cellBlock,
|
|
798
|
-
columnMap,
|
|
799
789
|
columns,
|
|
800
|
-
|
|
790
|
+
dataRows,
|
|
801
791
|
draggableRow,
|
|
802
792
|
focusCellPlaceholderKeyDown,
|
|
803
793
|
focusCellPlaceholderRef,
|