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

package/modern/hooks/useDemoData.js

@@ -1,159 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { LRUCache } from 'lru-cache';
-import { getRealGridData } from "../services/real-data-service.js";
-import { getCommodityColumns } from "../columns/commodities.columns.js";
-import { getEmployeeColumns } from "../columns/employees.columns.js";
-import asyncWorker from "../services/asyncWorker.js";
-import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
-const dataCache = new LRUCache({
-  max: 10,
-  ttl: 60 * 5 * 1e3 // 5 minutes
-});
-// Generate fake data from a seed.
-// It's about x20 faster than getRealData.
-export async function extrapolateSeed(rowLength, data) {
-  return new Promise(resolve => {
-    const seed = data.rows;
-    const rows = data.rows.slice();
-    const tasks = {
-      current: rowLength - seed.length
-    };
-    function work() {
-      const row = {};
-      for (let j = 0; j < data.columns.length; j += 1) {
-        const column = data.columns[j];
-        const index = Math.round(Math.random() * (seed.length - 1));
-        if (column.field === 'id') {
-          row.id = `id-${tasks.current + seed.length}`;
-        } else {
-          row[column.field] = seed[index][column.field];
-        }
-      }
-      rows.push(row);
-      tasks.current -= 1;
-    }
-    asyncWorker({
-      work,
-      done: () => resolve(_extends({}, data, {
-        rows
-      })),
-      tasks
-    });
-  });
-}
-export const deepFreeze = object => {
-  // Retrieve the property names defined on object
-  const propNames = Object.getOwnPropertyNames(object);
-
-  // Freeze properties before freezing self
-
-  for (const name of propNames) {
-    const value = object[name];
-    if (value && typeof value === 'object') {
-      deepFreeze(value);
-    }
-  }
-  return Object.freeze(object);
-};
-export const getColumnsFromOptions = options => {
-  let columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
-  if (options.visibleFields) {
-    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
-      hide: true
-    }));
-  }
-  if (options.maxColumns) {
-    columns = columns.slice(0, options.maxColumns);
-  }
-  return columns;
-};
-export const getInitialState = (options, columns) => {
-  const columnVisibilityModel = {};
-  columns.forEach(col => {
-    if (col.hide) {
-      columnVisibilityModel[col.field] = false;
-    }
-  });
-  const groupingField = options.treeData?.groupingField;
-  if (groupingField) {
-    columnVisibilityModel[groupingField] = false;
-  }
-  return {
-    columns: {
-      columnVisibilityModel
-    }
-  };
-};
-export const useDemoData = options => {
-  const [rowLength, setRowLength] = React.useState(options.rowLength);
-  const [index, setIndex] = React.useState(0);
-  const [loading, setLoading] = React.useState(true);
-  const columns = React.useMemo(() => {
-    return getColumnsFromOptions({
-      dataSet: options.dataSet,
-      editable: options.editable,
-      maxColumns: options.maxColumns,
-      visibleFields: options.visibleFields
-    });
-  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
-  const [data, setData] = React.useState(() => {
-    return addTreeDataOptionsToDemoData({
-      columns,
-      rows: [],
-      initialState: getInitialState(options, columns)
-    }, options.treeData);
-  });
-  React.useEffect(() => {
-    const cacheKey = `${options.dataSet}-${rowLength}-${index}-${options.maxColumns}`;
-
-    // Cache to allow fast switch between the JavaScript and TypeScript version
-    // of the demos.
-    if (dataCache.has(cacheKey)) {
-      const newData = dataCache.get(cacheKey);
-      setData(newData);
-      setLoading(false);
-      return undefined;
-    }
-    let active = true;
-    (async () => {
-      setLoading(true);
-      let newData;
-      if (rowLength > 1000) {
-        newData = await getRealGridData(1000, columns);
-        newData = await extrapolateSeed(rowLength, newData);
-      } else {
-        newData = await getRealGridData(rowLength, columns);
-      }
-      if (!active) {
-        return;
-      }
-      newData = addTreeDataOptionsToDemoData(newData, {
-        maxDepth: options.treeData?.maxDepth,
-        groupingField: options.treeData?.groupingField,
-        averageChildren: options.treeData?.averageChildren
-      });
-
-      // 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);
-    })();
-    return () => {
-      active = false;
-    };
-  }, [rowLength, options.dataSet, options.maxColumns, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, index, columns]);
-  return {
-    data,
-    loading,
-    setRowLength,
-    loadNewData: () => {
-      setIndex(oldIndex => oldIndex + 1);
-    }
-  };
-};

package/modern/hooks/useMockServer.d.ts

@@ -1,31 +0,0 @@
-import type { GridGetRowsResponse } from '@mui/x-data-grid';
-import { type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
-import { AddPathToDemoDataOptions } from "../services/tree-data-generator.js";
-import type { ServerOptions } from './serverUtils';
-export declare const BASE_URL = "https://mui.com/x/api/data-grid";
-type UseMockServerResponse<T> = {
-  columns: GridColDef[];
-  initialState: GridInitialState;
-  getGroupKey?: (row: GridRowModel) => string;
-  getChildrenCount?: (row: GridRowModel) => number;
-  fetchRows: (url: string) => Promise<T>;
-  loadNewData: () => void;
-  isReady: boolean;
-};
-type DataSet = 'Commodity' | 'Employee' | 'Movies';
-interface UseMockServerOptions {
-  dataSet: DataSet;
-  /**
-   * Has no effect when DataSet='Movies'
-   */
-  rowLength: number;
-  maxColumns?: number;
-  visibleFields?: string[];
-  editable?: boolean;
-  treeData?: AddPathToDemoDataOptions;
-  rowGrouping?: boolean;
-}
-export declare const useMockServer: <T extends GridGetRowsResponse>(dataSetOptions?: Partial<UseMockServerOptions>, serverOptions?: ServerOptions & {
-  verbose?: boolean;
-}, shouldRequestsFail?: boolean) => UseMockServerResponse<T>;
-export {};

package/modern/hooks/useMockServer.js

@@ -1,265 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { LRUCache } from 'lru-cache';
-import { getGridDefaultColumnTypes } from '@mui/x-data-grid-premium';
-import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
-import { getCommodityColumns } from "../columns/commodities.columns.js";
-import { getEmployeeColumns } from "../columns/employees.columns.js";
-import { getRealGridData } from "../services/real-data-service.js";
-import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
-import { loadServerRows, processTreeDataRows, processRowGroupingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
-import { randomInt } from "../services/index.js";
-import { getMovieRows, getMovieColumns } from "./useMovieData.js";
-const dataCache = new LRUCache({
-  max: 10,
-  ttl: 60 * 5 * 1e3 // 5 minutes
-});
-export const BASE_URL = 'https://mui.com/x/api/data-grid';
-const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
-  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
-  rowLength: isRowGrouping ? getMovieRows().length : 100,
-  maxColumns: 6
-});
-const getColumnsFromOptions = options => {
-  let columns;
-  switch (options.dataSet) {
-    case 'Commodity':
-      columns = getCommodityColumns(options.editable);
-      break;
-    case 'Employee':
-      columns = getEmployeeColumns();
-      break;
-    case 'Movies':
-      columns = getMovieColumns();
-      break;
-    default:
-      throw new Error('Unknown dataset');
-  }
-  if (options.visibleFields) {
-    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
-      hide: true
-    }));
-  }
-  if (options.maxColumns) {
-    columns = columns.slice(0, options.maxColumns);
-  }
-  return columns;
-};
-function decodeParams(url) {
-  const params = new URL(url).searchParams;
-  const decodedParams = {};
-  const array = Array.from(params.entries());
-  for (const [key, value] of array) {
-    try {
-      decodedParams[key] = JSON.parse(value);
-    } catch {
-      decodedParams[key] = value;
-    }
-  }
-  return decodedParams;
-}
-const getInitialState = (columns, groupingField) => {
-  const columnVisibilityModel = {};
-  columns.forEach(col => {
-    if (col.hide) {
-      columnVisibilityModel[col.field] = false;
-    }
-  });
-  if (groupingField) {
-    columnVisibilityModel[groupingField] = false;
-  }
-  return {
-    columns: {
-      columnVisibilityModel
-    }
-  };
-};
-const defaultColDef = getGridDefaultColumnTypes();
-function sendEmptyResponse() {
-  return new Promise(resolve => {
-    resolve({
-      rows: [],
-      rowCount: 0
-    });
-  });
-}
-export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
-  const [data, setData] = React.useState();
-  const [index, setIndex] = React.useState(0);
-  const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
-  React.useEffect(() => {
-    if (shouldRequestsFail !== undefined) {
-      shouldRequestsFailRef.current = shouldRequestsFail;
-    }
-  }, [shouldRequestsFail]);
-  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
-  const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
-  const isTreeData = options.treeData?.groupingField != null;
-  const columns = React.useMemo(() => {
-    return getColumnsFromOptions({
-      dataSet: options.dataSet,
-      editable: options.editable,
-      maxColumns: options.maxColumns,
-      visibleFields: options.visibleFields
-    });
-  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
-  const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
-  const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
-  const getGroupKey = React.useMemo(() => {
-    if (isTreeData) {
-      return row => row[options.treeData.groupingField];
-    }
-    return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options.treeData?.groupingField, isTreeData]);
-  const getChildrenCount = React.useMemo(() => {
-    if (isTreeData) {
-      return row => row.descendantCount;
-    }
-    return undefined;
-  }, [isTreeData]);
-  React.useEffect(() => {
-    const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
-
-    // Cache to allow fast switch between the JavaScript and TypeScript version
-    // of the demos.
-    if (dataCache.has(cacheKey)) {
-      const newData = dataCache.get(cacheKey);
-      setData(newData);
-      return undefined;
-    }
-    if (options.dataSet === 'Movies') {
-      const rowsData = {
-        rows: getMovieRows(),
-        columns
-      };
-      setData(rowsData);
-      dataCache.set(cacheKey, rowsData);
-      return undefined;
-    }
-    let active = true;
-    (async () => {
-      let rowData;
-      const rowLength = options.rowLength;
-      if (rowLength > 1000) {
-        rowData = await getRealGridData(1000, columns);
-        rowData = await extrapolateSeed(rowLength, rowData);
-      } else {
-        rowData = await getRealGridData(rowLength, columns);
-      }
-      if (!active) {
-        return;
-      }
-      if (isTreeData) {
-        rowData = addTreeDataOptionsToDemoData(rowData, {
-          maxDepth: options.treeData?.maxDepth,
-          groupingField: options.treeData?.groupingField,
-          averageChildren: options.treeData?.averageChildren
-        });
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        deepFreeze(rowData);
-      }
-      dataCache.set(cacheKey, rowData);
-      setData(rowData);
-    })();
-    return () => {
-      active = false;
-    };
-  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
-  const fetchRows = React.useCallback(async requestUrl => {
-    if (!requestUrl || !data?.rows) {
-      return sendEmptyResponse();
-    }
-    const params = decodeParams(requestUrl);
-    const verbose = serverOptions?.verbose ?? true;
-    // eslint-disable-next-line no-console
-    const print = console.info;
-    if (verbose) {
-      print('MUI X: DATASOURCE REQUEST', params);
-    }
-    let getRowsResponse;
-    const serverOptionsWithDefault = {
-      minDelay: serverOptions?.minDelay ?? DEFAULT_SERVER_OPTIONS.minDelay,
-      maxDelay: serverOptions?.maxDelay ?? DEFAULT_SERVER_OPTIONS.maxDelay,
-      useCursorPagination: serverOptions?.useCursorPagination ?? DEFAULT_SERVER_OPTIONS.useCursorPagination
-    };
-    if (shouldRequestsFailRef.current) {
-      const {
-        minDelay,
-        maxDelay
-      } = serverOptionsWithDefault;
-      const delay = randomInt(minDelay, maxDelay);
-      return new Promise((_, reject) => {
-        if (verbose) {
-          print('MUI X: DATASOURCE REQUEST FAILURE', params);
-        }
-        setTimeout(() => reject(new Error('Could not fetch the data')), delay);
-      });
-    }
-    if (isTreeData) {
-      const {
-        rows,
-        rootRowCount,
-        aggregateRow
-      } = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
-      getRowsResponse = _extends({
-        rows: rows.slice().map(row => _extends({}, row, {
-          path: undefined
-        })),
-        rowCount: rootRowCount
-      }, aggregateRow ? {
-        aggregateRow
-      } : {});
-    } else if (isRowGrouping) {
-      const {
-        rows,
-        rootRowCount,
-        aggregateRow
-      } = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
-      getRowsResponse = _extends({
-        rows: rows.slice().map(row => _extends({}, row, {
-          path: undefined
-        })),
-        rowCount: rootRowCount
-      }, aggregateRow ? {
-        aggregateRow
-      } : {});
-    } else {
-      const {
-        returnedRows,
-        nextCursor,
-        totalRowCount,
-        aggregateRow
-      } = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
-      getRowsResponse = _extends({
-        rows: returnedRows,
-        rowCount: totalRowCount,
-        pageInfo: {
-          nextCursor
-        }
-      }, aggregateRow ? {
-        aggregateRow
-      } : {});
-    }
-    return new Promise(resolve => {
-      if (verbose) {
-        print('MUI X: DATASOURCE RESPONSE', params, getRowsResponse);
-      }
-      resolve(getRowsResponse);
-    });
-  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
-  return {
-    columns: columnsWithDefaultColDef,
-    initialState: options.dataSet === 'Movies' ? {} : initialState,
-    getGroupKey,
-    getChildrenCount,
-    fetchRows,
-    loadNewData: () => {
-      setIndex(oldIndex => oldIndex + 1);
-    },
-    isReady: Boolean(data?.rows?.length)
-  };
-};

package/modern/hooks/useMovieData.d.ts

@@ -1,21 +0,0 @@
-import { GridColDef, GridRowModel } from '@mui/x-data-grid-premium';
-export type Movie = {
-  id: number;
-  title: string;
-  gross: number;
-  budget: number;
-  director: string;
-  company: string;
-  year: number;
-  imdbRating: number;
-  composer: {
-    name: string;
-  };
-  cinematicUniverse?: string;
-};
-export declare const getMovieColumns: () => GridColDef[];
-export declare const getMovieRows: () => GridRowModel<Movie>[];
-export declare const useMovieData: () => {
-  rows: Movie[];
-  columns: GridColDef[];
-};