@mui/x-data-grid-generator 6.0.0-alpha.8 → 6.0.0-beta.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 +1163 -15
- package/columns/commodities.columns.js +0 -1
- package/columns/employees.columns.js +0 -1
- package/hooks/useDemoData.d.ts +2 -2
- package/hooks/useDemoData.js +9 -31
- package/hooks/useMovieData.d.ts +3 -3
- package/hooks/useMovieData.js +0 -1
- package/hooks/useQuery.d.ts +13 -13
- package/hooks/useQuery.js +13 -45
- package/index.js +4 -2
- 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 +40 -79
- package/legacy/index.js +4 -2
- 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 +13 -43
- package/modern/index.js +4 -2
- 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 +14 -58
- package/node/index.js +4 -10
- 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 +5 -5
- package/renderer/renderAvatar.js +0 -1
- package/renderer/renderCountry.js +3 -4
- package/renderer/renderEditCountry.js +0 -3
- package/renderer/renderEditCurrency.d.ts +1 -1
- package/renderer/renderEditCurrency.js +0 -3
- package/renderer/renderEditIncoterm.d.ts +1 -1
- package/renderer/renderEditIncoterm.js +0 -5
- package/renderer/renderEditProgress.d.ts +1 -1
- package/renderer/renderEditProgress.js +0 -7
- package/renderer/renderEditRating.d.ts +1 -1
- package/renderer/renderEditRating.js +0 -5
- package/renderer/renderEditStatus.d.ts +1 -1
- package/renderer/renderEditStatus.js +0 -10
- package/renderer/renderEmail.d.ts +1 -1
- package/renderer/renderEmail.js +0 -1
- package/renderer/renderIncoterm.d.ts +1 -1
- package/renderer/renderIncoterm.js +0 -2
- package/renderer/renderLink.d.ts +1 -1
- package/renderer/renderLink.js +0 -2
- package/renderer/renderPnl.d.ts +1 -1
- package/renderer/renderPnl.js +0 -3
- package/renderer/renderProgress.d.ts +1 -1
- package/renderer/renderProgress.js +4 -5
- package/renderer/renderRating.d.ts +2 -4
- package/renderer/renderRating.js +3 -4
- package/renderer/renderStatus.d.ts +1 -1
- package/renderer/renderStatus.js +8 -13
- package/renderer/renderTotalPrice.d.ts +1 -1
- package/renderer/renderTotalPrice.js +5 -6
- package/services/asyncWorker.js +2 -4
- package/services/basic-data-service.js +0 -5
- package/services/gridColDefGenerator.d.ts +2 -2
- package/services/random-generator.d.ts +1 -1
- package/services/random-generator.js +6 -20
- package/services/real-data-service.js +0 -9
- package/services/tree-data-generator.js +0 -15
|
@@ -2,7 +2,6 @@ import globalChance from 'chance';
|
|
|
2
2
|
import { COLORS, COMMODITY_OPTIONS, CONTRACT_TYPE_OPTIONS, COUNTRY_ISO_OPTIONS, CURRENCY_OPTIONS, INCOTERM_OPTIONS, RATE_TYPE_OPTIONS, STATUS_OPTIONS, TAXCODE_OPTIONS } from './static-data';
|
|
3
3
|
var chanceId = globalChance();
|
|
4
4
|
var chance;
|
|
5
|
-
|
|
6
5
|
if (typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM) {
|
|
7
6
|
chance = globalChance(function () {
|
|
8
7
|
return 0.5;
|
|
@@ -10,82 +9,69 @@ if (typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM) {
|
|
|
10
9
|
} else {
|
|
11
10
|
chance = chanceId;
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
/**
|
|
15
13
|
* Wrap a data generator that returns a string and add a prefix if the value generated has already been given
|
|
16
14
|
*/
|
|
17
15
|
var uniquenessHandler = function uniquenessHandler(generator) {
|
|
18
16
|
return function (data, context) {
|
|
19
17
|
var _context$values$rawVa;
|
|
20
|
-
|
|
21
18
|
var rawValue = generator(data, context);
|
|
22
|
-
|
|
23
19
|
if (!context.values) {
|
|
24
20
|
return rawValue;
|
|
25
21
|
}
|
|
26
|
-
|
|
27
22
|
var valueCount = ((_context$values$rawVa = context.values[rawValue]) != null ? _context$values$rawVa : 0) + 1;
|
|
28
23
|
context.values[rawValue] = valueCount + 1;
|
|
29
|
-
|
|
30
24
|
if (valueCount > 1) {
|
|
31
25
|
return "".concat(rawValue, " ").concat(valueCount);
|
|
32
26
|
}
|
|
33
|
-
|
|
34
27
|
return rawValue;
|
|
35
28
|
};
|
|
36
29
|
};
|
|
37
|
-
|
|
38
30
|
function dateFuture(years, refDate) {
|
|
39
31
|
var date = new Date();
|
|
40
|
-
|
|
41
32
|
if (typeof refDate !== 'undefined') {
|
|
42
33
|
date = new Date(Date.parse(refDate));
|
|
43
34
|
}
|
|
44
|
-
|
|
45
35
|
var range = {
|
|
46
36
|
min: 1000,
|
|
47
37
|
max: (years || 1) * 365 * 24 * 3600 * 1000
|
|
48
|
-
};
|
|
38
|
+
};
|
|
49
39
|
|
|
40
|
+
// some time from now to N years later, in milliseconds
|
|
50
41
|
var past = date.getTime() + chance.integer(range);
|
|
51
42
|
date.setTime(past);
|
|
52
43
|
return date;
|
|
53
44
|
}
|
|
54
|
-
|
|
55
45
|
function dateRecent(days, refDate) {
|
|
56
46
|
var date = new Date();
|
|
57
|
-
|
|
58
47
|
if (typeof refDate !== 'undefined') {
|
|
59
48
|
date = new Date(Date.parse(refDate));
|
|
60
49
|
}
|
|
61
|
-
|
|
62
50
|
var range = {
|
|
63
51
|
min: 1000,
|
|
64
52
|
max: (days || 1) * 24 * 3600 * 1000
|
|
65
|
-
};
|
|
53
|
+
};
|
|
66
54
|
|
|
55
|
+
// some time from now to N days ago, in milliseconds
|
|
67
56
|
var past = date.getTime() - chance.integer(range);
|
|
68
57
|
date.setTime(past);
|
|
69
58
|
return date;
|
|
70
59
|
}
|
|
71
|
-
|
|
72
60
|
function datePast(years, refDate) {
|
|
73
61
|
var date = new Date();
|
|
74
|
-
|
|
75
62
|
if (typeof refDate !== 'undefined') {
|
|
76
63
|
date = new Date(Date.parse(refDate));
|
|
77
64
|
}
|
|
78
|
-
|
|
79
65
|
var range = {
|
|
80
66
|
min: 1000,
|
|
81
67
|
max: (years || 1) * 365 * 24 * 3600 * 1000
|
|
82
|
-
};
|
|
68
|
+
};
|
|
83
69
|
|
|
70
|
+
// some time from now to N years ago, in milliseconds
|
|
84
71
|
var past = date.getTime() - chance.integer(range);
|
|
85
72
|
date.setTime(past);
|
|
86
73
|
return date;
|
|
87
74
|
}
|
|
88
|
-
|
|
89
75
|
export var random = function random(min, max) {
|
|
90
76
|
return chance.floating({
|
|
91
77
|
min: min,
|
|
@@ -6,35 +6,26 @@ export function getRealGridData(rowLength, columns) {
|
|
|
6
6
|
};
|
|
7
7
|
var rows = [];
|
|
8
8
|
var indexedValues = {};
|
|
9
|
-
|
|
10
9
|
function work() {
|
|
11
10
|
var row = {};
|
|
12
|
-
|
|
13
11
|
for (var j = 0; j < columns.length; j += 1) {
|
|
14
12
|
var column = columns[j];
|
|
15
|
-
|
|
16
13
|
if (column.generateData) {
|
|
17
14
|
var context = {};
|
|
18
|
-
|
|
19
15
|
if (column.dataGeneratorUniquenessEnabled) {
|
|
20
16
|
var fieldValues = indexedValues[column.field];
|
|
21
|
-
|
|
22
17
|
if (!fieldValues) {
|
|
23
18
|
fieldValues = {};
|
|
24
19
|
indexedValues[column.field] = fieldValues;
|
|
25
20
|
}
|
|
26
|
-
|
|
27
21
|
context.values = fieldValues;
|
|
28
22
|
}
|
|
29
|
-
|
|
30
23
|
row[column.field] = column.generateData(row, context);
|
|
31
24
|
}
|
|
32
25
|
}
|
|
33
|
-
|
|
34
26
|
rows.push(row);
|
|
35
27
|
tasks.current -= 1;
|
|
36
28
|
}
|
|
37
|
-
|
|
38
29
|
var columnVisibilityModel = {};
|
|
39
30
|
columns.forEach(function (col) {
|
|
40
31
|
if (col.hide) {
|
|
@@ -3,81 +3,65 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
import { randomArrayItem } from './random-generator';
|
|
4
4
|
export var addTreeDataOptionsToDemoData = function addTreeDataOptionsToDemoData(data) {
|
|
5
5
|
var _groupingCol$headerNa;
|
|
6
|
-
|
|
7
6
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
8
7
|
var _options$averageChild = options.averageChildren,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
averageChildren = _options$averageChild === void 0 ? 2 : _options$averageChild,
|
|
9
|
+
_options$maxDepth = options.maxDepth,
|
|
10
|
+
maxDepth = _options$maxDepth === void 0 ? 1 : _options$maxDepth,
|
|
11
|
+
groupingField = options.groupingField;
|
|
13
12
|
var hasTreeData = maxDepth > 1 && groupingField != null;
|
|
14
|
-
|
|
15
13
|
if (!hasTreeData) {
|
|
16
14
|
return data;
|
|
17
15
|
}
|
|
18
|
-
|
|
19
16
|
if (data.rows.length > 1000) {
|
|
20
17
|
throw new Error('MUI: useDemoData tree data mode only works up to 1000 rows.');
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
var rowsByTreeDepth = {};
|
|
24
20
|
var rowsCount = data.rows.length;
|
|
25
21
|
var groupingCol = data.columns.find(function (col) {
|
|
26
22
|
return col.field === options.groupingField;
|
|
27
23
|
});
|
|
28
|
-
|
|
29
24
|
if (!groupingCol) {
|
|
30
25
|
throw new Error('MUI: The tree data grouping field does not exist');
|
|
31
26
|
}
|
|
32
|
-
|
|
33
27
|
data.initialState.columns.columnVisibilityModel[groupingField] = false;
|
|
34
|
-
|
|
35
28
|
for (var i = 0; i < rowsCount; i += 1) {
|
|
36
29
|
var row = data.rows[i];
|
|
37
30
|
var currentChunk = Math.floor(i * (Math.pow(averageChildren, maxDepth) - 1) / rowsCount) + 1;
|
|
38
31
|
var currentDepth = Math.floor(Math.log(currentChunk) / Math.log(averageChildren));
|
|
39
|
-
|
|
40
32
|
if (!rowsByTreeDepth[currentDepth]) {
|
|
41
33
|
rowsByTreeDepth[currentDepth] = {
|
|
42
34
|
rows: {},
|
|
43
35
|
rowIndexes: []
|
|
44
36
|
};
|
|
45
37
|
}
|
|
46
|
-
|
|
47
38
|
rowsByTreeDepth[currentDepth].rows[i] = {
|
|
48
39
|
value: row,
|
|
49
40
|
parentIndex: null
|
|
50
41
|
};
|
|
51
42
|
rowsByTreeDepth[currentDepth].rowIndexes.push(i);
|
|
52
43
|
}
|
|
53
|
-
|
|
54
44
|
Object.entries(rowsByTreeDepth).forEach(function (_ref) {
|
|
55
45
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
depthStr = _ref2[0],
|
|
47
|
+
rows = _ref2[1].rows;
|
|
59
48
|
var depth = Number(depthStr);
|
|
60
49
|
Object.values(rows).forEach(function (row) {
|
|
61
50
|
var path = [];
|
|
62
51
|
var previousRow = null;
|
|
63
|
-
|
|
64
52
|
for (var k = depth; k >= 0; k -= 1) {
|
|
65
53
|
var rowTemp = void 0;
|
|
66
|
-
|
|
67
54
|
if (k === depth) {
|
|
68
55
|
if (depth > 0) {
|
|
69
56
|
row.parentIndex = Number(randomArrayItem(rowsByTreeDepth[depth - 1].rowIndexes));
|
|
70
57
|
}
|
|
71
|
-
|
|
72
58
|
rowTemp = row;
|
|
73
59
|
} else {
|
|
74
60
|
rowTemp = rowsByTreeDepth[k].rows[previousRow.parentIndex];
|
|
75
61
|
}
|
|
76
|
-
|
|
77
62
|
path.unshift(rowTemp.value[groupingField]);
|
|
78
63
|
previousRow = rowTemp;
|
|
79
64
|
}
|
|
80
|
-
|
|
81
65
|
row.value.path = path;
|
|
82
66
|
});
|
|
83
67
|
});
|
|
@@ -9,7 +9,6 @@ import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
|
|
|
9
9
|
const dataCache = new LRUCache({
|
|
10
10
|
max: 10,
|
|
11
11
|
ttl: 60 * 5 * 1e3 // 5 minutes
|
|
12
|
-
|
|
13
12
|
});
|
|
14
13
|
|
|
15
14
|
// Generate fake data from a seed.
|
|
@@ -21,25 +20,20 @@ async function extrapolateSeed(rowLength, data) {
|
|
|
21
20
|
const tasks = {
|
|
22
21
|
current: rowLength - seed.length
|
|
23
22
|
};
|
|
24
|
-
|
|
25
23
|
function work() {
|
|
26
24
|
const row = {};
|
|
27
|
-
|
|
28
25
|
for (let j = 0; j < data.columns.length; j += 1) {
|
|
29
26
|
const column = data.columns[j];
|
|
30
27
|
const index = Math.round(Math.random() * (seed.length - 1));
|
|
31
|
-
|
|
32
28
|
if (column.field === 'id') {
|
|
33
29
|
row.id = `id-${tasks.current + seed.length}`;
|
|
34
30
|
} else {
|
|
35
31
|
row[column.field] = seed[index][column.field];
|
|
36
32
|
}
|
|
37
33
|
}
|
|
38
|
-
|
|
39
34
|
rows.push(row);
|
|
40
35
|
tasks.current -= 1;
|
|
41
36
|
}
|
|
42
|
-
|
|
43
37
|
asyncWorker({
|
|
44
38
|
work,
|
|
45
39
|
done: () => resolve(_extends({}, data, {
|
|
@@ -49,36 +43,31 @@ async function extrapolateSeed(rowLength, data) {
|
|
|
49
43
|
});
|
|
50
44
|
});
|
|
51
45
|
}
|
|
52
|
-
|
|
53
46
|
const deepFreeze = object => {
|
|
54
47
|
// Retrieve the property names defined on object
|
|
55
|
-
const propNames = Object.getOwnPropertyNames(object);
|
|
56
|
-
|
|
48
|
+
const propNames = Object.getOwnPropertyNames(object);
|
|
49
|
+
|
|
50
|
+
// Freeze properties before freezing self
|
|
57
51
|
|
|
52
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
58
53
|
for (const name of propNames) {
|
|
59
54
|
const value = object[name];
|
|
60
|
-
|
|
61
55
|
if (value && typeof value === 'object') {
|
|
62
56
|
deepFreeze(value);
|
|
63
57
|
}
|
|
64
58
|
}
|
|
65
|
-
|
|
66
59
|
return Object.freeze(object);
|
|
67
60
|
};
|
|
68
|
-
|
|
69
61
|
export const getColumnsFromOptions = options => {
|
|
70
62
|
let columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
|
|
71
|
-
|
|
72
63
|
if (options.visibleFields) {
|
|
73
64
|
columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
|
|
74
65
|
hide: true
|
|
75
66
|
}));
|
|
76
67
|
}
|
|
77
|
-
|
|
78
68
|
if (options.maxColumns) {
|
|
79
69
|
columns = columns.slice(0, options.maxColumns);
|
|
80
70
|
}
|
|
81
|
-
|
|
82
71
|
return columns;
|
|
83
72
|
};
|
|
84
73
|
export const getInitialState = (options, columns) => {
|
|
@@ -89,11 +78,9 @@ export const getInitialState = (options, columns) => {
|
|
|
89
78
|
}
|
|
90
79
|
});
|
|
91
80
|
const groupingField = options.treeData?.groupingField;
|
|
92
|
-
|
|
93
81
|
if (groupingField) {
|
|
94
82
|
columnVisibilityModel[groupingField] = false;
|
|
95
83
|
}
|
|
96
|
-
|
|
97
84
|
return {
|
|
98
85
|
columns: {
|
|
99
86
|
columnVisibilityModel
|
|
@@ -120,48 +107,43 @@ export const useDemoData = options => {
|
|
|
120
107
|
}, options.treeData);
|
|
121
108
|
});
|
|
122
109
|
React.useEffect(() => {
|
|
123
|
-
const cacheKey = `${options.dataSet}-${rowLength}-${index}-${options.maxColumns}`;
|
|
124
|
-
// of the demos.
|
|
110
|
+
const cacheKey = `${options.dataSet}-${rowLength}-${index}-${options.maxColumns}`;
|
|
125
111
|
|
|
112
|
+
// Cache to allow fast switch between the JavaScript and TypeScript version
|
|
113
|
+
// of the demos.
|
|
126
114
|
if (dataCache.has(cacheKey)) {
|
|
127
115
|
const newData = dataCache.get(cacheKey);
|
|
128
116
|
setData(newData);
|
|
129
117
|
setLoading(false);
|
|
130
118
|
return undefined;
|
|
131
119
|
}
|
|
132
|
-
|
|
133
120
|
let active = true;
|
|
134
|
-
|
|
135
121
|
(async () => {
|
|
136
122
|
setLoading(true);
|
|
137
123
|
let newData;
|
|
138
|
-
|
|
139
124
|
if (rowLength > 1000) {
|
|
140
125
|
newData = await getRealGridData(1000, columns);
|
|
141
126
|
newData = await extrapolateSeed(rowLength, newData);
|
|
142
127
|
} else {
|
|
143
128
|
newData = await getRealGridData(rowLength, columns);
|
|
144
129
|
}
|
|
145
|
-
|
|
146
130
|
if (!active) {
|
|
147
131
|
return;
|
|
148
132
|
}
|
|
149
|
-
|
|
150
133
|
newData = addTreeDataOptionsToDemoData(newData, {
|
|
151
134
|
maxDepth: options.treeData?.maxDepth,
|
|
152
135
|
groupingField: options.treeData?.groupingField,
|
|
153
136
|
averageChildren: options.treeData?.averageChildren
|
|
154
|
-
});
|
|
137
|
+
});
|
|
155
138
|
|
|
139
|
+
// It's quite slow. No need for it in production.
|
|
156
140
|
if (process.env.NODE_ENV !== 'production') {
|
|
157
141
|
deepFreeze(newData);
|
|
158
142
|
}
|
|
159
|
-
|
|
160
143
|
dataCache.set(cacheKey, newData);
|
|
161
144
|
setData(newData);
|
|
162
145
|
setLoading(false);
|
|
163
146
|
})();
|
|
164
|
-
|
|
165
147
|
return () => {
|
|
166
148
|
active = false;
|
|
167
149
|
};
|
package/modern/hooks/useQuery.js
CHANGED
|
@@ -1,27 +1,23 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { getGridDefaultColumnTypes,
|
|
3
|
+
import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-pro';
|
|
4
4
|
import { isDeepEqual } from '@mui/x-data-grid/internals';
|
|
5
5
|
import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
|
|
6
|
-
|
|
7
6
|
const simplifiedValueGetter = (field, colDef) => row => {
|
|
8
7
|
const params = {
|
|
9
8
|
id: row.id,
|
|
10
9
|
row,
|
|
11
10
|
field,
|
|
12
11
|
rowNode: {}
|
|
13
|
-
};
|
|
14
|
-
|
|
12
|
+
};
|
|
13
|
+
// @ts-ignore
|
|
15
14
|
return colDef.valueGetter?.(params) || row[field];
|
|
16
15
|
};
|
|
17
|
-
|
|
18
16
|
const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
|
|
19
17
|
if (!sortModel) {
|
|
20
18
|
const comparator = () => 0;
|
|
21
|
-
|
|
22
19
|
return comparator;
|
|
23
20
|
}
|
|
24
|
-
|
|
25
21
|
const sortOperators = sortModel.map(sortItem => {
|
|
26
22
|
const columnField = sortItem.field;
|
|
27
23
|
const colDef = columnsWithDefaultColDef.find(({
|
|
@@ -32,7 +28,6 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
|
|
|
32
28
|
sortComparator: colDef.sortComparator
|
|
33
29
|
});
|
|
34
30
|
});
|
|
35
|
-
|
|
36
31
|
const comparator = (row1, row2) => sortOperators.reduce((acc, {
|
|
37
32
|
valueGetter,
|
|
38
33
|
sort,
|
|
@@ -41,50 +36,39 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
|
|
|
41
36
|
if (acc !== 0) {
|
|
42
37
|
return acc;
|
|
43
38
|
}
|
|
44
|
-
|
|
45
39
|
const v1 = valueGetter(row1);
|
|
46
40
|
const v2 = valueGetter(row2);
|
|
47
41
|
return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
|
|
48
42
|
}, 0);
|
|
49
|
-
|
|
50
43
|
return comparator;
|
|
51
44
|
};
|
|
52
|
-
|
|
53
45
|
const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
54
46
|
if (filterModel === undefined || filterModel.items.length === 0) {
|
|
55
47
|
return rows;
|
|
56
48
|
}
|
|
57
|
-
|
|
58
49
|
const valueGetters = filterModel.items.map(({
|
|
59
|
-
columnField
|
|
60
|
-
}) => simplifiedValueGetter(columnField, columnsWithDefaultColDef.find(({
|
|
61
50
|
field
|
|
62
|
-
}) => field ===
|
|
51
|
+
}) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
|
|
63
52
|
const filterFunctions = filterModel.items.map(filterItem => {
|
|
64
53
|
const {
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
field,
|
|
55
|
+
operator
|
|
67
56
|
} = filterItem;
|
|
68
|
-
const colDef = columnsWithDefaultColDef.find(
|
|
69
|
-
field
|
|
70
|
-
}) => field === columnField);
|
|
57
|
+
const colDef = columnsWithDefaultColDef.find(column => column.field === field);
|
|
71
58
|
const filterOperator = colDef.filterOperators.find(({
|
|
72
59
|
value
|
|
73
|
-
}) =>
|
|
60
|
+
}) => operator === value);
|
|
74
61
|
let parsedValue = filterItem.value;
|
|
75
|
-
|
|
76
62
|
if (colDef.valueParser) {
|
|
77
63
|
const parser = colDef.valueParser;
|
|
78
64
|
parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x)) : parser(filterItem.value);
|
|
79
65
|
}
|
|
80
|
-
|
|
81
66
|
return filterOperator?.getApplyFilterFn({
|
|
82
67
|
filterItem,
|
|
83
68
|
value: parsedValue
|
|
84
69
|
}, colDef);
|
|
85
70
|
});
|
|
86
|
-
|
|
87
|
-
if (filterModel.linkOperator === GridLinkOperator.Or) {
|
|
71
|
+
if (filterModel.logicOperator === GridLogicOperator.Or) {
|
|
88
72
|
return rows.filter(row => filterModel.items.some((_, index) => {
|
|
89
73
|
const value = valueGetters[index](row);
|
|
90
74
|
return filterFunctions[index] === null ? true : filterFunctions[index]({
|
|
@@ -92,7 +76,6 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
92
76
|
});
|
|
93
77
|
}));
|
|
94
78
|
}
|
|
95
|
-
|
|
96
79
|
return rows.filter(row => filterModel.items.every((_, index) => {
|
|
97
80
|
const value = valueGetters[index](row);
|
|
98
81
|
return filterFunctions[index] === null ? true : filterFunctions[index]({
|
|
@@ -100,22 +83,19 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
|
|
|
100
83
|
});
|
|
101
84
|
}));
|
|
102
85
|
};
|
|
86
|
+
|
|
103
87
|
/**
|
|
104
88
|
* Simulates server data loading
|
|
105
89
|
*/
|
|
106
|
-
|
|
107
|
-
|
|
108
90
|
export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
|
|
109
91
|
const {
|
|
110
92
|
minDelay = 100,
|
|
111
93
|
maxDelay = 300,
|
|
112
94
|
useCursorPagination
|
|
113
95
|
} = serverOptions;
|
|
114
|
-
|
|
115
96
|
if (maxDelay < minDelay) {
|
|
116
97
|
throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
|
|
117
98
|
}
|
|
118
|
-
|
|
119
99
|
const delay = Math.random() * (maxDelay - minDelay) + minDelay;
|
|
120
100
|
const {
|
|
121
101
|
cursor,
|
|
@@ -129,7 +109,6 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
129
109
|
const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
|
|
130
110
|
filteredRows = [...filteredRows].sort(rowComparator);
|
|
131
111
|
const totalRowCount = filteredRows.length;
|
|
132
|
-
|
|
133
112
|
if (!pageSize) {
|
|
134
113
|
firstRowIndex = 0;
|
|
135
114
|
lastRowIndex = filteredRows.length;
|
|
@@ -138,14 +117,12 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
138
117
|
id
|
|
139
118
|
}) => id === cursor) : 0;
|
|
140
119
|
firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
|
|
141
|
-
|
|
142
120
|
lastRowIndex = firstRowIndex + pageSize;
|
|
143
121
|
nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
|
|
144
122
|
} else {
|
|
145
123
|
firstRowIndex = page * pageSize;
|
|
146
124
|
lastRowIndex = (page + 1) * pageSize;
|
|
147
125
|
}
|
|
148
|
-
|
|
149
126
|
const response = {
|
|
150
127
|
returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
|
|
151
128
|
nextCursor,
|
|
@@ -157,6 +134,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
|
|
|
157
134
|
}, delay); // simulate network latency
|
|
158
135
|
});
|
|
159
136
|
};
|
|
137
|
+
|
|
160
138
|
const DEFAULT_DATASET_OPTIONS = {
|
|
161
139
|
dataSet: 'Commodity',
|
|
162
140
|
rowLength: 100,
|
|
@@ -170,14 +148,11 @@ const DEFAULT_SERVER_OPTIONS = {
|
|
|
170
148
|
};
|
|
171
149
|
export const createFakeServer = (dataSetOptions, serverOptions) => {
|
|
172
150
|
const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
|
|
173
|
-
|
|
174
151
|
const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
|
|
175
|
-
|
|
176
152
|
const columns = getColumnsFromOptions(dataSetOptionsWithDefault);
|
|
177
153
|
const initialState = getInitialState(dataSetOptionsWithDefault, columns);
|
|
178
154
|
const defaultColDef = getGridDefaultColumnTypes();
|
|
179
155
|
const columnsWithDefaultColDef = columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column));
|
|
180
|
-
|
|
181
156
|
const useQuery = queryOptions => {
|
|
182
157
|
const {
|
|
183
158
|
data: {
|
|
@@ -196,25 +171,21 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
|
|
|
196
171
|
// dataset is not ready
|
|
197
172
|
return () => {};
|
|
198
173
|
}
|
|
199
|
-
|
|
200
174
|
queryOptionsRef.current = queryOptions;
|
|
201
175
|
let active = true;
|
|
202
176
|
setIsLoading(true);
|
|
203
177
|
setResponse(prev => Object.keys(prev.pageInfo).length === 0 ? prev : _extends({}, prev, {
|
|
204
178
|
pageInfo: {}
|
|
205
179
|
}));
|
|
206
|
-
|
|
207
180
|
(async function fetchData() {
|
|
208
181
|
const {
|
|
209
182
|
returnedRows,
|
|
210
183
|
nextCursor,
|
|
211
184
|
totalRowCount
|
|
212
185
|
} = await loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
|
|
213
|
-
|
|
214
186
|
if (!active) {
|
|
215
187
|
return;
|
|
216
188
|
}
|
|
217
|
-
|
|
218
189
|
const newRep = {
|
|
219
190
|
rows: returnedRows,
|
|
220
191
|
pageInfo: {
|
|
@@ -226,18 +197,17 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
|
|
|
226
197
|
setResponse(prev => isDeepEqual(prev, newRep) ? prev : newRep);
|
|
227
198
|
setIsLoading(false);
|
|
228
199
|
})();
|
|
229
|
-
|
|
230
200
|
return () => {
|
|
231
201
|
active = false;
|
|
232
202
|
};
|
|
233
|
-
}, [dataGenerationIsLoading, queryOptions, rows]);
|
|
203
|
+
}, [dataGenerationIsLoading, queryOptions, rows]);
|
|
234
204
|
|
|
205
|
+
// We use queryOptions pointer to be sure that isLoading===true as soon as the options change
|
|
235
206
|
const effectShouldStart = queryOptionsRef.current !== queryOptions;
|
|
236
207
|
return _extends({
|
|
237
208
|
isLoading: isLoading || effectShouldStart
|
|
238
209
|
}, response);
|
|
239
210
|
};
|
|
240
|
-
|
|
241
211
|
return {
|
|
242
212
|
columns,
|
|
243
213
|
columnsWithDefaultColDef,
|
package/modern/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* @mui/x-data-grid-generator v6.0.0-beta.0
|
|
2
3
|
*
|
|
3
|
-
*
|
|
4
|
+
* @license MUI X Commercial
|
|
5
|
+
* This source code is licensed under the commercial license found in the
|
|
4
6
|
* LICENSE file in the root directory of this source tree.
|
|
5
7
|
*/
|
|
6
8
|
export * from './renderer';
|
|
@@ -36,14 +36,13 @@ const Country = /*#__PURE__*/React.memo(function Country(props) {
|
|
|
36
36
|
export function renderCountry(params) {
|
|
37
37
|
if (params.value == null) {
|
|
38
38
|
return '';
|
|
39
|
-
}
|
|
40
|
-
// Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
|
|
41
|
-
|
|
39
|
+
}
|
|
42
40
|
|
|
41
|
+
// If the aggregated value does not have the same unit as the other cell
|
|
42
|
+
// Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
|
|
43
43
|
if (params.aggregation && !params.aggregation.hasCellUnit) {
|
|
44
44
|
return null;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
46
|
return /*#__PURE__*/_jsx(Country, {
|
|
48
47
|
value: params.value
|
|
49
48
|
});
|
|
@@ -21,7 +21,6 @@ const StyledAutocomplete = styled(Autocomplete)(({
|
|
|
21
21
|
}
|
|
22
22
|
})
|
|
23
23
|
}));
|
|
24
|
-
|
|
25
24
|
function EditCountry(props) {
|
|
26
25
|
const {
|
|
27
26
|
id,
|
|
@@ -72,12 +71,10 @@ function EditCountry(props) {
|
|
|
72
71
|
id: params.id,
|
|
73
72
|
inputProps: _extends({}, params.inputProps, {
|
|
74
73
|
autoComplete: 'new-password' // disable autocomplete and autofill
|
|
75
|
-
|
|
76
74
|
})
|
|
77
75
|
}, params.InputProps))
|
|
78
76
|
});
|
|
79
77
|
}
|
|
80
|
-
|
|
81
78
|
export function renderEditCountry(params) {
|
|
82
79
|
return /*#__PURE__*/_jsx(EditCountry, _extends({}, params));
|
|
83
80
|
}
|
|
@@ -21,7 +21,6 @@ const StyledAutocomplete = styled(Autocomplete)(({
|
|
|
21
21
|
}
|
|
22
22
|
})
|
|
23
23
|
}));
|
|
24
|
-
|
|
25
24
|
function EditCurrency(props) {
|
|
26
25
|
const {
|
|
27
26
|
id,
|
|
@@ -71,12 +70,10 @@ function EditCurrency(props) {
|
|
|
71
70
|
id: params.id,
|
|
72
71
|
inputProps: _extends({}, params.inputProps, {
|
|
73
72
|
autoComplete: 'new-password' // disable autocomplete and autofill
|
|
74
|
-
|
|
75
73
|
})
|
|
76
74
|
}, params.InputProps))
|
|
77
75
|
});
|
|
78
76
|
}
|
|
79
|
-
|
|
80
77
|
export function renderEditCurrency(params) {
|
|
81
78
|
return /*#__PURE__*/_jsx(EditCurrency, _extends({}, params));
|
|
82
79
|
}
|