@mui/x-data-grid-generator 6.0.0-alpha.8 → 6.0.0-alpha.9
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 +129 -15
- package/columns/commodities.columns.js +0 -1
- package/columns/employees.columns.js +0 -1
- package/hooks/useDemoData.js +9 -31
- package/hooks/useMovieData.js +0 -1
- package/hooks/useQuery.js +6 -34
- package/index.js +1 -1
- package/legacy/columns/commodities.columns.js +0 -1
- package/legacy/columns/employees.columns.js +0 -2
- package/legacy/hooks/useBasicDemoData.js +6 -7
- package/legacy/hooks/useDemoData.js +28 -70
- package/legacy/hooks/useMovieData.js +0 -2
- package/legacy/hooks/useQuery.js +27 -64
- package/legacy/index.js +1 -1
- package/legacy/renderer/renderAvatar.js +0 -1
- package/legacy/renderer/renderCountry.js +3 -4
- package/legacy/renderer/renderEditCountry.js +2 -8
- package/legacy/renderer/renderEditCurrency.js +2 -8
- package/legacy/renderer/renderEditIncoterm.js +2 -10
- package/legacy/renderer/renderEditProgress.js +7 -17
- package/legacy/renderer/renderEditRating.js +2 -10
- package/legacy/renderer/renderEditStatus.js +2 -15
- package/legacy/renderer/renderEmail.js +0 -1
- package/legacy/renderer/renderIncoterm.js +0 -2
- package/legacy/renderer/renderLink.js +0 -2
- package/legacy/renderer/renderPnl.js +0 -3
- package/legacy/renderer/renderProgress.js +4 -5
- package/legacy/renderer/renderRating.js +3 -4
- package/legacy/renderer/renderStatus.js +8 -13
- package/legacy/renderer/renderTotalPrice.js +5 -6
- package/legacy/services/asyncWorker.js +4 -7
- package/legacy/services/basic-data-service.js +0 -5
- package/legacy/services/random-generator.js +6 -20
- package/legacy/services/real-data-service.js +0 -9
- package/legacy/services/tree-data-generator.js +6 -22
- package/modern/columns/commodities.columns.js +0 -1
- package/modern/columns/employees.columns.js +0 -1
- package/modern/hooks/useDemoData.js +9 -27
- package/modern/hooks/useMovieData.js +0 -1
- package/modern/hooks/useQuery.js +6 -32
- package/modern/index.js +1 -1
- package/modern/renderer/renderAvatar.js +0 -1
- package/modern/renderer/renderCountry.js +3 -4
- package/modern/renderer/renderEditCountry.js +0 -3
- package/modern/renderer/renderEditCurrency.js +0 -3
- package/modern/renderer/renderEditIncoterm.js +0 -5
- package/modern/renderer/renderEditProgress.js +0 -7
- package/modern/renderer/renderEditRating.js +0 -5
- package/modern/renderer/renderEditStatus.js +0 -10
- package/modern/renderer/renderIncoterm.js +0 -2
- package/modern/renderer/renderLink.js +0 -2
- package/modern/renderer/renderPnl.js +0 -3
- package/modern/renderer/renderProgress.js +4 -5
- package/modern/renderer/renderRating.js +3 -4
- package/modern/renderer/renderStatus.js +8 -13
- package/modern/renderer/renderTotalPrice.js +5 -6
- package/modern/services/asyncWorker.js +2 -4
- package/modern/services/basic-data-service.js +0 -5
- package/modern/services/random-generator.js +6 -19
- package/modern/services/real-data-service.js +0 -9
- package/modern/services/tree-data-generator.js +0 -14
- package/node/columns/commodities.columns.js +1 -8
- package/node/columns/employees.columns.js +1 -8
- package/node/columns/index.js +0 -4
- package/node/hooks/index.js +0 -8
- package/node/hooks/useBasicDemoData.js +0 -6
- package/node/hooks/useDemoData.js +17 -62
- package/node/hooks/useMovieData.js +0 -3
- package/node/hooks/useQuery.js +8 -48
- package/node/index.js +1 -9
- package/node/renderer/index.js +0 -32
- package/node/renderer/renderAvatar.js +0 -8
- package/node/renderer/renderCountry.js +3 -12
- package/node/renderer/renderEditCountry.js +0 -16
- package/node/renderer/renderEditCurrency.js +0 -16
- package/node/renderer/renderEditIncoterm.js +0 -17
- package/node/renderer/renderEditProgress.js +0 -20
- package/node/renderer/renderEditRating.js +0 -14
- package/node/renderer/renderEditStatus.js +0 -26
- package/node/renderer/renderEmail.js +1 -9
- package/node/renderer/renderIncoterm.js +0 -12
- package/node/renderer/renderLink.js +0 -9
- package/node/renderer/renderPnl.js +0 -12
- package/node/renderer/renderProgress.js +4 -14
- package/node/renderer/renderRating.js +3 -13
- package/node/renderer/renderStatus.js +8 -26
- package/node/renderer/renderTotalPrice.js +5 -15
- package/node/services/asyncWorker.js +2 -5
- package/node/services/basic-data-service.js +0 -7
- package/node/services/index.js +0 -8
- package/node/services/random-generator.js +7 -105
- package/node/services/real-data-service.js +0 -12
- package/node/services/static-data.js +0 -2
- package/node/services/tree-data-generator.js +1 -22
- package/package.json +4 -4
- package/renderer/renderAvatar.js +0 -1
- package/renderer/renderCountry.js +3 -4
- package/renderer/renderEditCountry.js +0 -3
- package/renderer/renderEditCurrency.js +0 -3
- package/renderer/renderEditIncoterm.js +0 -5
- package/renderer/renderEditProgress.js +0 -7
- package/renderer/renderEditRating.js +0 -5
- package/renderer/renderEditStatus.js +0 -10
- package/renderer/renderEmail.js +0 -1
- package/renderer/renderIncoterm.js +0 -2
- package/renderer/renderLink.js +0 -2
- package/renderer/renderPnl.js +0 -3
- package/renderer/renderProgress.js +4 -5
- package/renderer/renderRating.js +3 -4
- package/renderer/renderStatus.js +8 -13
- package/renderer/renderTotalPrice.js +5 -6
- package/services/asyncWorker.js +2 -4
- package/services/basic-data-service.js +0 -5
- package/services/random-generator.js +6 -20
- package/services/real-data-service.js +0 -9
- package/services/tree-data-generator.js +0 -15
|
@@ -3,13 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
4
4
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
5
5
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
6
|
-
|
|
7
6
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
8
|
-
|
|
9
7
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
-
|
|
11
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
-
|
|
13
9
|
import * as React from 'react';
|
|
14
10
|
import LRUCache from 'lru-cache';
|
|
15
11
|
import { getRealGridData } from '../services/real-data-service';
|
|
@@ -20,15 +16,12 @@ import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
|
|
|
20
16
|
var dataCache = new LRUCache({
|
|
21
17
|
max: 10,
|
|
22
18
|
ttl: 60 * 5 * 1e3 // 5 minutes
|
|
23
|
-
|
|
24
19
|
});
|
|
25
|
-
|
|
26
20
|
// Generate fake data from a seed.
|
|
27
21
|
// It's about x20 faster than getRealData.
|
|
28
22
|
function extrapolateSeed(_x, _x2) {
|
|
29
23
|
return _extrapolateSeed.apply(this, arguments);
|
|
30
24
|
}
|
|
31
|
-
|
|
32
25
|
function _extrapolateSeed() {
|
|
33
26
|
_extrapolateSeed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(rowLength, data) {
|
|
34
27
|
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
@@ -41,25 +34,20 @@ function _extrapolateSeed() {
|
|
|
41
34
|
var tasks = {
|
|
42
35
|
current: rowLength - seed.length
|
|
43
36
|
};
|
|
44
|
-
|
|
45
37
|
function work() {
|
|
46
38
|
var row = {};
|
|
47
|
-
|
|
48
39
|
for (var j = 0; j < data.columns.length; j += 1) {
|
|
49
40
|
var column = data.columns[j];
|
|
50
41
|
var index = Math.round(Math.random() * (seed.length - 1));
|
|
51
|
-
|
|
52
42
|
if (column.field === 'id') {
|
|
53
43
|
row.id = "id-".concat(tasks.current + seed.length);
|
|
54
44
|
} else {
|
|
55
45
|
row[column.field] = seed[index][column.field];
|
|
56
46
|
}
|
|
57
47
|
}
|
|
58
|
-
|
|
59
48
|
rows.push(row);
|
|
60
49
|
tasks.current -= 1;
|
|
61
50
|
}
|
|
62
|
-
|
|
63
51
|
asyncWorker({
|
|
64
52
|
work: work,
|
|
65
53
|
done: function done() {
|
|
@@ -70,7 +58,6 @@ function _extrapolateSeed() {
|
|
|
70
58
|
tasks: tasks
|
|
71
59
|
});
|
|
72
60
|
}));
|
|
73
|
-
|
|
74
61
|
case 1:
|
|
75
62
|
case "end":
|
|
76
63
|
return _context2.stop();
|
|
@@ -80,20 +67,19 @@ function _extrapolateSeed() {
|
|
|
80
67
|
}));
|
|
81
68
|
return _extrapolateSeed.apply(this, arguments);
|
|
82
69
|
}
|
|
83
|
-
|
|
84
70
|
var deepFreeze = function deepFreeze(object) {
|
|
85
71
|
// Retrieve the property names defined on object
|
|
86
|
-
var propNames = Object.getOwnPropertyNames(object);
|
|
87
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
72
|
+
var propNames = Object.getOwnPropertyNames(object);
|
|
88
73
|
|
|
89
|
-
|
|
90
|
-
_step;
|
|
74
|
+
// Freeze properties before freezing self
|
|
91
75
|
|
|
76
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
77
|
+
var _iterator = _createForOfIteratorHelper(propNames),
|
|
78
|
+
_step;
|
|
92
79
|
try {
|
|
93
80
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
94
81
|
var name = _step.value;
|
|
95
82
|
var value = object[name];
|
|
96
|
-
|
|
97
83
|
if (value && _typeof(value) === 'object') {
|
|
98
84
|
deepFreeze(value);
|
|
99
85
|
}
|
|
@@ -103,32 +89,25 @@ var deepFreeze = function deepFreeze(object) {
|
|
|
103
89
|
} finally {
|
|
104
90
|
_iterator.f();
|
|
105
91
|
}
|
|
106
|
-
|
|
107
92
|
return Object.freeze(object);
|
|
108
93
|
};
|
|
109
|
-
|
|
110
94
|
export var getColumnsFromOptions = function getColumnsFromOptions(options) {
|
|
111
95
|
var columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
|
|
112
|
-
|
|
113
96
|
if (options.visibleFields) {
|
|
114
97
|
columns = columns.map(function (col) {
|
|
115
98
|
var _options$visibleField;
|
|
116
|
-
|
|
117
99
|
return (_options$visibleField = options.visibleFields) != null && _options$visibleField.includes(col.field) ? col : _extends({}, col, {
|
|
118
100
|
hide: true
|
|
119
101
|
});
|
|
120
102
|
});
|
|
121
103
|
}
|
|
122
|
-
|
|
123
104
|
if (options.maxColumns) {
|
|
124
105
|
columns = columns.slice(0, options.maxColumns);
|
|
125
106
|
}
|
|
126
|
-
|
|
127
107
|
return columns;
|
|
128
108
|
};
|
|
129
109
|
export var getInitialState = function getInitialState(options, columns) {
|
|
130
110
|
var _options$treeData;
|
|
131
|
-
|
|
132
111
|
var columnVisibilityModel = {};
|
|
133
112
|
columns.forEach(function (col) {
|
|
134
113
|
if (col.hide) {
|
|
@@ -136,11 +115,9 @@ export var getInitialState = function getInitialState(options, columns) {
|
|
|
136
115
|
}
|
|
137
116
|
});
|
|
138
117
|
var groupingField = (_options$treeData = options.treeData) == null ? void 0 : _options$treeData.groupingField;
|
|
139
|
-
|
|
140
118
|
if (groupingField) {
|
|
141
119
|
columnVisibilityModel[groupingField] = false;
|
|
142
120
|
}
|
|
143
|
-
|
|
144
121
|
return {
|
|
145
122
|
columns: {
|
|
146
123
|
columnVisibilityModel: columnVisibilityModel
|
|
@@ -149,22 +126,18 @@ export var getInitialState = function getInitialState(options, columns) {
|
|
|
149
126
|
};
|
|
150
127
|
export var useDemoData = function useDemoData(options) {
|
|
151
128
|
var _options$treeData5, _options$treeData6, _options$treeData7;
|
|
152
|
-
|
|
153
129
|
var _React$useState = React.useState(options.rowLength),
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
130
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
131
|
+
rowLength = _React$useState2[0],
|
|
132
|
+
setRowLength = _React$useState2[1];
|
|
158
133
|
var _React$useState3 = React.useState(0),
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
134
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
135
|
+
index = _React$useState4[0],
|
|
136
|
+
setIndex = _React$useState4[1];
|
|
163
137
|
var _React$useState5 = React.useState(true),
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
138
|
+
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
139
|
+
loading = _React$useState6[0],
|
|
140
|
+
setLoading = _React$useState6[1];
|
|
168
141
|
var columns = React.useMemo(function () {
|
|
169
142
|
return getColumnsFromOptions({
|
|
170
143
|
dataSet: options.dataSet,
|
|
@@ -173,89 +146,75 @@ export var useDemoData = function useDemoData(options) {
|
|
|
173
146
|
visibleFields: options.visibleFields
|
|
174
147
|
});
|
|
175
148
|
}, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
|
|
176
|
-
|
|
177
149
|
var _React$useState7 = React.useState(function () {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
150
|
+
return addTreeDataOptionsToDemoData({
|
|
151
|
+
columns: columns,
|
|
152
|
+
rows: [],
|
|
153
|
+
initialState: getInitialState(options, columns)
|
|
154
|
+
}, options.treeData);
|
|
155
|
+
}),
|
|
156
|
+
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
157
|
+
data = _React$useState8[0],
|
|
158
|
+
setData = _React$useState8[1];
|
|
188
159
|
React.useEffect(function () {
|
|
189
|
-
var cacheKey = "".concat(options.dataSet, "-").concat(rowLength, "-").concat(index, "-").concat(options.maxColumns);
|
|
190
|
-
// of the demos.
|
|
160
|
+
var cacheKey = "".concat(options.dataSet, "-").concat(rowLength, "-").concat(index, "-").concat(options.maxColumns);
|
|
191
161
|
|
|
162
|
+
// Cache to allow fast switch between the JavaScript and TypeScript version
|
|
163
|
+
// of the demos.
|
|
192
164
|
if (dataCache.has(cacheKey)) {
|
|
193
165
|
var newData = dataCache.get(cacheKey);
|
|
194
166
|
setData(newData);
|
|
195
167
|
setLoading(false);
|
|
196
168
|
return undefined;
|
|
197
169
|
}
|
|
198
|
-
|
|
199
170
|
var active = true;
|
|
200
|
-
|
|
201
171
|
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
202
172
|
var _options$treeData2, _options$treeData3, _options$treeData4;
|
|
203
|
-
|
|
204
173
|
var newData;
|
|
205
174
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
206
175
|
while (1) {
|
|
207
176
|
switch (_context.prev = _context.next) {
|
|
208
177
|
case 0:
|
|
209
178
|
setLoading(true);
|
|
210
|
-
|
|
211
179
|
if (!(rowLength > 1000)) {
|
|
212
180
|
_context.next = 10;
|
|
213
181
|
break;
|
|
214
182
|
}
|
|
215
|
-
|
|
216
183
|
_context.next = 4;
|
|
217
184
|
return getRealGridData(1000, columns);
|
|
218
|
-
|
|
219
185
|
case 4:
|
|
220
186
|
newData = _context.sent;
|
|
221
187
|
_context.next = 7;
|
|
222
188
|
return extrapolateSeed(rowLength, newData);
|
|
223
|
-
|
|
224
189
|
case 7:
|
|
225
190
|
newData = _context.sent;
|
|
226
191
|
_context.next = 13;
|
|
227
192
|
break;
|
|
228
|
-
|
|
229
193
|
case 10:
|
|
230
194
|
_context.next = 12;
|
|
231
195
|
return getRealGridData(rowLength, columns);
|
|
232
|
-
|
|
233
196
|
case 12:
|
|
234
197
|
newData = _context.sent;
|
|
235
|
-
|
|
236
198
|
case 13:
|
|
237
199
|
if (active) {
|
|
238
200
|
_context.next = 15;
|
|
239
201
|
break;
|
|
240
202
|
}
|
|
241
|
-
|
|
242
203
|
return _context.abrupt("return");
|
|
243
|
-
|
|
244
204
|
case 15:
|
|
245
205
|
newData = addTreeDataOptionsToDemoData(newData, {
|
|
246
206
|
maxDepth: (_options$treeData2 = options.treeData) == null ? void 0 : _options$treeData2.maxDepth,
|
|
247
207
|
groupingField: (_options$treeData3 = options.treeData) == null ? void 0 : _options$treeData3.groupingField,
|
|
248
208
|
averageChildren: (_options$treeData4 = options.treeData) == null ? void 0 : _options$treeData4.averageChildren
|
|
249
|
-
});
|
|
209
|
+
});
|
|
250
210
|
|
|
211
|
+
// It's quite slow. No need for it in production.
|
|
251
212
|
if (process.env.NODE_ENV !== 'production') {
|
|
252
213
|
deepFreeze(newData);
|
|
253
214
|
}
|
|
254
|
-
|
|
255
215
|
dataCache.set(cacheKey, newData);
|
|
256
216
|
setData(newData);
|
|
257
217
|
setLoading(false);
|
|
258
|
-
|
|
259
218
|
case 20:
|
|
260
219
|
case "end":
|
|
261
220
|
return _context.stop();
|
|
@@ -263,7 +222,6 @@ export var useDemoData = function useDemoData(options) {
|
|
|
263
222
|
}
|
|
264
223
|
}, _callee);
|
|
265
224
|
}))();
|
|
266
|
-
|
|
267
225
|
return function () {
|
|
268
226
|
active = false;
|
|
269
227
|
};
|
package/legacy/hooks/useQuery.js
CHANGED
|
@@ -7,31 +7,26 @@ import * as React from 'react';
|
|
|
7
7
|
import { getGridDefaultColumnTypes, GridLinkOperator } from '@mui/x-data-grid-pro';
|
|
8
8
|
import { isDeepEqual } from '@mui/x-data-grid/internals';
|
|
9
9
|
import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
|
|
10
|
-
|
|
11
10
|
var simplifiedValueGetter = function simplifiedValueGetter(field, colDef) {
|
|
12
11
|
return function (row) {
|
|
13
12
|
var _colDef$valueGetter;
|
|
14
|
-
|
|
15
13
|
var params = {
|
|
16
14
|
id: row.id,
|
|
17
15
|
row: row,
|
|
18
16
|
field: field,
|
|
19
17
|
rowNode: {}
|
|
20
|
-
};
|
|
21
|
-
|
|
18
|
+
};
|
|
19
|
+
// @ts-ignore
|
|
22
20
|
return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, params)) || row[field];
|
|
23
21
|
};
|
|
24
22
|
};
|
|
25
|
-
|
|
26
23
|
var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultColDef) {
|
|
27
24
|
if (!sortModel) {
|
|
28
25
|
var _comparator = function _comparator() {
|
|
29
26
|
return 0;
|
|
30
27
|
};
|
|
31
|
-
|
|
32
28
|
return _comparator;
|
|
33
29
|
}
|
|
34
|
-
|
|
35
30
|
var sortOperators = sortModel.map(function (sortItem) {
|
|
36
31
|
var columnField = sortItem.field;
|
|
37
32
|
var colDef = columnsWithDefaultColDef.find(function (_ref) {
|
|
@@ -43,31 +38,25 @@ var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultCo
|
|
|
43
38
|
sortComparator: colDef.sortComparator
|
|
44
39
|
});
|
|
45
40
|
});
|
|
46
|
-
|
|
47
41
|
var comparator = function comparator(row1, row2) {
|
|
48
42
|
return sortOperators.reduce(function (acc, _ref2) {
|
|
49
43
|
var valueGetter = _ref2.valueGetter,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
44
|
+
sort = _ref2.sort,
|
|
45
|
+
sortComparator = _ref2.sortComparator;
|
|
53
46
|
if (acc !== 0) {
|
|
54
47
|
return acc;
|
|
55
48
|
}
|
|
56
|
-
|
|
57
49
|
var v1 = valueGetter(row1);
|
|
58
50
|
var v2 = valueGetter(row2);
|
|
59
51
|
return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
|
|
60
52
|
}, 0);
|
|
61
53
|
};
|
|
62
|
-
|
|
63
54
|
return comparator;
|
|
64
55
|
};
|
|
65
|
-
|
|
66
56
|
var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDefaultColDef) {
|
|
67
57
|
if (filterModel === undefined || filterModel.items.length === 0) {
|
|
68
58
|
return rows;
|
|
69
59
|
}
|
|
70
|
-
|
|
71
60
|
var valueGetters = filterModel.items.map(function (_ref3) {
|
|
72
61
|
var columnField = _ref3.columnField;
|
|
73
62
|
return simplifiedValueGetter(columnField, columnsWithDefaultColDef.find(function (_ref4) {
|
|
@@ -77,7 +66,7 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
|
|
|
77
66
|
});
|
|
78
67
|
var filterFunctions = filterModel.items.map(function (filterItem) {
|
|
79
68
|
var columnField = filterItem.columnField,
|
|
80
|
-
|
|
69
|
+
operatorValue = filterItem.operatorValue;
|
|
81
70
|
var colDef = columnsWithDefaultColDef.find(function (_ref5) {
|
|
82
71
|
var field = _ref5.field;
|
|
83
72
|
return field === columnField;
|
|
@@ -87,22 +76,18 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
|
|
|
87
76
|
return operatorValue === value;
|
|
88
77
|
});
|
|
89
78
|
var parsedValue = filterItem.value;
|
|
90
|
-
|
|
91
79
|
if (colDef.valueParser) {
|
|
92
80
|
var _filterItem$value;
|
|
93
|
-
|
|
94
81
|
var parser = colDef.valueParser;
|
|
95
82
|
parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
|
|
96
83
|
return parser(x);
|
|
97
84
|
}) : parser(filterItem.value);
|
|
98
85
|
}
|
|
99
|
-
|
|
100
86
|
return filterOperator == null ? void 0 : filterOperator.getApplyFilterFn({
|
|
101
87
|
filterItem: filterItem,
|
|
102
88
|
value: parsedValue
|
|
103
89
|
}, colDef);
|
|
104
90
|
});
|
|
105
|
-
|
|
106
91
|
if (filterModel.linkOperator === GridLinkOperator.Or) {
|
|
107
92
|
return rows.filter(function (row) {
|
|
108
93
|
return filterModel.items.some(function (_, index) {
|
|
@@ -113,7 +98,6 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
|
|
|
113
98
|
});
|
|
114
99
|
});
|
|
115
100
|
}
|
|
116
|
-
|
|
117
101
|
return rows.filter(function (row) {
|
|
118
102
|
return filterModel.items.every(function (_, index) {
|
|
119
103
|
var value = valueGetters[index](row);
|
|
@@ -123,27 +107,24 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
|
|
|
123
107
|
});
|
|
124
108
|
});
|
|
125
109
|
};
|
|
110
|
+
|
|
126
111
|
/**
|
|
127
112
|
* Simulates server data loading
|
|
128
113
|
*/
|
|
129
|
-
|
|
130
|
-
|
|
131
114
|
export var loadServerRows = function loadServerRows(rows, queryOptions, serverOptions, columnsWithDefaultColDef) {
|
|
132
115
|
var _serverOptions$minDel = serverOptions.minDelay,
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
116
|
+
minDelay = _serverOptions$minDel === void 0 ? 100 : _serverOptions$minDel,
|
|
117
|
+
_serverOptions$maxDel = serverOptions.maxDelay,
|
|
118
|
+
maxDelay = _serverOptions$maxDel === void 0 ? 300 : _serverOptions$maxDel,
|
|
119
|
+
useCursorPagination = serverOptions.useCursorPagination;
|
|
138
120
|
if (maxDelay < minDelay) {
|
|
139
121
|
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
140
122
|
}
|
|
141
|
-
|
|
142
123
|
var delay = Math.random() * (maxDelay - minDelay) + minDelay;
|
|
143
124
|
var cursor = queryOptions.cursor,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
125
|
+
_queryOptions$page = queryOptions.page,
|
|
126
|
+
page = _queryOptions$page === void 0 ? 0 : _queryOptions$page,
|
|
127
|
+
pageSize = queryOptions.pageSize;
|
|
147
128
|
var nextCursor;
|
|
148
129
|
var firstRowIndex;
|
|
149
130
|
var lastRowIndex;
|
|
@@ -151,7 +132,6 @@ export var loadServerRows = function loadServerRows(rows, queryOptions, serverOp
|
|
|
151
132
|
var rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
152
133
|
filteredRows = _toConsumableArray(filteredRows).sort(rowComparator);
|
|
153
134
|
var totalRowCount = filteredRows.length;
|
|
154
|
-
|
|
155
135
|
if (!pageSize) {
|
|
156
136
|
firstRowIndex = 0;
|
|
157
137
|
lastRowIndex = filteredRows.length;
|
|
@@ -161,14 +141,12 @@ export var loadServerRows = function loadServerRows(rows, queryOptions, serverOp
|
|
|
161
141
|
return id === cursor;
|
|
162
142
|
}) : 0;
|
|
163
143
|
firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
|
|
164
|
-
|
|
165
144
|
lastRowIndex = firstRowIndex + pageSize;
|
|
166
145
|
nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
|
|
167
146
|
} else {
|
|
168
147
|
firstRowIndex = page * pageSize;
|
|
169
148
|
lastRowIndex = (page + 1) * pageSize;
|
|
170
149
|
}
|
|
171
|
-
|
|
172
150
|
var response = {
|
|
173
151
|
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
|
|
174
152
|
nextCursor: nextCursor,
|
|
@@ -180,6 +158,7 @@ export var loadServerRows = function loadServerRows(rows, queryOptions, serverOp
|
|
|
180
158
|
}, delay); // simulate network latency
|
|
181
159
|
});
|
|
182
160
|
};
|
|
161
|
+
|
|
183
162
|
var DEFAULT_DATASET_OPTIONS = {
|
|
184
163
|
dataSet: 'Commodity',
|
|
185
164
|
rowLength: 100,
|
|
@@ -193,42 +172,34 @@ var DEFAULT_SERVER_OPTIONS = {
|
|
|
193
172
|
};
|
|
194
173
|
export var createFakeServer = function createFakeServer(dataSetOptions, serverOptions) {
|
|
195
174
|
var dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
|
|
196
|
-
|
|
197
175
|
var serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
|
|
198
|
-
|
|
199
176
|
var columns = getColumnsFromOptions(dataSetOptionsWithDefault);
|
|
200
177
|
var initialState = getInitialState(dataSetOptionsWithDefault, columns);
|
|
201
178
|
var defaultColDef = getGridDefaultColumnTypes();
|
|
202
179
|
var columnsWithDefaultColDef = columns.map(function (column) {
|
|
203
180
|
return _extends({}, defaultColDef[column.type || 'string'], column);
|
|
204
181
|
});
|
|
205
|
-
|
|
206
182
|
var useQuery = function useQuery(queryOptions) {
|
|
207
183
|
var _useDemoData = useDemoData(dataSetOptionsWithDefault),
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
184
|
+
rows = _useDemoData.data.rows,
|
|
185
|
+
dataGenerationIsLoading = _useDemoData.loading;
|
|
211
186
|
var queryOptionsRef = React.useRef(queryOptions);
|
|
212
|
-
|
|
213
187
|
var _React$useState = React.useState({
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
188
|
+
pageInfo: {},
|
|
189
|
+
rows: []
|
|
190
|
+
}),
|
|
191
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
192
|
+
response = _React$useState2[0],
|
|
193
|
+
setResponse = _React$useState2[1];
|
|
221
194
|
var _React$useState3 = React.useState(dataGenerationIsLoading),
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
195
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
196
|
+
isLoading = _React$useState4[0],
|
|
197
|
+
setIsLoading = _React$useState4[1];
|
|
226
198
|
React.useEffect(function () {
|
|
227
199
|
if (dataGenerationIsLoading) {
|
|
228
200
|
// dataset is not ready
|
|
229
201
|
return function () {};
|
|
230
202
|
}
|
|
231
|
-
|
|
232
203
|
queryOptionsRef.current = queryOptions;
|
|
233
204
|
var active = true;
|
|
234
205
|
setIsLoading(true);
|
|
@@ -240,27 +211,22 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
|
|
|
240
211
|
(function () {
|
|
241
212
|
var _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
242
213
|
var _yield$loadServerRows, returnedRows, nextCursor, totalRowCount, newRep;
|
|
243
|
-
|
|
244
214
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
245
215
|
while (1) {
|
|
246
216
|
switch (_context.prev = _context.next) {
|
|
247
217
|
case 0:
|
|
248
218
|
_context.next = 2;
|
|
249
219
|
return loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
250
|
-
|
|
251
220
|
case 2:
|
|
252
221
|
_yield$loadServerRows = _context.sent;
|
|
253
222
|
returnedRows = _yield$loadServerRows.returnedRows;
|
|
254
223
|
nextCursor = _yield$loadServerRows.nextCursor;
|
|
255
224
|
totalRowCount = _yield$loadServerRows.totalRowCount;
|
|
256
|
-
|
|
257
225
|
if (active) {
|
|
258
226
|
_context.next = 8;
|
|
259
227
|
break;
|
|
260
228
|
}
|
|
261
|
-
|
|
262
229
|
return _context.abrupt("return");
|
|
263
|
-
|
|
264
230
|
case 8:
|
|
265
231
|
newRep = {
|
|
266
232
|
rows: returnedRows,
|
|
@@ -274,7 +240,6 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
|
|
|
274
240
|
return isDeepEqual(prev, newRep) ? prev : newRep;
|
|
275
241
|
});
|
|
276
242
|
setIsLoading(false);
|
|
277
|
-
|
|
278
243
|
case 11:
|
|
279
244
|
case "end":
|
|
280
245
|
return _context.stop();
|
|
@@ -282,24 +247,22 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
|
|
|
282
247
|
}
|
|
283
248
|
}, _callee);
|
|
284
249
|
}));
|
|
285
|
-
|
|
286
250
|
function fetchData() {
|
|
287
251
|
return _fetchData.apply(this, arguments);
|
|
288
252
|
}
|
|
289
|
-
|
|
290
253
|
return fetchData;
|
|
291
254
|
})()();
|
|
292
255
|
return function () {
|
|
293
256
|
active = false;
|
|
294
257
|
};
|
|
295
|
-
}, [dataGenerationIsLoading, queryOptions, rows]);
|
|
258
|
+
}, [dataGenerationIsLoading, queryOptions, rows]);
|
|
296
259
|
|
|
260
|
+
// We use queryOptions pointer to be sure that isLoading===true as soon as the options change
|
|
297
261
|
var effectShouldStart = queryOptionsRef.current !== queryOptions;
|
|
298
262
|
return _extends({
|
|
299
263
|
isLoading: isLoading || effectShouldStart
|
|
300
264
|
}, response);
|
|
301
265
|
};
|
|
302
|
-
|
|
303
266
|
return {
|
|
304
267
|
columns: columns,
|
|
305
268
|
columnsWithDefaultColDef: columnsWithDefaultColDef,
|
package/legacy/index.js
CHANGED
|
@@ -34,14 +34,13 @@ var Country = /*#__PURE__*/React.memo(function Country(props) {
|
|
|
34
34
|
export function renderCountry(params) {
|
|
35
35
|
if (params.value == null) {
|
|
36
36
|
return '';
|
|
37
|
-
}
|
|
38
|
-
// Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
|
|
39
|
-
|
|
37
|
+
}
|
|
40
38
|
|
|
39
|
+
// If the aggregated value does not have the same unit as the other cell
|
|
40
|
+
// Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
|
|
41
41
|
if (params.aggregation && !params.aggregation.hasCellUnit) {
|
|
42
42
|
return null;
|
|
43
43
|
}
|
|
44
|
-
|
|
45
44
|
return /*#__PURE__*/_jsx(Country, {
|
|
46
45
|
value: params.value
|
|
47
46
|
});
|
|
@@ -24,11 +24,10 @@ var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
|
|
|
24
24
|
}
|
|
25
25
|
}));
|
|
26
26
|
});
|
|
27
|
-
|
|
28
27
|
function EditCountry(props) {
|
|
29
28
|
var id = props.id,
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
value = props.value,
|
|
30
|
+
field = props.field;
|
|
32
31
|
var apiRef = useGridApiContext();
|
|
33
32
|
var handleChange = React.useCallback( /*#__PURE__*/function () {
|
|
34
33
|
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
|
|
@@ -42,13 +41,11 @@ function EditCountry(props) {
|
|
|
42
41
|
field: field,
|
|
43
42
|
value: newValue
|
|
44
43
|
}, event);
|
|
45
|
-
|
|
46
44
|
case 2:
|
|
47
45
|
apiRef.current.stopCellEditMode({
|
|
48
46
|
id: id,
|
|
49
47
|
field: field
|
|
50
48
|
});
|
|
51
|
-
|
|
52
49
|
case 3:
|
|
53
50
|
case "end":
|
|
54
51
|
return _context.stop();
|
|
@@ -56,7 +53,6 @@ function EditCountry(props) {
|
|
|
56
53
|
}
|
|
57
54
|
}, _callee);
|
|
58
55
|
}));
|
|
59
|
-
|
|
60
56
|
return function (_x, _x2) {
|
|
61
57
|
return _ref3.apply(this, arguments);
|
|
62
58
|
};
|
|
@@ -98,13 +94,11 @@ function EditCountry(props) {
|
|
|
98
94
|
id: params.id,
|
|
99
95
|
inputProps: _extends({}, params.inputProps, {
|
|
100
96
|
autoComplete: 'new-password' // disable autocomplete and autofill
|
|
101
|
-
|
|
102
97
|
})
|
|
103
98
|
}, params.InputProps));
|
|
104
99
|
}
|
|
105
100
|
});
|
|
106
101
|
}
|
|
107
|
-
|
|
108
102
|
export function renderEditCountry(params) {
|
|
109
103
|
return /*#__PURE__*/_jsx(EditCountry, _extends({}, params));
|
|
110
104
|
}
|