@mui/x-data-grid-generator 6.0.0-alpha.0 → 6.0.0-alpha.10

package/hooks/useQuery.js

@@ -3,27 +3,22 @@ import * as React from 'react';
 import { getGridDefaultColumnTypes, GridLinkOperator } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
-
 const simplifiedValueGetter = (field, colDef) => row => {
   var _colDef$valueGetter;
-
   const params = {
     id: row.id,
     row,
     field,
     rowNode: {}
-  }; // @ts-ignore
-
+  };
+  // @ts-ignore
   return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, params)) || row[field];
 };
-
 const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
   if (!sortModel) {
     const comparator = () => 0;
-
     return comparator;
   }
-
   const sortOperators = sortModel.map(sortItem => {
     const columnField = sortItem.field;
     const colDef = columnsWithDefaultColDef.find(({
@@ -34,7 +29,6 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
       sortComparator: colDef.sortComparator
     });
   });
-
   const comparator = (row1, row2) => sortOperators.reduce((acc, {
     valueGetter,
     sort,
@@ -43,51 +37,39 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
     if (acc !== 0) {
       return acc;
     }
-
     const v1 = valueGetter(row1);
     const v2 = valueGetter(row2);
     return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
   }, 0);
-
   return comparator;
 };
-
 const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
   if (filterModel === undefined || filterModel.items.length === 0) {
     return rows;
   }
-
   const valueGetters = filterModel.items.map(({
-    columnField
-  }) => simplifiedValueGetter(columnField, columnsWithDefaultColDef.find(({
     field
-  }) => field === columnField)));
+  }) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
   const filterFunctions = filterModel.items.map(filterItem => {
     const {
-      columnField,
-      operatorValue
+      field,
+      operator
     } = filterItem;
-    const colDef = columnsWithDefaultColDef.find(({
-      field
-    }) => field === columnField);
+    const colDef = columnsWithDefaultColDef.find(column => column.field === field);
     const filterOperator = colDef.filterOperators.find(({
       value
-    }) => operatorValue === value);
+    }) => operator === value);
     let parsedValue = filterItem.value;
-
     if (colDef.valueParser) {
       var _filterItem$value;
-
       const parser = colDef.valueParser;
       parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
     }
-
     return filterOperator == null ? void 0 : filterOperator.getApplyFilterFn({
       filterItem,
       value: parsedValue
     }, colDef);
   });
-
   if (filterModel.linkOperator === GridLinkOperator.Or) {
     return rows.filter(row => filterModel.items.some((_, index) => {
       const value = valueGetters[index](row);
@@ -96,7 +78,6 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
       });
     }));
   }
-
   return rows.filter(row => filterModel.items.every((_, index) => {
     const value = valueGetters[index](row);
     return filterFunctions[index] === null ? true : filterFunctions[index]({
@@ -104,22 +85,19 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
     });
   }));
 };
+
 /**
  * Simulates server data loading
  */
-
-
 export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
   const {
     minDelay = 100,
     maxDelay = 300,
     useCursorPagination
   } = serverOptions;
-
   if (maxDelay < minDelay) {
     throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
   }
-
   const delay = Math.random() * (maxDelay - minDelay) + minDelay;
   const {
     cursor,
@@ -133,7 +111,6 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
   const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
   filteredRows = [...filteredRows].sort(rowComparator);
   const totalRowCount = filteredRows.length;
-
   if (!pageSize) {
     firstRowIndex = 0;
     lastRowIndex = filteredRows.length;
@@ -142,14 +119,12 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
       id
     }) => id === cursor) : 0;
     firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
-
     lastRowIndex = firstRowIndex + pageSize;
     nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
   } else {
     firstRowIndex = page * pageSize;
     lastRowIndex = (page + 1) * pageSize;
   }
-
   const response = {
     returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
     nextCursor,
@@ -161,6 +136,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
     }, delay); // simulate network latency
   });
 };
