@mui/x-data-grid-generator 7.0.0-beta.3 → 7.0.0-beta.5

package/legacy/hooks/useQuery.js

@@ -1,262 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-pro';
-import { isDeepEqual } from '@mui/x-data-grid/internals';
-import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
-import { randomInt } from '../services/random-generator';
-var apiRef = {};
-var simplifiedValueGetter = function simplifiedValueGetter(field, colDef) {
-  return function (row) {
-    var _colDef$valueGetter;
-    return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, row[row.id], row, colDef, apiRef)) || row[field];
-  };
-};
-var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultColDef) {
-  if (!sortModel) {
-    var _comparator = function _comparator() {
-      return 0;
-    };
-    return _comparator;
-  }
-  var sortOperators = sortModel.map(function (sortItem) {
-    var columnField = sortItem.field;
-    var colDef = columnsWithDefaultColDef.find(function (_ref) {
-      var field = _ref.field;
-      return field === columnField;
-    });
-    return _extends({}, sortItem, {
-      valueGetter: simplifiedValueGetter(columnField, colDef),
-      sortComparator: colDef.sortComparator
-    });
-  });
-  var comparator = function comparator(row1, row2) {
-    return sortOperators.reduce(function (acc, _ref2) {
-      var valueGetter = _ref2.valueGetter,
-        sort = _ref2.sort,
-        sortComparator = _ref2.sortComparator;
-      if (acc !== 0) {
-        return acc;
-      }
-      var v1 = valueGetter(row1);
-      var v2 = valueGetter(row2);
-      return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
-    }, 0);
-  };
-  return comparator;
-};
-var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDefaultColDef) {
-  if (filterModel === undefined || filterModel.items.length === 0) {
-    return rows;
-  }
-  var valueGetters = filterModel.items.map(function (_ref3) {
-    var field = _ref3.field;
-    return simplifiedValueGetter(field, columnsWithDefaultColDef.find(function (column) {
-      return column.field === field;
-    }));
-  });
-  var filterFunctions = filterModel.items.map(function (filterItem) {
-    var field = filterItem.field,
-      operator = filterItem.operator;
-    var colDef = columnsWithDefaultColDef.find(function (column) {
-      return column.field === field;
-    });
-    var filterOperator = colDef.filterOperators.find(function (_ref4) {
-      var value = _ref4.value;
-      return operator === value;
-    });
-    var parsedValue = filterItem.value;
-    if (colDef.valueParser) {
-      var _filterItem$value;
-      var parser = colDef.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-        return parser(x);
-      }) : parser(filterItem.value);
-    }
-    return filterOperator == null ? void 0 : filterOperator.getApplyFilterFn({
-      filterItem: filterItem,
-      value: parsedValue
-    }, colDef);
-  });
-  if (filterModel.logicOperator === GridLogicOperator.Or) {
-    return rows.filter(function (row) {
-      return filterModel.items.some(function (_, index) {
-        var value = valueGetters[index](row);
-        return filterFunctions[index] === null ? true : filterFunctions[index]({
-          value: value
-        });
-      });
-    });
-  }
-  return rows.filter(function (row) {
-    return filterModel.items.every(function (_, index) {
-      var value = valueGetters[index](row);
-      return filterFunctions[index] === null ? true : filterFunctions[index]({
-        value: value
-      });
-    });
-  });
-};
-
-/**
- * Simulates server data loading
- */
-export var loadServerRows = function loadServerRows(rows, queryOptions, serverOptions, columnsWithDefaultColDef) {
-  var _serverOptions$minDel = serverOptions.minDelay,
-    minDelay = _serverOptions$minDel === void 0 ? 100 : _serverOptions$minDel,
-    _serverOptions$maxDel = serverOptions.maxDelay,
-    maxDelay = _serverOptions$maxDel === void 0 ? 300 : _serverOptions$maxDel,
-    useCursorPagination = serverOptions.useCursorPagination;
-  if (maxDelay < minDelay) {
-    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
-  }
-  var delay = randomInt(minDelay, maxDelay);
-  var cursor = queryOptions.cursor,
-    _queryOptions$page = queryOptions.page,
-    page = _queryOptions$page === void 0 ? 0 : _queryOptions$page,
-    pageSize = queryOptions.pageSize;
-  var nextCursor;
-  var firstRowIndex;
-  var lastRowIndex;
-  var filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
-  var rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
-  filteredRows = _toConsumableArray(filteredRows).sort(rowComparator);
-  var totalRowCount = filteredRows.length;
-  if (!pageSize) {
-    firstRowIndex = 0;
-    lastRowIndex = filteredRows.length;
-  } else if (useCursorPagination) {
-    firstRowIndex = cursor ? filteredRows.findIndex(function (_ref5) {
-      var id = _ref5.id;
-      return 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;
-  }
-  var response = {
-    returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
-    nextCursor: nextCursor,
-    totalRowCount: totalRowCount
-  };
-  return new Promise(function (resolve) {
-    setTimeout(function () {
-      resolve(response);
-    }, delay); // simulate network latency
-  });
-};
-var DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
-var disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
-var DEFAULT_SERVER_OPTIONS = {
-  minDelay: disableDelay ? 0 : 100,
-  maxDelay: disableDelay ? 0 : 300,
-  useCursorPagination: true
-};
-export var createFakeServer = function createFakeServer(dataSetOptions, serverOptions) {
-  var dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
-  var serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
-  var columns = getColumnsFromOptions(dataSetOptionsWithDefault);
-  var initialState = getInitialState(dataSetOptionsWithDefault, columns);
-  var defaultColDef = getGridDefaultColumnTypes();
-  var columnsWithDefaultColDef = columns.map(function (column) {
-    return _extends({}, defaultColDef[column.type || 'string'], column);
-  });
-  var useQuery = function useQuery(queryOptions) {
-    var _useDemoData = useDemoData(dataSetOptionsWithDefault),
-      rows = _useDemoData.data.rows,
-      dataGenerationIsLoading = _useDemoData.loading;
-    var queryOptionsRef = React.useRef(queryOptions);
-    var _React$useState = React.useState({
-        pageInfo: {},
-        rows: []
-      }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      response = _React$useState2[0],
-      setResponse = _React$useState2[1];
-    var _React$useState3 = React.useState(dataGenerationIsLoading),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isLoading = _React$useState4[0],
-      setIsLoading = _React$useState4[1];
-    React.useEffect(function () {
-      if (dataGenerationIsLoading) {
-        // dataset is not ready
-        return function () {};
-      }
-      queryOptionsRef.current = queryOptions;
-      var active = true;
-      setIsLoading(true);
-      setResponse(function (prev) {
-        return Object.keys(prev.pageInfo).length === 0 ? prev : _extends({}, prev, {
-          pageInfo: {}
-        });
-      });
-      (function () {
-        var _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-          var _yield$loadServerRows, returnedRows, nextCursor, totalRowCount, newRep;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
-              case 2:
-                _yield$loadServerRows = _context.sent;
-                returnedRows = _yield$loadServerRows.returnedRows;
-                nextCursor = _yield$loadServerRows.nextCursor;
-                totalRowCount = _yield$loadServerRows.totalRowCount;
-                if (active) {
-                  _context.next = 8;
-                  break;
-                }
-                return _context.abrupt("return");
-              case 8:
-                newRep = {
-                  rows: returnedRows,
-                  pageInfo: {
-                    totalRowCount: totalRowCount,
-                    nextCursor: nextCursor,
-                    pageSize: returnedRows.length
-                  }
-                };
-                setResponse(function (prev) {
-                  return isDeepEqual(prev, newRep) ? prev : newRep;
-                });
-                setIsLoading(false);
-              case 11:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function fetchData() {
-          return _fetchData.apply(this, arguments);
-        }
-        return fetchData;
-      })()();
-      return function () {
-        active = false;
-      };
-    }, [dataGenerationIsLoading, queryOptions, rows]);
-
-    // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
-    var effectShouldStart = queryOptionsRef.current !== queryOptions;
-    return _extends({
-      isLoading: isLoading || effectShouldStart
-    }, response);
-  };
-  return {
-    columns: columns,
-    columnsWithDefaultColDef: columnsWithDefaultColDef,
-    initialState: initialState,
-    useQuery: useQuery
-  };
-};

package/legacy/index.js

@@ -1,11 +0,0 @@
-/**
- * @mui/x-data-grid-generator v7.0.0-beta.3
- *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export * from './renderer';
-export * from './services';
-export * from './columns';
-export * from './hooks';

package/legacy/renderer/index.js

@@ -1,16 +0,0 @@
-export * from './renderAvatar';
-export * from './renderCountry';
-export * from './renderEmail';
-export * from './renderIncoterm';
-export * from './renderLink';
-export * from './renderPnl';
-export * from './renderProgress';
-export * from './renderRating';
-export * from './renderStatus';
-export * from './renderTotalPrice';
-export * from './renderEditCurrency';
-export * from './renderEditProgress';
-export * from './renderEditStatus';
-export * from './renderEditIncoterm';
-export * from './renderEditRating';
-export * from './renderEditCountry';

package/legacy/renderer/renderAvatar.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function renderAvatar(params) {
-  if (params.value == null) {
-    return '';
-  }
-  return /*#__PURE__*/_jsx(Avatar, {
-    style: {
-      backgroundColor: params.value.color
-    },
-    children: params.value.name.toUpperCase().substring(0, 1)
-  });
-}

package/legacy/renderer/renderCountry.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Country = /*#__PURE__*/React.memo(function Country(props) {
-  var value = props.value;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      '&  > img': {
-        mr: 0.5,
-        flexShrink: 0,
-        width: '20px'
-      }
-    },
-    children: [/*#__PURE__*/_jsx("img", {
-      loading: "lazy",
-      width: "20",
-      src: "https://flagcdn.com/w20/".concat(value.code.toLowerCase(), ".png"),
-      srcSet: "https://flagcdn.com/w40/".concat(value.code.toLowerCase(), ".png 2x"),
-      alt: ""
-    }), /*#__PURE__*/_jsx(Box, {
-      component: "span",
-      sx: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      },
-      children: value.label
-    })]
-  });
-});
-export function renderCountry(params) {
-  if (params.value == null) {
-    return '';
-  }
-
-  // If the aggregated value does not have the same unit as the other cell
-  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
-  if (params.aggregation && !params.aggregation.hasCellUnit) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Country, {
-    value: params.value
-  });
-}

