@mui/x-data-grid-generator 7.21.0 → 7.22.1
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/CHANGELOG.md +142 -0
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +1 -1
- package/hooks/serverUtils.d.ts +9 -6
- package/hooks/serverUtils.js +118 -9
- package/hooks/useMockServer.d.ts +15 -2
- package/hooks/useMockServer.js +73 -17
- package/hooks/useMovieData.d.ts +3 -1
- package/hooks/useMovieData.js +2 -0
- package/hooks/useQuery.js +6 -1
- package/index.js +1 -1
- package/modern/hooks/index.js +1 -1
- package/modern/hooks/serverUtils.js +118 -9
- package/modern/hooks/useMockServer.js +73 -17
- package/modern/hooks/useMovieData.js +2 -0
- package/modern/hooks/useQuery.js +6 -1
- package/modern/index.js +1 -1
- package/node/hooks/index.js +7 -11
- package/node/hooks/serverUtils.js +121 -11
- package/node/hooks/useMockServer.js +72 -16
- package/node/hooks/useMovieData.js +5 -1
- package/node/hooks/useQuery.js +6 -1
- package/node/index.js +1 -1
- package/package.json +2 -2
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { GridLogicOperator } from '@mui/x-data-grid-pro';
|
|
3
3
|
import { randomInt } from "../services/random-generator.js";
|
|
4
|
-
export const DEFAULT_DATASET_OPTIONS = {
|
|
5
|
-
dataSet: 'Commodity',
|
|
6
|
-
rowLength: 100,
|
|
7
|
-
maxColumns: 6
|
|
8
|
-
};
|
|
9
4
|
export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
10
5
|
export const DEFAULT_SERVER_OPTIONS = {
|
|
11
6
|
minDelay: disableDelay ? 0 : 100,
|
|
@@ -213,8 +208,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
213
208
|
}, delay); // simulate network latency
|
|
214
209
|
});
|
|
215
210
|
};
|
|
216
|
-
const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1
|
|
217
|
-
) => {
|
|
211
|
+
const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1, rowQualifier) => {
|
|
218
212
|
const parentDepth = parentPath.length;
|
|
219
213
|
const children = [];
|
|
220
214
|
for (let i = 0; i < allRows.length; i += 1) {
|
|
@@ -224,7 +218,9 @@ const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth =
|
|
|
224
218
|
continue;
|
|
225
219
|
}
|
|
226
220
|
if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
|
|
227
|
-
|
|
221
|
+
if (!rowQualifier || rowQualifier(row)) {
|
|
222
|
+
children.push(row);
|
|
223
|
+
}
|
|
228
224
|
}
|
|
229
225
|
}
|
|
230
226
|
return children;
|
|
@@ -287,7 +283,7 @@ const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) =>
|
|
|
287
283
|
};
|
|
288
284
|
|
|
289
285
|
/**
|
|
290
|
-
* Simulates server data
|
|
286
|
+
* Simulates server data for tree-data feature
|
|
291
287
|
*/
|
|
292
288
|
export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
293
289
|
const {
|
|
@@ -342,4 +338,117 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
|
|
|
342
338
|
});
|
|
343
339
|
}, delay); // simulate network latency
|
|
344
340
|
});
|
|
341
|
+
};
|
|
342
|
+
|
|
343
|
+
/**
|
|
344
|
+
* Simulates server data for row grouping feature
|
|
345
|
+
*/
|
|
346
|
+
export const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
347
|
+
const {
|
|
348
|
+
minDelay = 100,
|
|
349
|
+
maxDelay = 300
|
|
350
|
+
} = serverOptions;
|
|
351
|
+
const pathKey = 'path';
|
|
352
|
+
if (maxDelay < minDelay) {
|
|
353
|
+
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
354
|
+
}
|
|
355
|
+
if (queryOptions.groupKeys == null) {
|
|
356
|
+
throw new Error('serverOptions.groupKeys must be defined to compute row grouping data');
|
|
357
|
+
}
|
|
358
|
+
if (queryOptions.groupFields == null) {
|
|
359
|
+
throw new Error('serverOptions.groupFields must be defined to compute row grouping data');
|
|
360
|
+
}
|
|
361
|
+
const delay = randomInt(minDelay, maxDelay);
|
|
362
|
+
const pathsToAutogenerate = new Set();
|
|
363
|
+
let rowsWithPaths = rows;
|
|
364
|
+
const rowsWithMissingGroups = [];
|
|
365
|
+
|
|
366
|
+
// add paths and generate parent rows based on `groupFields`
|
|
367
|
+
const groupFields = queryOptions.groupFields;
|
|
368
|
+
if (groupFields.length > 0) {
|
|
369
|
+
rowsWithPaths = rows.reduce((acc, row) => {
|
|
370
|
+
const partialPath = groupFields.map(field => String(row[field]));
|
|
371
|
+
for (let index = 0; index < partialPath.length; index += 1) {
|
|
372
|
+
const value = partialPath[index];
|
|
373
|
+
if (value === undefined) {
|
|
374
|
+
if (index === 0) {
|
|
375
|
+
rowsWithMissingGroups.push(_extends({}, row, {
|
|
376
|
+
group: false
|
|
377
|
+
}));
|
|
378
|
+
}
|
|
379
|
+
return acc;
|
|
380
|
+
}
|
|
381
|
+
const parentPath = partialPath.slice(0, index + 1);
|
|
382
|
+
const strigifiedPath = parentPath.join(',');
|
|
383
|
+
if (!pathsToAutogenerate.has(strigifiedPath)) {
|
|
384
|
+
pathsToAutogenerate.add(strigifiedPath);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
acc.push(_extends({}, row, {
|
|
388
|
+
path: [...partialPath, '']
|
|
389
|
+
}));
|
|
390
|
+
return acc;
|
|
391
|
+
}, []);
|
|
392
|
+
} else {
|
|
393
|
+
rowsWithPaths = rows.map(row => _extends({}, row, {
|
|
394
|
+
path: ['']
|
|
395
|
+
}));
|
|
396
|
+
}
|
|
397
|
+
const autogeneratedRows = Array.from(pathsToAutogenerate).map(path => {
|
|
398
|
+
const pathArray = path.split(',');
|
|
399
|
+
return {
|
|
400
|
+
id: `auto-generated-parent-${pathArray.join('-')}`,
|
|
401
|
+
path: pathArray.slice(0, pathArray.length),
|
|
402
|
+
group: pathArray.slice(-1)[0]
|
|
403
|
+
};
|
|
404
|
+
});
|
|
405
|
+
|
|
406
|
+
// apply plain filtering
|
|
407
|
+
const filteredRows = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
|
|
408
|
+
|
|
409
|
+
// get root row count
|
|
410
|
+
const rootRows = findTreeDataRowChildren(filteredRows, []);
|
|
411
|
+
const rootRowCount = rootRows.length;
|
|
412
|
+
let filteredRowsWithMissingGroups = [];
|
|
413
|
+
let childRows = rootRows;
|
|
414
|
+
if (queryOptions.groupKeys.length === 0) {
|
|
415
|
+
filteredRowsWithMissingGroups = filteredRows.filter(({
|
|
416
|
+
group
|
|
417
|
+
}) => group === false);
|
|
418
|
+
} else {
|
|
419
|
+
childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
|
|
420
|
+
}
|
|
421
|
+
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
422
|
+
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1, ({
|
|
423
|
+
id
|
|
424
|
+
}) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
|
|
425
|
+
const descendantCount = descendants.length;
|
|
426
|
+
return _extends({}, row, {
|
|
427
|
+
descendantCount
|
|
428
|
+
});
|
|
429
|
+
});
|
|
430
|
+
if (queryOptions.sortModel) {
|
|
431
|
+
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
432
|
+
const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
|
|
433
|
+
const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
434
|
+
childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
|
|
435
|
+
}
|
|
436
|
+
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
437
|
+
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
438
|
+
const {
|
|
439
|
+
pageSize,
|
|
440
|
+
page
|
|
441
|
+
} = queryOptions.paginationModel;
|
|
442
|
+
if (pageSize < childRowsWithDescendantCounts.length) {
|
|
443
|
+
childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
return new Promise(resolve => {
|
|
447
|
+
setTimeout(() => {
|
|
448
|
+
resolve({
|
|
449
|
+
rows: childRowsWithDescendantCounts,
|
|
450
|
+
rootRowCount
|
|
451
|
+
});
|
|
452
|
+
}, delay); // simulate network latency
|
|
453
|
+
});
|
|
345
454
|
};
|
|
@@ -2,16 +2,49 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { LRUCache } from 'lru-cache';
|
|
4
4
|
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
|
|
5
|
-
import {
|
|
5
|
+
import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
|
|
6
|
+
import { getCommodityColumns } from "../columns/commodities.columns.js";
|
|
7
|
+
import { getEmployeeColumns } from "../columns/employees.columns.js";
|
|
6
8
|
import { getRealGridData } from "../services/real-data-service.js";
|
|
7
9
|
import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
|
|
8
|
-
import { loadServerRows, processTreeDataRows,
|
|
10
|
+
import { loadServerRows, processTreeDataRows, processRowGroupingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
|
|
9
11
|
import { randomInt } from "../services/index.js";
|
|
12
|
+
import { getMovieRows, getMovieColumns } from "./useMovieData.js";
|
|
10
13
|
const dataCache = new LRUCache({
|
|
11
14
|
max: 10,
|
|
12
15
|
ttl: 60 * 5 * 1e3 // 5 minutes
|
|
13
16
|
});
|
|
14
17
|
export const BASE_URL = 'https://mui.com/x/api/data-grid';
|
|
18
|
+
const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
|
|
19
|
+
dataSet: isRowGrouping ? 'Movies' : 'Commodity',
|
|
20
|
+
rowLength: isRowGrouping ? getMovieRows().length : 100,
|
|
21
|
+
maxColumns: 6
|
|
22
|
+
});
|
|
23
|
+
const getColumnsFromOptions = options => {
|
|
24
|
+
let columns;
|
|
25
|
+
switch (options.dataSet) {
|
|
26
|
+
case 'Commodity':
|
|
27
|
+
columns = getCommodityColumns(options.editable);
|
|
28
|
+
break;
|
|
29
|
+
case 'Employee':
|
|
30
|
+
columns = getEmployeeColumns();
|
|
31
|
+
break;
|
|
32
|
+
case 'Movies':
|
|
33
|
+
columns = getMovieColumns();
|
|
34
|
+
break;
|
|
35
|
+
default:
|
|
36
|
+
throw new Error('Unknown dataset');
|
|
37
|
+
}
|
|
38
|
+
if (options.visibleFields) {
|
|
39
|
+
columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
|
|
40
|
+
hide: true
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
if (options.maxColumns) {
|
|
44
|
+
columns = columns.slice(0, options.maxColumns);
|
|
45
|
+
}
|
|
46
|
+
return columns;
|
|
47
|
+
};
|
|
15
48
|
function decodeParams(url) {
|
|
16
49
|
const params = new URL(url).searchParams;
|
|
17
50
|
const decodedParams = {};
|
|
@@ -42,6 +75,14 @@ const getInitialState = (columns, groupingField) => {
|
|
|
42
75
|
};
|
|
43
76
|
};
|
|
44
77
|
const defaultColDef = getGridDefaultColumnTypes();
|
|
78
|
+
function sendEmptyResponse() {
|
|
79
|
+
return new Promise(resolve => {
|
|
80
|
+
resolve({
|
|
81
|
+
rows: [],
|
|
82
|
+
rowCount: 0
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
}
|
|
45
86
|
export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
|
|
46
87
|
const [data, setData] = React.useState();
|
|
47
88
|
const [index, setIndex] = React.useState(0);
|
|
@@ -51,7 +92,9 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
51
92
|
shouldRequestsFailRef.current = shouldRequestsFail;
|
|
52
93
|
}
|
|
53
94
|
}, [shouldRequestsFail]);
|
|
54
|
-
const
|
|
95
|
+
const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
|
|
96
|
+
const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
|
|
97
|
+
const isTreeData = options.treeData?.groupingField != null;
|
|
55
98
|
const columns = React.useMemo(() => {
|
|
56
99
|
return getColumnsFromOptions({
|
|
57
100
|
dataSet: options.dataSet,
|
|
@@ -62,7 +105,6 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
62
105
|
}, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
|
|
63
106
|
const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
|
|
64
107
|
const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
|
|
65
|
-
const isTreeData = options.treeData?.groupingField != null;
|
|
66
108
|
const getGroupKey = React.useMemo(() => {
|
|
67
109
|
if (isTreeData) {
|
|
68
110
|
return row => row[options.treeData.groupingField];
|
|
@@ -86,6 +128,15 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
86
128
|
setData(newData);
|
|
87
129
|
return undefined;
|
|
88
130
|
}
|
|
131
|
+
if (options.dataSet === 'Movies') {
|
|
132
|
+
const rowsData = {
|
|
133
|
+
rows: getMovieRows(),
|
|
134
|
+
columns
|
|
135
|
+
};
|
|
136
|
+
setData(rowsData);
|
|
137
|
+
dataCache.set(cacheKey, rowsData);
|
|
138
|
+
return undefined;
|
|
139
|
+
}
|
|
89
140
|
let active = true;
|
|
90
141
|
(async () => {
|
|
91
142
|
let rowData;
|
|
@@ -117,13 +168,8 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
117
168
|
};
|
|
118
169
|
}, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
|
|
119
170
|
const fetchRows = React.useCallback(async requestUrl => {
|
|
120
|
-
if (!
|
|
121
|
-
return
|
|
122
|
-
resolve({
|
|
123
|
-
rows: [],
|
|
124
|
-
rowCount: 0
|
|
125
|
-
});
|
|
126
|
-
});
|
|
171
|
+
if (!requestUrl || !data?.rows) {
|
|
172
|
+
return sendEmptyResponse();
|
|
127
173
|
}
|
|
128
174
|
const params = decodeParams(requestUrl);
|
|
129
175
|
const verbose = serverOptions?.verbose ?? true;
|
|
@@ -151,11 +197,22 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
151
197
|
setTimeout(() => reject(new Error('Could not fetch the data')), delay);
|
|
152
198
|
});
|
|
153
199
|
}
|
|
154
|
-
if (isTreeData
|
|
200
|
+
if (isTreeData) {
|
|
201
|
+
const {
|
|
202
|
+
rows,
|
|
203
|
+
rootRowCount
|
|
204
|
+
} = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
205
|
+
getRowsResponse = {
|
|
206
|
+
rows: rows.slice().map(row => _extends({}, row, {
|
|
207
|
+
path: undefined
|
|
208
|
+
})),
|
|
209
|
+
rowCount: rootRowCount
|
|
210
|
+
};
|
|
211
|
+
} else if (isRowGrouping) {
|
|
155
212
|
const {
|
|
156
213
|
rows,
|
|
157
214
|
rootRowCount
|
|
158
|
-
} = await
|
|
215
|
+
} = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
159
216
|
getRowsResponse = {
|
|
160
217
|
rows: rows.slice().map(row => _extends({}, row, {
|
|
161
218
|
path: undefined
|
|
@@ -163,12 +220,11 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
163
220
|
rowCount: rootRowCount
|
|
164
221
|
};
|
|
165
222
|
} else {
|
|
166
|
-
// plain data
|
|
167
223
|
const {
|
|
168
224
|
returnedRows,
|
|
169
225
|
nextCursor,
|
|
170
226
|
totalRowCount
|
|
171
|
-
} = await loadServerRows(data
|
|
227
|
+
} = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
172
228
|
getRowsResponse = {
|
|
173
229
|
rows: returnedRows,
|
|
174
230
|
rowCount: totalRowCount,
|
|
@@ -183,10 +239,10 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
|
|
|
183
239
|
}
|
|
184
240
|
resolve(getRowsResponse);
|
|
185
241
|
});
|
|
186
|
-
}, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
|
|
242
|
+
}, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
|
|
187
243
|
return {
|
|
188
244
|
columns: columnsWithDefaultColDef,
|
|
189
|
-
initialState,
|
|
245
|
+
initialState: options.dataSet === 'Movies' ? {} : initialState,
|
|
190
246
|
getGroupKey,
|
|
191
247
|
getChildrenCount,
|
|
192
248
|
fetchRows,
|
package/modern/hooks/useQuery.js
CHANGED
|
@@ -3,7 +3,12 @@ import * as React from 'react';
|
|
|
3
3
|
import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
|
|
4
4
|
import { isDeepEqual } from '@mui/x-data-grid/internals';
|
|
5
5
|
import { useDemoData, getColumnsFromOptions, getInitialState } from "./useDemoData.js";
|
|
6
|
-
import {
|
|
6
|
+
import { DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
|
|
7
|
+
const DEFAULT_DATASET_OPTIONS = {
|
|
8
|
+
dataSet: 'Commodity',
|
|
9
|
+
rowLength: 100,
|
|
10
|
+
maxColumns: 6
|
|
11
|
+
};
|
|
7
12
|
export const createFakeServer = (dataSetOptions, serverOptions) => {
|
|
8
13
|
const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
|
|
9
14
|
const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
|
package/modern/index.js
CHANGED
package/node/hooks/index.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
|
+
useMovieData: true,
|
|
7
8
|
loadServerRows: true
|
|
8
9
|
};
|
|
9
10
|
Object.defineProperty(exports, "loadServerRows", {
|
|
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "loadServerRows", {
|
|
|
12
13
|
return _serverUtils.loadServerRows;
|
|
13
14
|
}
|
|
14
15
|
});
|
|
16
|
+
Object.defineProperty(exports, "useMovieData", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return _useMovieData.useMovieData;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
15
22
|
var _useDemoData = require("./useDemoData");
|
|
16
23
|
Object.keys(_useDemoData).forEach(function (key) {
|
|
17
24
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -37,17 +44,6 @@ Object.keys(_useBasicDemoData).forEach(function (key) {
|
|
|
37
44
|
});
|
|
38
45
|
});
|
|
39
46
|
var _useMovieData = require("./useMovieData");
|
|
40
|
-
Object.keys(_useMovieData).forEach(function (key) {
|
|
41
|
-
if (key === "default" || key === "__esModule") return;
|
|
42
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
43
|
-
if (key in exports && exports[key] === _useMovieData[key]) return;
|
|
44
|
-
Object.defineProperty(exports, key, {
|
|
45
|
-
enumerable: true,
|
|
46
|
-
get: function () {
|
|
47
|
-
return _useMovieData[key];
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
47
|
var _useQuery = require("./useQuery");
|
|
52
48
|
Object.keys(_useQuery).forEach(function (key) {
|
|
53
49
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -4,15 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.processTreeDataRows = exports.
|
|
7
|
+
exports.processTreeDataRows = exports.processRowGroupingRows = exports.loadServerRows = exports.disableDelay = exports.DEFAULT_SERVER_OPTIONS = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _xDataGridPro = require("@mui/x-data-grid-pro");
|
|
10
10
|
var _randomGenerator = require("../services/random-generator");
|
|
11
|
-
const DEFAULT_DATASET_OPTIONS = exports.DEFAULT_DATASET_OPTIONS = {
|
|
12
|
-
dataSet: 'Commodity',
|
|
13
|
-
rowLength: 100,
|
|
14
|
-
maxColumns: 6
|
|
15
|
-
};
|
|
16
11
|
const disableDelay = exports.disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
17
12
|
const DEFAULT_SERVER_OPTIONS = exports.DEFAULT_SERVER_OPTIONS = {
|
|
18
13
|
minDelay: disableDelay ? 0 : 100,
|
|
@@ -221,8 +216,7 @@ const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultCol
|
|
|
221
216
|
});
|
|
222
217
|
};
|
|
223
218
|
exports.loadServerRows = loadServerRows;
|
|
224
|
-
const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1
|
|
225
|
-
) => {
|
|
219
|
+
const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1, rowQualifier) => {
|
|
226
220
|
const parentDepth = parentPath.length;
|
|
227
221
|
const children = [];
|
|
228
222
|
for (let i = 0; i < allRows.length; i += 1) {
|
|
@@ -232,7 +226,9 @@ const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth =
|
|
|
232
226
|
continue;
|
|
233
227
|
}
|
|
234
228
|
if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
|
|
235
|
-
|
|
229
|
+
if (!rowQualifier || rowQualifier(row)) {
|
|
230
|
+
children.push(row);
|
|
231
|
+
}
|
|
236
232
|
}
|
|
237
233
|
}
|
|
238
234
|
return children;
|
|
@@ -295,7 +291,7 @@ const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) =>
|
|
|
295
291
|
};
|
|
296
292
|
|
|
297
293
|
/**
|
|
298
|
-
* Simulates server data
|
|
294
|
+
* Simulates server data for tree-data feature
|
|
299
295
|
*/
|
|
300
296
|
const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
301
297
|
const {
|
|
@@ -351,4 +347,118 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
|
|
|
351
347
|
}, delay); // simulate network latency
|
|
352
348
|
});
|
|
353
349
|
};
|
|
354
|
-
|
|
350
|
+
|
|
351
|
+
/**
|
|
352
|
+
* Simulates server data for row grouping feature
|
|
353
|
+
*/
|
|
354
|
+
exports.processTreeDataRows = processTreeDataRows;
|
|
355
|
+
const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
356
|
+
const {
|
|
357
|
+
minDelay = 100,
|
|
358
|
+
maxDelay = 300
|
|
359
|
+
} = serverOptions;
|
|
360
|
+
const pathKey = 'path';
|
|
361
|
+
if (maxDelay < minDelay) {
|
|
362
|
+
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
363
|
+
}
|
|
364
|
+
if (queryOptions.groupKeys == null) {
|
|
365
|
+
throw new Error('serverOptions.groupKeys must be defined to compute row grouping data');
|
|
366
|
+
}
|
|
367
|
+
if (queryOptions.groupFields == null) {
|
|
368
|
+
throw new Error('serverOptions.groupFields must be defined to compute row grouping data');
|
|
369
|
+
}
|
|
370
|
+
const delay = (0, _randomGenerator.randomInt)(minDelay, maxDelay);
|
|
371
|
+
const pathsToAutogenerate = new Set();
|
|
372
|
+
let rowsWithPaths = rows;
|
|
373
|
+
const rowsWithMissingGroups = [];
|
|
374
|
+
|
|
375
|
+
// add paths and generate parent rows based on `groupFields`
|
|
376
|
+
const groupFields = queryOptions.groupFields;
|
|
377
|
+
if (groupFields.length > 0) {
|
|
378
|
+
rowsWithPaths = rows.reduce((acc, row) => {
|
|
379
|
+
const partialPath = groupFields.map(field => String(row[field]));
|
|
380
|
+
for (let index = 0; index < partialPath.length; index += 1) {
|
|
381
|
+
const value = partialPath[index];
|
|
382
|
+
if (value === undefined) {
|
|
383
|
+
if (index === 0) {
|
|
384
|
+
rowsWithMissingGroups.push((0, _extends2.default)({}, row, {
|
|
385
|
+
group: false
|
|
386
|
+
}));
|
|
387
|
+
}
|
|
388
|
+
return acc;
|
|
389
|
+
}
|
|
390
|
+
const parentPath = partialPath.slice(0, index + 1);
|
|
391
|
+
const strigifiedPath = parentPath.join(',');
|
|
392
|
+
if (!pathsToAutogenerate.has(strigifiedPath)) {
|
|
393
|
+
pathsToAutogenerate.add(strigifiedPath);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
acc.push((0, _extends2.default)({}, row, {
|
|
397
|
+
path: [...partialPath, '']
|
|
398
|
+
}));
|
|
399
|
+
return acc;
|
|
400
|
+
}, []);
|
|
401
|
+
} else {
|
|
402
|
+
rowsWithPaths = rows.map(row => (0, _extends2.default)({}, row, {
|
|
403
|
+
path: ['']
|
|
404
|
+
}));
|
|
405
|
+
}
|
|
406
|
+
const autogeneratedRows = Array.from(pathsToAutogenerate).map(path => {
|
|
407
|
+
const pathArray = path.split(',');
|
|
408
|
+
return {
|
|
409
|
+
id: `auto-generated-parent-${pathArray.join('-')}`,
|
|
410
|
+
path: pathArray.slice(0, pathArray.length),
|
|
411
|
+
group: pathArray.slice(-1)[0]
|
|
412
|
+
};
|
|
413
|
+
});
|
|
414
|
+
|
|
415
|
+
// apply plain filtering
|
|
416
|
+
const filteredRows = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
|
|
417
|
+
|
|
418
|
+
// get root row count
|
|
419
|
+
const rootRows = findTreeDataRowChildren(filteredRows, []);
|
|
420
|
+
const rootRowCount = rootRows.length;
|
|
421
|
+
let filteredRowsWithMissingGroups = [];
|
|
422
|
+
let childRows = rootRows;
|
|
423
|
+
if (queryOptions.groupKeys.length === 0) {
|
|
424
|
+
filteredRowsWithMissingGroups = filteredRows.filter(({
|
|
425
|
+
group
|
|
426
|
+
}) => group === false);
|
|
427
|
+
} else {
|
|
428
|
+
childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
|
|
429
|
+
}
|
|
430
|
+
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
431
|
+
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1, ({
|
|
432
|
+
id
|
|
433
|
+
}) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
|
|
434
|
+
const descendantCount = descendants.length;
|
|
435
|
+
return (0, _extends2.default)({}, row, {
|
|
436
|
+
descendantCount
|
|
437
|
+
});
|
|
438
|
+
});
|
|
439
|
+
if (queryOptions.sortModel) {
|
|
440
|
+
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
441
|
+
const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
|
|
442
|
+
const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
443
|
+
childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
|
|
444
|
+
}
|
|
445
|
+
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
446
|
+
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
447
|
+
const {
|
|
448
|
+
pageSize,
|
|
449
|
+
page
|
|
450
|
+
} = queryOptions.paginationModel;
|
|
451
|
+
if (pageSize < childRowsWithDescendantCounts.length) {
|
|
452
|
+
childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
return new Promise(resolve => {
|
|
456
|
+
setTimeout(() => {
|
|
457
|
+
resolve({
|
|
458
|
+
rows: childRowsWithDescendantCounts,
|
|
459
|
+
rootRowCount
|
|
460
|
+
});
|
|
461
|
+
}, delay); // simulate network latency
|
|
462
|
+
});
|
|
463
|
+
};
|
|
464
|
+
exports.processRowGroupingRows = processRowGroupingRows;
|