@mui/x-data-grid 5.6.1 → 5.7.0

package/hooks/features/editRows/useGridCellEditing.new.js

@@ -0,0 +1,315 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
+export const useGridCellEditing = (apiRef, props) => {
+  const {
+    processRowUpdate
+  } = props;
+
+  const runIfEditModeIsCell = callback => (...args) => {
+    if (props.editMode === GridEditModes.Cell) {
+      callback(...args);
+    }
+  };
+
+  const throwIfNotEditable = React.useCallback((id, field) => {
+    const params = apiRef.current.getCellParams(id, field);
+
+    if (!apiRef.current.isCellEditable(params)) {
+      throw new Error(`MUI: The cell with id=${id} and field=${field} is not editable.`);
+    }
+  }, [apiRef]);
+  const throwIfNotInMode = React.useCallback((id, field, mode) => {
+    if (apiRef.current.getCellMode(id, field) !== mode) {
+      throw new Error(`MUI: The cell with id=${id} and field=${field} is not in ${mode} mode.`);
+    }
+  }, [apiRef]);
+  const handleCellDoubleClick = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (params.cellMode === GridCellModes.Edit) {
+      return;
+    }
+
+    const newParams = _extends({}, params, {
+      reason: GridCellEditStartReasons.cellDoubleClick
+    });
+
+    apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+  }, [apiRef]);
+  const handleCellFocusOut = React.useCallback((params, event) => {
+    if (params.cellMode === GridCellModes.View) {
+      return;
+    }
+
+    const newParams = _extends({}, params, {
+      reason: GridCellEditStopReasons.cellFocusOut
+    });
+
+    apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+  }, [apiRef]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (params.cellMode === GridCellModes.Edit) {
+      let reason;
+
+      if (event.key === 'Escape') {
+        reason = GridCellEditStopReasons.escapeKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = GridCellEditStopReasons.enterKeyDown;
+      } else if (event.key === 'Tab') {
+        reason = event.shiftKey ? GridCellEditStopReasons.shiftTabKeyDown : GridCellEditStopReasons.tabKeyDown;
+        event.preventDefault(); // Prevent going to the next element in the tab sequence
+      }
+
+      if (reason) {
+        const newParams = _extends({}, params, {
+          reason
+        });
+
+        apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+      }
+    } else if (params.isEditable) {
+      let reason;
+
+      if (isPrintableKey(event.key)) {
+        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+          return;
+        }
+
+        reason = GridCellEditStartReasons.printableKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = GridCellEditStartReasons.enterKeyDown;
+      } else if (event.key === 'Delete') {
+        reason = GridCellEditStartReasons.deleteKeyDown;
+      }
+
+      if (reason) {
+        const newParams = _extends({}, params, {
+          reason
+        });
+
+        apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+      }
+    }
+  }, [apiRef]);
+  const handleCellEditStart = React.useCallback((params, event) => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    apiRef.current.startCellEditMode(params);
+
+    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+      apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: ''
+      }, event);
+    }
+  }, [apiRef]);
+  const handleCellEditStop = React.useCallback(params => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    let cellToFocusAfter;
+
+    if (reason === GridCellEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === GridCellEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === GridCellEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+
+    let ignoreModifications = reason === 'escapeKeyDown';
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (editingState[id][field].isProcessingProps) {
+      // The user wants to stop editing the cell but we can't wait for the props to be processed.
+      // In this case, discard the modifications.
+      ignoreModifications = true;
+    }
+
+    apiRef.current.stopCellEditMode({
+      id,
+      field,
+      ignoreModifications,
+      cellToFocusAfter
+    });
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsCell(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsCell(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsCell(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, runIfEditModeIsCell(handleCellEditStart));
+  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, runIfEditModeIsCell(handleCellEditStop));
+  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
+  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+  const getCellMode = React.useCallback((id, field) => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const isEditing = editingState[id] && editingState[id][field];
+    return isEditing ? GridCellModes.Edit : GridCellModes.View;
+  }, [apiRef]);
+  const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
+    apiRef.current.setState(state => {
+      const newEditingState = _extends({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = _extends({}, newEditingState[id], {
+          [field]: _extends({}, newProps)
+        });
+      } else {
+        delete newEditingState[id][field];
+
+        if (Object.keys(newEditingState[id]).length === 0) {
+          delete newEditingState[id];
+        }
+      }
+
+      return _extends({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const startCellEditMode = React.useCallback(params => {
+    const {
+      id,
+      field
+    } = params;
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, GridCellModes.View);
+    const newProps = {
+      value: apiRef.current.getCellValue(id, field),
+      error: false,
+      isProcessingProps: false
+    };
+    updateOrDeleteFieldState(id, field, newProps);
+    apiRef.current.setCellFocus(id, field);
+  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const stopCellEditMode = React.useCallback(params => {
+    const {
+      id,
+      field,
+      ignoreModifications,
+      cellToFocusAfter = 'none'
+    } = params;
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
+
+    const updateFocusedCellIfNeeded = () => {
+      if (cellToFocusAfter !== 'none') {
+        apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
+      }
+    };
+
+    if (ignoreModifications) {
+      updateFocusedCellIfNeeded();
+      updateOrDeleteFieldState(id, field, null);
+      return;
+    }
+
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    const column = apiRef.current.getColumn(field);
+    const {
+      value,
+      error,
+      isProcessingProps
+    } = editingState[id][field];
+
+    if (error || isProcessingProps) {
+      return;
+    }
+
+    const rowUpdate = column.valueSetter ? column.valueSetter({
+      value,
+      row
+    }) : _extends({}, row, {
+      [field]: value
+    });
+
+    if (processRowUpdate) {
+      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        apiRef.current.updateRows([finalRowUpdate]);
+        updateFocusedCellIfNeeded();
+        updateOrDeleteFieldState(id, field, null);
+      });
+    } else {
+      apiRef.current.updateRows([rowUpdate]);
+      updateFocusedCellIfNeeded();
+      updateOrDeleteFieldState(id, field, null);
+    }
+  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  const setCellEditingEditCellValue = React.useCallback(async params => {
+    const {
+      id,
+      field,
+      value
+    } = params;
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    const column = apiRef.current.getColumn(field);
+    const row = apiRef.current.getRow(id);
+    let parsedValue = value;
+
+    if (column.valueParser) {
+      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+    }
+
+    let editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+    let newProps = _extends({}, editingState[id][field], {
+      value: parsedValue
+    });
+
+    if (column.preProcessEditCellProps) {
+      const hasChanged = value !== editingState[id][field].value;
+      newProps = _extends({}, newProps, {
+        isProcessingProps: true
+      });
+      updateOrDeleteFieldState(id, field, newProps);
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row,
+        props: newProps,
+        hasChanged
+      }));
+    } // Check again if the cell is in edit mode because the user may have
+    // discarded the changes while the props were being processed.
+
+
+    if (apiRef.current.getCellMode(id, field) === GridCellModes.View) {
+      return false;
+    }
+
+    editingState = gridEditRowsStateSelector(apiRef.current.state);
+    newProps = _extends({}, newProps, {
+      isProcessingProps: false
+    }); // We don't update the value with the one coming from the props pre-processing
+    // because when the promise resolves it may be already outdated. The only
+    // exception to this rule is when there's no pre-processing.
+
+    newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
+    updateOrDeleteFieldState(id, field, newProps);
+    editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return !editingState[id][field].error;
+  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const editingApi = {
+    getCellMode,
+    startCellEditMode,
+    stopCellEditMode,
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+  };
+  useGridApiMethod(apiRef, editingApi, 'EditingApi');
+};

package/hooks/features/editRows/{useGridCellEditing.js → useGridCellEditing.old.js}

@@ -68,7 +68,7 @@ export const useCellEditing = (apiRef, props) => {
       id,
       field
     } = params;
-    apiRef.current.unstable_runPendingEditCellValueChangeDebounce(id, field);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     const model = apiRef.current.getEditRowsModel();
 
     if (!model[id] || !model[id][field]) {

package/hooks/features/editRows/useGridEditing.new.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const editingStateInitializer: GridStateInitializer;
+export declare const useGridEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate'>) => void;

package/hooks/features/editRows/useGridEditing.new.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridCellEditing } from './useGridCellEditing.new';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { useGridRowEditing } from './useGridRowEditing.new';
+export const editingStateInitializer = state => _extends({}, state, {
+  editRows: {}
+});
+export const useGridEditing = (apiRef, props) => {
+  useGridCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  const debounceMap = React.useRef({});
+  const {
+    isCellEditable: isCellEditableProp
+  } = props;
+  const isCellEditable = React.useCallback(params => {
+    if (params.rowNode.isAutoGenerated) {
+      return false;
+    }
+
+    if (!params.colDef.editable) {
+      return false;
+    }
+
+    if (!params.colDef.renderEditCell) {
+      return false;
+    }
+
+    if (isCellEditableProp) {
+      return isCellEditableProp(params);
+    }
+
+    return true;
+  }, [isCellEditableProp]);
+
+  const maybeDebounce = (id, field, debounceMs, callback) => {
+    if (!debounceMs) {
+      callback();
+      return;
+    }
+
+    if (!debounceMap.current[id]) {
+      debounceMap.current[id] = {};
+    }
+
+    if (debounceMap.current[id][field]) {
+      const [timeout] = debounceMap.current[id][field];
+      clearTimeout(timeout);
+    } // To run the callback immediatelly without waiting the timeout
+
+
+    const runImmediately = () => {
+      const [timeout] = debounceMap.current[id][field];
+      clearTimeout(timeout);
+      callback();
+      delete debounceMap.current[id][field];
+    };
+
+    const timeout = setTimeout(() => {
+      callback();
+      delete debounceMap.current[id][field];
+    }, debounceMs);
+    debounceMap.current[id][field] = [timeout, runImmediately];
+  };
+
+  React.useEffect(() => {
+    const debounces = debounceMap.current;
+    return () => {
+      Object.entries(debounces).forEach(([id, fields]) => {
+        Object.keys(fields).forEach(field => {
+          const [timeout] = debounces[id][field];
+          clearTimeout(timeout);
+          delete debounces[id][field];
+        });
+      });
+    };
+  }, []);
+  const runPendingEditCellValueMutation = React.useCallback((id, field) => {
+    if (!debounceMap.current[id]) {
+      return;
+    }
+
+    if (!field) {
+      Object.keys(debounceMap.current[id]).forEach(debouncedField => {
+        const [, runCallback] = debounceMap.current[id][debouncedField];
+        runCallback();
+      });
+    } else if (debounceMap.current[id][field]) {
+      const [, runCallback] = debounceMap.current[id][field];
+      runCallback();
+    }
+  }, []);
+  const setEditCellValue = React.useCallback(params => {
+    const {
+      id,
+      field,
+      debounceMs
+    } = params;
+    return new Promise(resolve => {
+      maybeDebounce(id, field, debounceMs, async () => {
+        const setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+        // By the time this callback runs the user may have cancelled the editing
+
+        if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
+          const result = await setEditCellValueToCall(params);
+          resolve(result);
+        }
+      });
+    });
+  }, [apiRef, props.editMode]);
+  const editingSharedApi = {
+    isCellEditable,
+    setEditCellValue,
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+  };
+  useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
+};

package/hooks/features/editRows/{useGridEditing.js → useGridEditing.old.js}

@@ -6,8 +6,8 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
-import { useCellEditing } from './useGridCellEditing';
-import { useGridRowEditing } from './useGridRowEditing';
+import { useCellEditing } from './useGridCellEditing.old';
+import { useGridRowEditing } from './useGridRowEditing.old';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });
@@ -63,7 +63,7 @@ export function useGridEditing(apiRef, props) {
     debounceMap.current[id][field] = [timeout, callbackToRunImmediately];
   };
 
-  const runPendingEditCellValueChangeDebounce = React.useCallback((id, field) => {
+  const runPendingEditCellValueMutation = React.useCallback((id, field) => {
     if (!debounceMap.current[id]) {
       return;
     }
@@ -156,7 +156,7 @@ export function useGridEditing(apiRef, props) {
     setEditCellValue,
     unstable_setEditCellProps: setEditCellProps,
     unstable_parseValue: parseValue,
-    unstable_runPendingEditCellValueChangeDebounce: runPendingEditCellValueChangeDebounce
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditRowApi');
   React.useEffect(() => {

package/hooks/features/editRows/useGridRowEditing.new.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop'>) => void;