+
 const DEFAULT_DATASET_OPTIONS = {
   dataSet: 'Commodity',
   rowLength: 100,
@@ -174,14 +150,11 @@ const DEFAULT_SERVER_OPTIONS = {
 };
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
-
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
-
   const columns = getColumnsFromOptions(dataSetOptionsWithDefault);
   const initialState = getInitialState(dataSetOptionsWithDefault, columns);
   const defaultColDef = getGridDefaultColumnTypes();
   const columnsWithDefaultColDef = columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column));
-
   const useQuery = queryOptions => {
     const {
       data: {
@@ -200,25 +173,21 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
         // dataset is not ready
         return () => {};
       }
-
       queryOptionsRef.current = queryOptions;
       let active = true;
       setIsLoading(true);
       setResponse(prev => Object.keys(prev.pageInfo).length === 0 ? prev : _extends({}, prev, {
         pageInfo: {}
       }));
-
       (async function fetchData() {
         const {
           returnedRows,
           nextCursor,
           totalRowCount
         } = await loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
-
         if (!active) {
           return;
         }
-
         const newRep = {
           rows: returnedRows,
           pageInfo: {
@@ -230,18 +199,17 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
         setResponse(prev => isDeepEqual(prev, newRep) ? prev : newRep);
         setIsLoading(false);
       })();
-
       return () => {
         active = false;
       };
-    }, [dataGenerationIsLoading, queryOptions, rows]); // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
+    }, [dataGenerationIsLoading, queryOptions, rows]);
 
+    // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
     const effectShouldStart = queryOptionsRef.current !== queryOptions;
     return _extends({
       isLoading: isLoading || effectShouldStart
     }, response);
   };
-
   return {
     columns,
     columnsWithDefaultColDef,

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.10
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/columns/commodities.columns.js

@@ -92,9 +92,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'subTotal',
     headerName: 'Sub Total',
     valueGetter: function valueGetter(_ref) {
-      var row = _ref.row,
-          rowNode = _ref.rowNode;
-      return rowNode.isAutoGenerated ? null : row.quantity * row.unitPrice;
+      var row = _ref.row;
+      return row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice;
     },
     type: 'number',
     width: 120
@@ -112,9 +111,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'feeAmount',
     headerName: 'Fee Amount',
     valueGetter: function valueGetter(_ref2) {
-      var row = _ref2.row,
-          rowNode = _ref2.rowNode;
-      return rowNode.isAutoGenerated ? null : row.feeRate * row.quantity * row.unitPrice;
+      var row = _ref2.row;
+      return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice;
     },
     type: 'number',
     width: 120
@@ -130,9 +128,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'totalPrice',
     headerName: 'Total in USD',
     valueGetter: function valueGetter(_ref3) {
-      var row = _ref3.row,
-          rowNode = _ref3.rowNode;
-      return rowNode.isAutoGenerated ? null : row.feeRate + row.quantity * row.unitPrice;
+      var row = _ref3.row;
+      return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice;
     },
     renderCell: renderTotalPrice,
     type: 'number',
@@ -187,7 +184,6 @@ export var getCommodityColumns = function getCommodityColumns() {
           return country.value === value;
         });
       }
-
       return value;
     },
     valueFormatter: function valueFormatter(_ref4) {

package/legacy/columns/employees.columns.js

@@ -13,7 +13,7 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     generateData: randomColor,
     renderCell: renderAvatar,
     valueGetter: function valueGetter(params) {
-      return params.rowNode.isAutoGenerated ? null : {
+      return params.row.name == null || params.row.avatar == null ? null : {
         name: params.row.name,
         color: params.row.avatar
       };
@@ -134,11 +134,9 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     type: 'number',
     valueFormatter: function valueFormatter(_ref2) {
       var value = _ref2.value;
-
       if (!value || typeof value !== 'number') {
         return value;
       }
-
       return "".concat(value.toLocaleString(), "$");
     }
   }];

package/legacy/hooks/useBasicDemoData.js

@@ -3,13 +3,12 @@ import * as React from 'react';
 import { getBasicGridData } from '../services';
 export var useBasicDemoData = function useBasicDemoData(nbRows, nbCols) {
   var _React$useState = React.useState({
-    rows: [],
-    columns: []
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      data = _React$useState2[0],
-      setData = _React$useState2[1];
-
+      rows: [],
+      columns: []
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    data = _React$useState2[0],
+    setData = _React$useState2[1];
   React.useEffect(function () {
     var newData = getBasicGridData(nbRows, nbCols);
     setData(newData);

package/legacy/hooks/useDemoData.js

@@ -3,13 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
 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; } } }; }
-
 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); }
