@mui/x-data-grid-generator 7.7.1 → 7.9.0
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 +166 -1
- package/hooks/index.d.ts +3 -0
- package/hooks/index.js +3 -1
- package/hooks/serverUtils.d.ts +54 -0
- package/hooks/serverUtils.js +345 -0
- package/hooks/useDemoData.d.ts +3 -0
- package/hooks/useDemoData.js +2 -2
- package/hooks/useMockServer.d.ts +16 -0
- package/hooks/useMockServer.js +197 -0
- package/hooks/useQuery.d.ts +97 -128
- package/hooks/useQuery.js +2 -138
- package/index.js +1 -1
- package/modern/hooks/index.js +3 -1
- package/modern/hooks/serverUtils.js +345 -0
- package/modern/hooks/useDemoData.js +2 -2
- package/modern/hooks/useMockServer.js +197 -0
- package/modern/hooks/useQuery.js +2 -138
- package/modern/index.js +1 -1
- package/node/hooks/index.js +27 -1
- package/node/hooks/serverUtils.js +354 -0
- package/node/hooks/useDemoData.js +3 -0
- package/node/hooks/useMockServer.js +207 -0
- package/node/hooks/useQuery.js +5 -142
- package/node/index.js +1 -1
- package/package.json +2 -2
package/modern/index.js
CHANGED
package/node/hooks/index.js
CHANGED
|
@@ -3,9 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
loadServerRows: true
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "loadServerRows", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () {
|
|
12
|
+
return _serverUtils.loadServerRows;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
6
15
|
var _useDemoData = require("./useDemoData");
|
|
7
16
|
Object.keys(_useDemoData).forEach(function (key) {
|
|
8
17
|
if (key === "default" || key === "__esModule") return;
|
|
18
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
9
19
|
if (key in exports && exports[key] === _useDemoData[key]) return;
|
|
10
20
|
Object.defineProperty(exports, key, {
|
|
11
21
|
enumerable: true,
|
|
@@ -17,6 +27,7 @@ Object.keys(_useDemoData).forEach(function (key) {
|
|
|
17
27
|
var _useBasicDemoData = require("./useBasicDemoData");
|
|
18
28
|
Object.keys(_useBasicDemoData).forEach(function (key) {
|
|
19
29
|
if (key === "default" || key === "__esModule") return;
|
|
30
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
20
31
|
if (key in exports && exports[key] === _useBasicDemoData[key]) return;
|
|
21
32
|
Object.defineProperty(exports, key, {
|
|
22
33
|
enumerable: true,
|
|
@@ -28,6 +39,7 @@ Object.keys(_useBasicDemoData).forEach(function (key) {
|
|
|
28
39
|
var _useMovieData = require("./useMovieData");
|
|
29
40
|
Object.keys(_useMovieData).forEach(function (key) {
|
|
30
41
|
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
31
43
|
if (key in exports && exports[key] === _useMovieData[key]) return;
|
|
32
44
|
Object.defineProperty(exports, key, {
|
|
33
45
|
enumerable: true,
|
|
@@ -39,6 +51,7 @@ Object.keys(_useMovieData).forEach(function (key) {
|
|
|
39
51
|
var _useQuery = require("./useQuery");
|
|
40
52
|
Object.keys(_useQuery).forEach(function (key) {
|
|
41
53
|
if (key === "default" || key === "__esModule") return;
|
|
54
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
42
55
|
if (key in exports && exports[key] === _useQuery[key]) return;
|
|
43
56
|
Object.defineProperty(exports, key, {
|
|
44
57
|
enumerable: true,
|
|
@@ -46,4 +59,17 @@ Object.keys(_useQuery).forEach(function (key) {
|
|
|
46
59
|
return _useQuery[key];
|
|
47
60
|
}
|
|
48
61
|
});
|
|
49
|
-
});
|
|
62
|
+
});
|
|
63
|
+
var _useMockServer = require("./useMockServer");
|
|
64
|
+
Object.keys(_useMockServer).forEach(function (key) {
|
|
65
|
+
if (key === "default" || key === "__esModule") return;
|
|
66
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
67
|
+
if (key in exports && exports[key] === _useMockServer[key]) return;
|
|
68
|
+
Object.defineProperty(exports, key, {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function () {
|
|
71
|
+
return _useMockServer[key];
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
var _serverUtils = require("./serverUtils");
|
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.processTreeDataRows = exports.loadServerRows = exports.disableDelay = exports.DEFAULT_SERVER_OPTIONS = exports.DEFAULT_DATASET_OPTIONS = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _xDataGridPro = require("@mui/x-data-grid-pro");
|
|
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
|
+
const disableDelay = exports.disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
|
|
17
|
+
const DEFAULT_SERVER_OPTIONS = exports.DEFAULT_SERVER_OPTIONS = {
|
|
18
|
+
minDelay: disableDelay ? 0 : 100,
|
|
19
|
+
maxDelay: disableDelay ? 0 : 300,
|
|
20
|
+
useCursorPagination: true
|
|
21
|
+
};
|
|
22
|
+
const apiRef = {};
|
|
23
|
+
const simplifiedValueGetter = (field, colDef) => row => {
|
|
24
|
+
return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
|
|
25
|
+
};
|
|
26
|
+
const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
|
|
27
|
+
if (!sortModel) {
|
|
28
|
+
const comparator = () => 0;
|
|
29
|
+
return comparator;
|
|
30
|
+
}
|
|
31
|
+
const sortOperators = sortModel.map(sortItem => {
|
|
32
|
+
const columnField = sortItem.field;
|
|
33
|
+
const colDef = columnsWithDefaultColDef.find(({
|
|
34
|
+
field
|
|
35
|
+
}) => field === columnField);
|
|
36
|
+
return (0, _extends2.default)({}, sortItem, {
|
|
37
|
+
valueGetter: simplifiedValueGetter(columnField, colDef),
|
|
38
|
+
sortComparator: colDef.sortComparator
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
const comparator = (row1, row2) => sortOperators.reduce((acc, {
|
|
42
|
+
valueGetter,
|
|
43
|
+
sort,
|
|
44
|
+
sortComparator
|
|
45
|
+
}) => {
|
|
46
|
+
if (acc !== 0) {
|
|
47
|
+
return acc;
|
|
48
|
+
}
|
|
49
|
+
const v1 = valueGetter(row1);
|
|
50
|
+
const v2 = valueGetter(row2);
|
|
51
|
+
return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
|
|
52
|
+
}, 0);
|
|
53
|
+
return comparator;
|
|
54
|
+
};
|
|
55
|
+
const buildQuickFilterApplier = (filterModel, columns) => {
|
|
56
|
+
const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
|
|
57
|
+
if (quickFilterValues.length === 0) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
const appliersPerField = [];
|
|
61
|
+
const stubApiRef = {
|
|
62
|
+
current: {
|
|
63
|
+
getRowFormattedValue: (row, c) => {
|
|
64
|
+
const field = c.field;
|
|
65
|
+
return row[field];
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
columns.forEach(column => {
|
|
70
|
+
const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
|
|
71
|
+
if (getApplyQuickFilterFn) {
|
|
72
|
+
appliersPerField.push({
|
|
73
|
+
column,
|
|
74
|
+
appliers: quickFilterValues.map(quickFilterValue => {
|
|
75
|
+
return {
|
|
76
|
+
fn: getApplyQuickFilterFn(quickFilterValue, column, stubApiRef)
|
|
77
|
+
};
|
|
78
|
+
})
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
|
|
83
|
+
const result = {};
|
|
84
|
+
|
|
85
|
+
/* eslint-disable no-labels */
|
|
86
|
+
outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
|
|
87
|
+
const filterValue = quickFilterValues[v];
|
|
88
|
+
for (let i = 0; i < appliersPerField.length; i += 1) {
|
|
89
|
+
const {
|
|
90
|
+
column,
|
|
91
|
+
appliers
|
|
92
|
+
} = appliersPerField[i];
|
|
93
|
+
const {
|
|
94
|
+
field
|
|
95
|
+
} = column;
|
|
96
|
+
if (shouldApplyFilter && !shouldApplyFilter(field)) {
|
|
97
|
+
continue;
|
|
98
|
+
}
|
|
99
|
+
const applier = appliers[v];
|
|
100
|
+
const value = row[field];
|
|
101
|
+
if (applier.fn === null) {
|
|
102
|
+
continue;
|
|
103
|
+
}
|
|
104
|
+
const isMatching = applier.fn(value, row, column, stubApiRef);
|
|
105
|
+
if (isMatching) {
|
|
106
|
+
result[filterValue] = true;
|
|
107
|
+
continue outer;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
result[filterValue] = false;
|
|
111
|
+
}
|
|
112
|
+
/* eslint-enable no-labels */
|
|
113
|
+
|
|
114
|
+
return result;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
const getQuicklyFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
118
|
+
if (filterModel === undefined || filterModel.quickFilterValues?.length === 0) {
|
|
119
|
+
return rows;
|
|
120
|
+
}
|
|
121
|
+
const isRowMatchingQuickFilter = buildQuickFilterApplier(filterModel, columnsWithDefaultColDef);
|
|
122
|
+
if (isRowMatchingQuickFilter) {
|
|
123
|
+
return rows.filter(row => {
|
|
124
|
+
const result = isRowMatchingQuickFilter(row);
|
|
125
|
+
return filterModel.quickFilterLogicOperator === _xDataGridPro.GridLogicOperator.And ? Object.values(result).every(Boolean) : Object.values(result).some(Boolean);
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
return rows;
|
|
129
|
+
};
|
|
130
|
+
const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
131
|
+
if (filterModel === undefined || filterModel.items.length === 0) {
|
|
132
|
+
return rows;
|
|
133
|
+
}
|
|
134
|
+
const valueGetters = filterModel.items.map(({
|
|
135
|
+
field
|
|
136
|
+
}) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
|
|
137
|
+
const filterFunctions = filterModel.items.map(filterItem => {
|
|
138
|
+
const {
|
|
139
|
+
field,
|
|
140
|
+
operator
|
|
141
|
+
} = filterItem;
|
|
142
|
+
const colDef = columnsWithDefaultColDef.find(column => column.field === field);
|
|
143
|
+
if (!colDef.filterOperators) {
|
|
144
|
+
throw new Error(`MUI: No filter operator found for column '${field}'.`);
|
|
145
|
+
}
|
|
146
|
+
const filterOperator = colDef.filterOperators.find(({
|
|
147
|
+
value
|
|
148
|
+
}) => operator === value);
|
|
149
|
+
let parsedValue = filterItem.value;
|
|
150
|
+
if (colDef.valueParser) {
|
|
151
|
+
const parser = colDef.valueParser;
|
|
152
|
+
parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, {}, colDef, apiRef)) : parser(filterItem.value, {}, colDef, apiRef);
|
|
153
|
+
}
|
|
154
|
+
return filterOperator.getApplyFilterFn({
|
|
155
|
+
filterItem,
|
|
156
|
+
value: parsedValue
|
|
157
|
+
}, colDef);
|
|
158
|
+
});
|
|
159
|
+
if (filterModel.logicOperator === _xDataGridPro.GridLogicOperator.Or) {
|
|
160
|
+
return rows.filter(row => filterModel.items.some((_, index) => {
|
|
161
|
+
const value = valueGetters[index](row);
|
|
162
|
+
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
163
|
+
}));
|
|
164
|
+
}
|
|
165
|
+
return rows.filter(row => filterModel.items.every((_, index) => {
|
|
166
|
+
const value = valueGetters[index](row);
|
|
167
|
+
return filterFunctions[index] === null ? true : filterFunctions[index](value);
|
|
168
|
+
}));
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Simulates server data loading
|
|
173
|
+
*/
|
|
174
|
+
const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
175
|
+
const {
|
|
176
|
+
minDelay = 100,
|
|
177
|
+
maxDelay = 300,
|
|
178
|
+
useCursorPagination
|
|
179
|
+
} = serverOptions;
|
|
180
|
+
if (maxDelay < minDelay) {
|
|
181
|
+
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
182
|
+
}
|
|
183
|
+
const delay = (0, _randomGenerator.randomInt)(minDelay, maxDelay);
|
|
184
|
+
const {
|
|
185
|
+
cursor,
|
|
186
|
+
page = 0,
|
|
187
|
+
pageSize
|
|
188
|
+
} = queryOptions;
|
|
189
|
+
let nextCursor;
|
|
190
|
+
let firstRowIndex;
|
|
191
|
+
let lastRowIndex;
|
|
192
|
+
let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
|
|
193
|
+
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
194
|
+
filteredRows = [...filteredRows].sort(rowComparator);
|
|
195
|
+
const totalRowCount = filteredRows.length;
|
|
196
|
+
if (!pageSize) {
|
|
197
|
+
firstRowIndex = 0;
|
|
198
|
+
lastRowIndex = filteredRows.length;
|
|
199
|
+
} else if (useCursorPagination) {
|
|
200
|
+
firstRowIndex = cursor ? filteredRows.findIndex(({
|
|
201
|
+
id
|
|
202
|
+
}) => id === cursor) : 0;
|
|
203
|
+
firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
|
|
204
|
+
lastRowIndex = firstRowIndex + pageSize;
|
|
205
|
+
nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
|
|
206
|
+
} else {
|
|
207
|
+
firstRowIndex = page * pageSize;
|
|
208
|
+
lastRowIndex = (page + 1) * pageSize;
|
|
209
|
+
}
|
|
210
|
+
const hasNextPage = lastRowIndex < filteredRows.length - 1;
|
|
211
|
+
const response = {
|
|
212
|
+
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
|
|
213
|
+
hasNextPage,
|
|
214
|
+
nextCursor,
|
|
215
|
+
totalRowCount
|
|
216
|
+
};
|
|
217
|
+
return new Promise(resolve => {
|
|
218
|
+
setTimeout(() => {
|
|
219
|
+
resolve(response);
|
|
220
|
+
}, delay); // simulate network latency
|
|
221
|
+
});
|
|
222
|
+
};
|
|
223
|
+
exports.loadServerRows = loadServerRows;
|
|
224
|
+
const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1 // the depth of the children to find relative to parentDepth, `-1` to find all
|
|
225
|
+
) => {
|
|
226
|
+
const parentDepth = parentPath.length;
|
|
227
|
+
const children = [];
|
|
228
|
+
for (let i = 0; i < allRows.length; i += 1) {
|
|
229
|
+
const row = allRows[i];
|
|
230
|
+
const rowPath = row[pathKey];
|
|
231
|
+
if (!rowPath) {
|
|
232
|
+
continue;
|
|
233
|
+
}
|
|
234
|
+
if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
|
|
235
|
+
children.push(row);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return children;
|
|
239
|
+
};
|
|
240
|
+
const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
241
|
+
let filteredRows = [...rows];
|
|
242
|
+
if (filterModel && filterModel.quickFilterValues?.length > 0) {
|
|
243
|
+
filteredRows = getQuicklyFilteredRows(rows, filterModel, columnsWithDefaultColDef);
|
|
244
|
+
}
|
|
245
|
+
if ((filterModel?.items.length ?? 0) > 0) {
|
|
246
|
+
filteredRows = getFilteredRows(filteredRows, filterModel, columnsWithDefaultColDef);
|
|
247
|
+
}
|
|
248
|
+
if (filteredRows.length === rows.length || filteredRows.length === 0) {
|
|
249
|
+
return filteredRows;
|
|
250
|
+
}
|
|
251
|
+
const pathsToIndexesMap = new Map();
|
|
252
|
+
rows.forEach((row, index) => {
|
|
253
|
+
pathsToIndexesMap.set(row.path.join(','), index);
|
|
254
|
+
});
|
|
255
|
+
const includedPaths = new Set();
|
|
256
|
+
filteredRows.forEach(row => {
|
|
257
|
+
includedPaths.add(row.path.join(','));
|
|
258
|
+
});
|
|
259
|
+
const missingChildren = [];
|
|
260
|
+
|
|
261
|
+
// include missing children of filtered rows
|
|
262
|
+
filteredRows.forEach(row => {
|
|
263
|
+
const path = row.path;
|
|
264
|
+
if (path) {
|
|
265
|
+
const children = findTreeDataRowChildren(rows, path, 'path', -1);
|
|
266
|
+
children.forEach(child => {
|
|
267
|
+
const subPath = child.path.join(',');
|
|
268
|
+
if (!includedPaths.has(subPath)) {
|
|
269
|
+
missingChildren.push(child);
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
filteredRows = missingChildren.concat(filteredRows);
|
|
275
|
+
const missingParents = [];
|
|
276
|
+
|
|
277
|
+
// include missing parents of filtered rows
|
|
278
|
+
filteredRows.forEach(row => {
|
|
279
|
+
const path = row.path;
|
|
280
|
+
if (path) {
|
|
281
|
+
includedPaths.add(path.join(','));
|
|
282
|
+
for (let i = 0; i < path.length - 1; i += 1) {
|
|
283
|
+
const subPath = path.slice(0, i + 1).join(',');
|
|
284
|
+
if (!includedPaths.has(subPath)) {
|
|
285
|
+
const index = pathsToIndexesMap.get(subPath);
|
|
286
|
+
if (index !== undefined) {
|
|
287
|
+
missingParents.push(rows[index]);
|
|
288
|
+
includedPaths.add(subPath);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
return missingParents.concat(filteredRows);
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
/**
|
|
298
|
+
* Simulates server data loading
|
|
299
|
+
*/
|
|
300
|
+
const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
301
|
+
const {
|
|
302
|
+
minDelay = 100,
|
|
303
|
+
maxDelay = 300
|
|
304
|
+
} = serverOptions;
|
|
305
|
+
const pathKey = 'path';
|
|
306
|
+
// TODO: Support filtering and cursor based pagination
|
|
307
|
+
if (maxDelay < minDelay) {
|
|
308
|
+
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
309
|
+
}
|
|
310
|
+
if (queryOptions.groupKeys == null) {
|
|
311
|
+
throw new Error('serverOptions.groupKeys must be defined to compute tree data ');
|
|
312
|
+
}
|
|
313
|
+
const delay = (0, _randomGenerator.randomInt)(minDelay, maxDelay);
|
|
314
|
+
|
|
315
|
+
// apply plain filtering
|
|
316
|
+
const filteredRows = getTreeDataFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
|
|
317
|
+
|
|
318
|
+
// get root row count
|
|
319
|
+
const rootRowCount = findTreeDataRowChildren(filteredRows, []).length;
|
|
320
|
+
|
|
321
|
+
// find direct children referring to the `parentPath`
|
|
322
|
+
const childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
|
|
323
|
+
let childRowsWithDescendantCounts = childRows.map(row => {
|
|
324
|
+
const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
|
|
325
|
+
const descendantCount = descendants.length;
|
|
326
|
+
return (0, _extends2.default)({}, row, {
|
|
327
|
+
descendantCount
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
if (queryOptions.sortModel) {
|
|
331
|
+
// apply sorting
|
|
332
|
+
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
333
|
+
childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
|
|
334
|
+
}
|
|
335
|
+
if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
|
|
336
|
+
// Only paginate root rows, grid should refetch root rows when `paginationModel` updates
|
|
337
|
+
const {
|
|
338
|
+
pageSize,
|
|
339
|
+
page
|
|
340
|
+
} = queryOptions.paginationModel;
|
|
341
|
+
if (pageSize < childRowsWithDescendantCounts.length) {
|
|
342
|
+
childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
return new Promise(resolve => {
|
|
346
|
+
setTimeout(() => {
|
|
347
|
+
resolve({
|
|
348
|
+
rows: childRowsWithDescendantCounts,
|
|
349
|
+
rootRowCount
|
|
350
|
+
});
|
|
351
|
+
}, delay); // simulate network latency
|
|
352
|
+
});
|
|
353
|
+
};
|
|
354
|
+
exports.processTreeDataRows = processTreeDataRows;
|
|
@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
+
exports.deepFreeze = void 0;
|
|
8
|
+
exports.extrapolateSeed = extrapolateSeed;
|
|
7
9
|
exports.useDemoData = exports.getInitialState = exports.getColumnsFromOptions = void 0;
|
|
8
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
11
|
var React = _interopRequireWildcard(require("react"));
|
|
@@ -65,6 +67,7 @@ const deepFreeze = object => {
|
|
|
65
67
|
}
|
|
66
68
|
return Object.freeze(object);
|
|
67
69
|
};
|
|
70
|
+
exports.deepFreeze = deepFreeze;
|
|
68
71
|
const getColumnsFromOptions = options => {
|
|
69
72
|
let columns = options.dataSet === 'Commodity' ? (0, _commodities.getCommodityColumns)(options.editable) : (0, _employees.getEmployeeColumns)();
|
|
70
73
|
if (options.visibleFields) {
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useMockServer = exports.BASE_URL = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _lruCache = _interopRequireDefault(require("lru-cache"));
|
|
11
|
+
var _xDataGridPro = require("@mui/x-data-grid-pro");
|
|
12
|
+
var _useDemoData = require("./useDemoData");
|
|
13
|
+
var _realDataService = require("../services/real-data-service");
|
|
14
|
+
var _treeDataGenerator = require("../services/tree-data-generator");
|
|
15
|
+
var _serverUtils = require("./serverUtils");
|
|
16
|
+
var _services = require("../services");
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
const dataCache = new _lruCache.default({
|
|
20
|
+
max: 10,
|
|
21
|
+
ttl: 60 * 5 * 1e3 // 5 minutes
|
|
22
|
+
});
|
|
23
|
+
const BASE_URL = exports.BASE_URL = 'https://mui.com/x/api/data-grid';
|
|
24
|
+
function decodeParams(url) {
|
|
25
|
+
const params = new URL(url).searchParams;
|
|
26
|
+
const decodedParams = {};
|
|
27
|
+
const array = Array.from(params.entries());
|
|
28
|
+
for (const [key, value] of array) {
|
|
29
|
+
try {
|
|
30
|
+
decodedParams[key] = JSON.parse(decodeURIComponent(value));
|
|
31
|
+
} catch (e) {
|
|
32
|
+
decodedParams[key] = value;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return decodedParams;
|
|
36
|
+
}
|
|
37
|
+
const getInitialState = (columns, groupingField) => {
|
|
38
|
+
const columnVisibilityModel = {};
|
|
39
|
+
columns.forEach(col => {
|
|
40
|
+
if (col.hide) {
|
|
41
|
+
columnVisibilityModel[col.field] = false;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if (groupingField) {
|
|
45
|
+
columnVisibilityModel[groupingField] = false;
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
columns: {
|
|
49
|
+
columnVisibilityModel
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
const defaultColDef = (0, _xDataGridPro.getGridDefaultColumnTypes)();
|
|
54
|
+
const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
|
|
55
|
+
const [data, setData] = React.useState();
|
|
56
|
+
const [index, setIndex] = React.useState(0);
|
|
57
|
+
const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (shouldRequestsFail !== undefined) {
|
|
60
|
+
shouldRequestsFailRef.current = shouldRequestsFail;
|
|
61
|
+
}
|
|
62
|
+
}, [shouldRequestsFail]);
|
|
63
|
+
const options = (0, _extends2.default)({}, _serverUtils.DEFAULT_DATASET_OPTIONS, dataSetOptions);
|
|
64
|
+
const columns = React.useMemo(() => {
|
|
65
|
+
return (0, _useDemoData.getColumnsFromOptions)({
|
|
66
|
+
dataSet: options.dataSet,
|
|
67
|
+
editable: options.editable,
|
|
68
|
+
maxColumns: options.maxColumns,
|
|
69
|
+
visibleFields: options.visibleFields
|
|
70
|
+
});
|
|
71
|
+
}, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
|
|
72
|
+
const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
|
|
73
|
+
const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => (0, _extends2.default)({}, defaultColDef[column.type || 'string'], column)), [columns]);
|
|
74
|
+
const isTreeData = options.treeData?.groupingField != null;
|
|
75
|
+
const getGroupKey = React.useMemo(() => {
|
|
76
|
+
if (isTreeData) {
|
|
77
|
+
return row => row[options.treeData.groupingField];
|
|
78
|
+
}
|
|
79
|
+
return undefined;
|
|
80
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
|
+
}, [options.treeData?.groupingField, isTreeData]);
|
|
82
|
+
const getChildrenCount = React.useMemo(() => {
|
|
83
|
+
if (isTreeData) {
|
|
84
|
+
return row => row.descendantCount;
|
|
85
|
+
}
|
|
86
|
+
return undefined;
|
|
87
|
+
}, [isTreeData]);
|
|
88
|
+
React.useEffect(() => {
|
|
89
|
+
const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
|
|
90
|
+
|
|
91
|
+
// Cache to allow fast switch between the JavaScript and TypeScript version
|
|
92
|
+
// of the demos.
|
|
93
|
+
if (dataCache.has(cacheKey)) {
|
|
94
|
+
const newData = dataCache.get(cacheKey);
|
|
95
|
+
setData(newData);
|
|
96
|
+
return undefined;
|
|
97
|
+
}
|
|
98
|
+
let active = true;
|
|
99
|
+
(async () => {
|
|
100
|
+
let rowData;
|
|
101
|
+
const rowLength = options.rowLength;
|
|
102
|
+
if (rowLength > 1000) {
|
|
103
|
+
rowData = await (0, _realDataService.getRealGridData)(1000, columns);
|
|
104
|
+
rowData = await (0, _useDemoData.extrapolateSeed)(rowLength, rowData);
|
|
105
|
+
} else {
|
|
106
|
+
rowData = await (0, _realDataService.getRealGridData)(rowLength, columns);
|
|
107
|
+
}
|
|
108
|
+
if (!active) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
if (isTreeData) {
|
|
112
|
+
rowData = (0, _treeDataGenerator.addTreeDataOptionsToDemoData)(rowData, {
|
|
113
|
+
maxDepth: options.treeData?.maxDepth,
|
|
114
|
+
groupingField: options.treeData?.groupingField,
|
|
115
|
+
averageChildren: options.treeData?.averageChildren
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
119
|
+
(0, _useDemoData.deepFreeze)(rowData);
|
|
120
|
+
}
|
|
121
|
+
dataCache.set(cacheKey, rowData);
|
|
122
|
+
setData(rowData);
|
|
123
|
+
})();
|
|
124
|
+
return () => {
|
|
125
|
+
active = false;
|
|
126
|
+
};
|
|
127
|
+
}, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
|
|
128
|
+
const fetchRows = React.useCallback(async requestUrl => {
|
|
129
|
+
if (!data || !requestUrl) {
|
|
130
|
+
return new Promise(resolve => {
|
|
131
|
+
resolve({
|
|
132
|
+
rows: [],
|
|
133
|
+
rowCount: 0
|
|
134
|
+
});
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
const params = decodeParams(requestUrl);
|
|
138
|
+
const verbose = serverOptions?.verbose ?? true;
|
|
139
|
+
// eslint-disable-next-line no-console
|
|
140
|
+
const print = console.info;
|
|
141
|
+
if (verbose) {
|
|
142
|
+
print('MUI X: DATASOURCE REQUEST', params);
|
|
143
|
+
}
|
|
144
|
+
let getRowsResponse;
|
|
145
|
+
const serverOptionsWithDefault = {
|
|
146
|
+
minDelay: serverOptions?.minDelay ?? _serverUtils.DEFAULT_SERVER_OPTIONS.minDelay,
|
|
147
|
+
maxDelay: serverOptions?.maxDelay ?? _serverUtils.DEFAULT_SERVER_OPTIONS.maxDelay,
|
|
148
|
+
useCursorPagination: serverOptions?.useCursorPagination ?? _serverUtils.DEFAULT_SERVER_OPTIONS.useCursorPagination
|
|
149
|
+
};
|
|
150
|
+
if (shouldRequestsFailRef.current) {
|
|
151
|
+
const {
|
|
152
|
+
minDelay,
|
|
153
|
+
maxDelay
|
|
154
|
+
} = serverOptionsWithDefault;
|
|
155
|
+
const delay = (0, _services.randomInt)(minDelay, maxDelay);
|
|
156
|
+
return new Promise((_, reject) => {
|
|
157
|
+
if (verbose) {
|
|
158
|
+
print('MUI X: DATASOURCE REQUEST FAILURE', params);
|
|
159
|
+
}
|
|
160
|
+
setTimeout(() => reject(new Error('Could not fetch the data')), delay);
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
if (isTreeData /* || TODO: `isRowGrouping` */) {
|
|
164
|
+
const {
|
|
165
|
+
rows,
|
|
166
|
+
rootRowCount
|
|
167
|
+
} = await (0, _serverUtils.processTreeDataRows)(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
168
|
+
getRowsResponse = {
|
|
169
|
+
rows: rows.slice().map(row => (0, _extends2.default)({}, row, {
|
|
170
|
+
path: undefined
|
|
171
|
+
})),
|
|
172
|
+
rowCount: rootRowCount
|
|
173
|
+
};
|
|
174
|
+
} else {
|
|
175
|
+
// plain data
|
|
176
|
+
const {
|
|
177
|
+
returnedRows,
|
|
178
|
+
nextCursor,
|
|
179
|
+
totalRowCount
|
|
180
|
+
} = await (0, _serverUtils.loadServerRows)(data.rows, (0, _extends2.default)({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
181
|
+
getRowsResponse = {
|
|
182
|
+
rows: returnedRows,
|
|
183
|
+
rowCount: totalRowCount,
|
|
184
|
+
pageInfo: {
|
|
185
|
+
nextCursor
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
}
|
|
189
|
+
return new Promise(resolve => {
|
|
190
|
+
if (verbose) {
|
|
191
|
+
print('MUI X: DATASOURCE RESPONSE', params, getRowsResponse);
|
|
192
|
+
}
|
|
193
|
+
resolve(getRowsResponse);
|
|
194
|
+
});
|
|
195
|
+
}, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
|
|
196
|
+
return {
|
|
197
|
+
columns: columnsWithDefaultColDef,
|
|
198
|
+
initialState,
|
|
199
|
+
getGroupKey,
|
|
200
|
+
getChildrenCount,
|
|
201
|
+
fetchRows,
|
|
202
|
+
loadNewData: () => {
|
|
203
|
+
setIndex(oldIndex => oldIndex + 1);
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
exports.useMockServer = useMockServer;
|