package/legacy/renderer/renderEditCountry.js

@@ -1,102 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { COUNTRY_ISO_OPTIONS } from '../services/static-data';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
-  var theme = _ref.theme;
-  return _defineProperty({
-    height: '100%'
-  }, "& .".concat(autocompleteClasses.inputRoot), _extends({}, theme.typography.body2, {
-    padding: '1px 0',
-    height: '100%',
-    '& input': {
-      padding: '0 16px',
-      height: '100%'
-    }
-  }));
-});
-function EditCountry(props) {
-  var id = props.id,
-    value = props.value,
-    field = props.field;
-  var apiRef = useGridApiContext();
-  var handleChange = React.useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return apiRef.current.setEditCellValue({
-              id: id,
-              field: field,
-              value: newValue
-            }, event);
-          case 2:
-            apiRef.current.stopCellEditMode({
-              id: id,
-              field: field
-            });
-          case 3:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [apiRef, field, id]);
-  return /*#__PURE__*/_jsx(StyledAutocomplete, {
-    value: value,
-    onChange: handleChange,
-    options: COUNTRY_ISO_OPTIONS,
-    getOptionLabel: function getOptionLabel(option) {
-      return option.label;
-    },
-    autoHighlight: true,
-    fullWidth: true,
-    open: true,
-    disableClearable: true,
-    renderOption: function renderOption(optionProps, option) {
-      return /*#__PURE__*/_jsxs(Box, _extends({
-        component: "li",
-        sx: {
-          '& > img': {
-            mr: 1.5,
-            flexShrink: 0
-          }
-        }
-      }, optionProps, {
-        children: [/*#__PURE__*/_jsx("img", {
-          loading: "lazy",
-          width: "20",
-          src: "https://flagcdn.com/w20/".concat(option.code.toLowerCase(), ".png"),
-          srcSet: "https://flagcdn.com/w40/".concat(option.code.toLowerCase(), ".png 2x"),
-          alt: ""
-        }), option.label]
-      }));
-    },
-    renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(InputBase, _extends({
-        autoFocus: true,
-        fullWidth: true,
-        id: params.id,
-        inputProps: _extends({}, params.inputProps, {
-          autoComplete: 'new-password' // disable autocomplete and autofill
-        })
-      }, params.InputProps));
-    }
-  });
-}
-export function renderEditCountry(params) {
-  return /*#__PURE__*/_jsx(EditCountry, _extends({}, params));
-}