-
 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; }
-
 import * as React from 'react';
 import LRUCache from 'lru-cache';
 import { getRealGridData } from '../services/real-data-service';
@@ -20,15 +16,12 @@ import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
 var dataCache = new LRUCache({
   max: 10,
   ttl: 60 * 5 * 1e3 // 5 minutes
-
 });
-
 // Generate fake data from a seed.
 // It's about x20 faster than getRealData.
 function extrapolateSeed(_x, _x2) {
   return _extrapolateSeed.apply(this, arguments);
 }
-
 function _extrapolateSeed() {
   _extrapolateSeed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(rowLength, data) {
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -41,25 +34,20 @@ function _extrapolateSeed() {
               var tasks = {
                 current: rowLength - seed.length
               };
-
               function work() {
                 var row = {};
-
                 for (var j = 0; j < data.columns.length; j += 1) {
                   var column = data.columns[j];
                   var index = Math.round(Math.random() * (seed.length - 1));
-
                   if (column.field === 'id') {
                     row.id = "id-".concat(tasks.current + seed.length);
                   } else {
                     row[column.field] = seed[index][column.field];
                   }
                 }
-
                 rows.push(row);
                 tasks.current -= 1;
               }
-
               asyncWorker({
                 work: work,
                 done: function done() {
@@ -70,7 +58,6 @@ function _extrapolateSeed() {
                 tasks: tasks
               });
             }));
-
           case 1:
           case "end":
             return _context2.stop();
@@ -80,20 +67,19 @@ function _extrapolateSeed() {
   }));
   return _extrapolateSeed.apply(this, arguments);
 }
-
 var deepFreeze = function deepFreeze(object) {
   // Retrieve the property names defined on object
-  var propNames = Object.getOwnPropertyNames(object); // Freeze properties before freezing self
-  // eslint-disable-next-line no-restricted-syntax
+  var propNames = Object.getOwnPropertyNames(object);
 
-  var _iterator = _createForOfIteratorHelper(propNames),
-      _step;
+  // Freeze properties before freezing self
 
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator = _createForOfIteratorHelper(propNames),
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var name = _step.value;
       var value = object[name];
-
       if (value && _typeof(value) === 'object') {
         deepFreeze(value);
       }
@@ -103,32 +89,25 @@ var deepFreeze = function deepFreeze(object) {
   } finally {
     _iterator.f();
   }
-
   return Object.freeze(object);
 };