package/legacy/renderer/renderEditCurrency.js

@@ -1,99 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { CURRENCY_OPTIONS } from '../services/static-data';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
-  var theme = _ref.theme;
-  return _defineProperty({
-    height: '100%'
-  }, "& .".concat(autocompleteClasses.inputRoot), _extends({}, theme.typography.body2, {
-    padding: '1px 0',
-    height: '100%',
-    '& input': {
-      padding: '0 16px',
-      height: '100%'
-    }
-  }));
-});
-function EditCurrency(props) {
-  var id = props.id,
-    value = props.value,
-    field = props.field;
-  var apiRef = useGridApiContext();
-  var handleChange = React.useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return apiRef.current.setEditCellValue({
-              id: id,
-              field: field,
-              value: newValue.toUpperCase()
-            }, event);
-          case 2:
-            apiRef.current.stopCellEditMode({
-              id: id,
-              field: field
-            });
-          case 3:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [apiRef, field, id]);
-  return /*#__PURE__*/_jsx(StyledAutocomplete, {
-    value: value,
-    onChange: handleChange,
-    options: CURRENCY_OPTIONS,
-    autoHighlight: true,
-    fullWidth: true,
-    open: true,
-    disableClearable: true,
-    renderOption: function renderOption(optionProps, option) {
-      return /*#__PURE__*/_jsxs(Box, _extends({
-        component: "li",
-        sx: {
-          '& > img': {
-            mr: 1.5,
-            flexShrink: 0
-          }
-        }
-      }, optionProps, {
-        children: [/*#__PURE__*/_jsx("img", {
-          loading: "lazy",
-          width: "20",
-          src: "https://flagcdn.com/w20/".concat(option.slice(0, -1).toLowerCase(), ".png"),
-          srcSet: "https://flagcdn.com/w40/".concat(option.slice(0, -1).toLowerCase(), ".png 2x"),
-          alt: ""
-        }), option]
-      }));
-    },
-    renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(InputBase, _extends({
-        autoFocus: true,
-        fullWidth: true,
-        id: params.id,
-        inputProps: _extends({}, params.inputProps, {
-          autoComplete: 'new-password' // disable autocomplete and autofill
-        })
-      }, params.InputProps));
-    }
-  });
-}
-export function renderEditCurrency(params) {
-  return /*#__PURE__*/_jsx(EditCurrency, _extends({}, params));
-}

package/legacy/renderer/renderEditIncoterm.js

@@ -1,91 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { INCOTERM_OPTIONS } from '../services/static-data';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function EditIncoterm(props) {
-  var id = props.id,
-    value = props.value,
-    field = props.field;
-  var apiRef = useGridApiContext();
-  var handleChange = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return apiRef.current.setEditCellValue({
-              id: id,
-              field: field,
-              value: event.target.value
-            }, event);
-          case 2:
-            apiRef.current.stopCellEditMode({
-              id: id,
-              field: field
-            });
-          case 3:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleChange(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var handleClose = function handleClose(event, reason) {
-    if (reason === 'backdropClick') {
-      apiRef.current.stopCellEditMode({
-        id: id,
-        field: field
-      });
-    }
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    value: value,
-    onChange: handleChange,
-    MenuProps: {
-      onClose: handleClose
-    },
-    sx: {
-      height: '100%',
-      '& .MuiSelect-select': {
-        display: 'flex',
-        alignItems: 'center',
-        pl: 1
-      }
-    },
-    autoFocus: true,
-    fullWidth: true,
-    open: true,
-    children: INCOTERM_OPTIONS.map(function (option) {
-      var tooltip = option.slice(option.indexOf('(') + 1, option.indexOf(')'));
-      var code = option.slice(0, option.indexOf('(')).trim();
-      return /*#__PURE__*/_jsxs(MenuItem, {
-        value: option,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          sx: {
-            minWidth: 36
-          },
-          children: code
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: tooltip,
-          sx: {
-            overflow: 'hidden'
-          }
-        })]
-      }, option);
-    })
-  });
-}
-export function renderEditIncoterm(params) {
-  return /*#__PURE__*/_jsx(EditIncoterm, _extends({}, params));
-}