-
 export var getColumnsFromOptions = function getColumnsFromOptions(options) {
   var columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
-
   if (options.visibleFields) {
     columns = columns.map(function (col) {
       var _options$visibleField;
-
       return (_options$visibleField = options.visibleFields) != null && _options$visibleField.includes(col.field) ? col : _extends({}, col, {
         hide: true
       });
     });
   }
-
   if (options.maxColumns) {
     columns = columns.slice(0, options.maxColumns);
   }
-
   return columns;
 };
 export var getInitialState = function getInitialState(options, columns) {
   var _options$treeData;
-
   var columnVisibilityModel = {};
   columns.forEach(function (col) {
     if (col.hide) {
@@ -136,11 +115,9 @@ export var getInitialState = function getInitialState(options, columns) {
     }
   });
   var groupingField = (_options$treeData = options.treeData) == null ? void 0 : _options$treeData.groupingField;
-
   if (groupingField) {
     columnVisibilityModel[groupingField] = false;
   }
-
   return {
     columns: {
       columnVisibilityModel: columnVisibilityModel
@@ -149,22 +126,18 @@ export var getInitialState = function getInitialState(options, columns) {
 };
 export var useDemoData = function useDemoData(options) {
   var _options$treeData5, _options$treeData6, _options$treeData7;
-
   var _React$useState = React.useState(options.rowLength),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      rowLength = _React$useState2[0],
-      setRowLength = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    rowLength = _React$useState2[0],
+    setRowLength = _React$useState2[1];
   var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      index = _React$useState4[0],
-      setIndex = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    index = _React$useState4[0],
+    setIndex = _React$useState4[1];
   var _React$useState5 = React.useState(true),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      loading = _React$useState6[0],
-      setLoading = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    loading = _React$useState6[0],
+    setLoading = _React$useState6[1];
   var columns = React.useMemo(function () {
     return getColumnsFromOptions({
       dataSet: options.dataSet,
@@ -173,89 +146,75 @@ export var useDemoData = function useDemoData(options) {
       visibleFields: options.visibleFields
     });
   }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
-
   var _React$useState7 = React.useState(function () {
-    return addTreeDataOptionsToDemoData({
-      columns: columns,
-      rows: [],
-      initialState: getInitialState(options, columns)
-    }, options.treeData);
-  }),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      data = _React$useState8[0],
-      setData = _React$useState8[1];
-
+      return addTreeDataOptionsToDemoData({
+        columns: columns,
+        rows: [],
+        initialState: getInitialState(options, columns)
+      }, options.treeData);
+    }),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    data = _React$useState8[0],
+    setData = _React$useState8[1];
   React.useEffect(function () {
-    var cacheKey = "".concat(options.dataSet, "-").concat(rowLength, "-").concat(index, "-").concat(options.maxColumns); // Cache to allow fast switch between the JavaScript and TypeScript version
-    // of the demos.
+    var cacheKey = "".concat(options.dataSet, "-").concat(rowLength, "-").concat(index, "-").concat(options.maxColumns);
 
+    // Cache to allow fast switch between the JavaScript and TypeScript version
+    // of the demos.
     if (dataCache.has(cacheKey)) {
       var newData = dataCache.get(cacheKey);
       setData(newData);
       setLoading(false);
       return undefined;
     }
-
     var active = true;
-
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _options$treeData2, _options$treeData3, _options$treeData4;
-
       var newData;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               setLoading(true);
-
               if (!(rowLength > 1000)) {
                 _context.next = 10;
                 break;
               }
-
               _context.next = 4;
               return getRealGridData(1000, columns);
-
             case 4:
               newData = _context.sent;
               _context.next = 7;
               return extrapolateSeed(rowLength, newData);
-
             case 7:
               newData = _context.sent;
               _context.next = 13;
               break;
-
             case 10:
               _context.next = 12;
               return getRealGridData(rowLength, columns);
-
             case 12:
               newData = _context.sent;
-
             case 13:
               if (active) {
                 _context.next = 15;
                 break;
               }
-
               return _context.abrupt("return");
-
             case 15:
               newData = addTreeDataOptionsToDemoData(newData, {
                 maxDepth: (_options$treeData2 = options.treeData) == null ? void 0 : _options$treeData2.maxDepth,
                 groupingField: (_options$treeData3 = options.treeData) == null ? void 0 : _options$treeData3.groupingField,
                 averageChildren: (_options$treeData4 = options.treeData) == null ? void 0 : _options$treeData4.averageChildren
-              }); // It's quite slow. No need for it in production.
+              });
 
+              // It's quite slow. No need for it in production.
               if (process.env.NODE_ENV !== 'production') {
                 deepFreeze(newData);
               }
-
               dataCache.set(cacheKey, newData);
               setData(newData);
               setLoading(false);
-
             case 20:
             case "end":
               return _context.stop();
@@ -263,7 +222,6 @@ export var useDemoData = function useDemoData(options) {
         }
       }, _callee);
     }))();
-
     return function () {
       active = false;
     };