@mui/x-data-grid 5.6.1 → 5.7.0

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

@@ -0,0 +1,334 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridCellEditing = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _gridEvents = require("../../../models/events/gridEvents");
+
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _gridEditRowsSelector = require("./gridEditRowsSelector");
+
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+
+var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridCellEditing = (apiRef, props) => {
+  const {
+    processRowUpdate
+  } = props;
+
+  const runIfEditModeIsCell = callback => (...args) => {
+    if (props.editMode === _gridEditRowModel.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 === _gridEditRowModel.GridCellModes.Edit) {
+      return;
+    }
+
+    const newParams = (0, _extends2.default)({}, params, {
+      reason: _gridEditCellParams.GridCellEditStartReasons.cellDoubleClick
+    });
+    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStart, newParams, event);
+  }, [apiRef]);
+  const handleCellFocusOut = React.useCallback((params, event) => {
+    if (params.cellMode === _gridEditRowModel.GridCellModes.View) {
+      return;
+    }
+
+    const newParams = (0, _extends2.default)({}, params, {
+      reason: _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
+    });
+    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, newParams, event);
+  }, [apiRef]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (params.cellMode === _gridEditRowModel.GridCellModes.Edit) {
+      let reason;
+
+      if (event.key === 'Escape') {
+        reason = _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = _gridEditCellParams.GridCellEditStopReasons.enterKeyDown;
+      } else if (event.key === 'Tab') {
+        reason = event.shiftKey ? _gridEditCellParams.GridCellEditStopReasons.shiftTabKeyDown : _gridEditCellParams.GridCellEditStopReasons.tabKeyDown;
+        event.preventDefault(); // Prevent going to the next element in the tab sequence
+      }
+
+      if (reason) {
+        const newParams = (0, _extends2.default)({}, params, {
+          reason
+        });
+        apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, newParams, event);
+      }
+    } else if (params.isEditable) {
+      let reason;
+
+      if ((0, _keyboardUtils.isPrintableKey)(event.key)) {
+        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+          return;
+        }
+
+        reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = _gridEditCellParams.GridCellEditStartReasons.enterKeyDown;
+      } else if (event.key === 'Delete') {
+        reason = _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown;
+      }
+
+      if (reason) {
+        const newParams = (0, _extends2.default)({}, params, {
+          reason
+        });
+        apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStart, newParams, event);
+      }
+    }
+  }, [apiRef]);
+  const handleCellEditStart = React.useCallback((params, event) => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    apiRef.current.startCellEditMode(params);
+
+    if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
+      apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: ''
+      }, event);
+    }
+  }, [apiRef]);
+  const handleCellEditStop = React.useCallback(params => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    let cellToFocusAfter;
+
+    if (reason === _gridEditCellParams.GridCellEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === _gridEditCellParams.GridCellEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === _gridEditCellParams.GridCellEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+
+    let ignoreModifications = reason === 'escapeKeyDown';
+    const editingState = (0, _gridEditRowsSelector.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]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, runIfEditModeIsCell(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, runIfEditModeIsCell(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, runIfEditModeIsCell(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, runIfEditModeIsCell(handleCellEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, runIfEditModeIsCell(handleCellEditStop));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, props.onCellEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, props.onCellEditStop);
+  const getCellMode = React.useCallback((id, field) => {
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const isEditing = editingState[id] && editingState[id][field];
+    return isEditing ? _gridEditRowModel.GridCellModes.Edit : _gridEditRowModel.GridCellModes.View;
+  }, [apiRef]);
+  const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
+    apiRef.current.setState(state => {
+      const newEditingState = (0, _extends2.default)({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = (0, _extends2.default)({}, newEditingState[id], {
+          [field]: (0, _extends2.default)({}, newProps)
+        });
+      } else {
+        delete newEditingState[id][field];
+
+        if (Object.keys(newEditingState[id]).length === 0) {
+          delete newEditingState[id];
+        }
+      }
+
+      return (0, _extends2.default)({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const startCellEditMode = React.useCallback(params => {
+    const {
+      id,
+      field
+    } = params;
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, _gridEditRowModel.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, _gridEditRowModel.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 = (0, _gridEditRowsSelector.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
+    }) : (0, _extends2.default)({}, 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, _gridEditRowModel.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 = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    let newProps = (0, _extends2.default)({}, editingState[id][field], {
+      value: parsedValue
+    });
+
+    if (column.preProcessEditCellProps) {
+      const hasChanged = value !== editingState[id][field].value;
+      newProps = (0, _extends2.default)({}, 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) === _gridEditRowModel.GridCellModes.View) {
+      return false;
+    }
+
+    editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    newProps = (0, _extends2.default)({}, 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 = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    return !editingState[id][field].error;
+  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const editingApi = {
+    getCellMode,
+    startCellEditMode,
+    stopCellEditMode,
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
+};
+
+exports.useGridCellEditing = useGridCellEditing;

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

@@ -90,7 +90,7 @@ 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/node/hooks/features/editRows/useGridEditing.new.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridEditing = exports.editingStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridCellEditing = require("./useGridCellEditing.new");
+
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+
+var _useGridRowEditing = require("./useGridRowEditing.new");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const editingStateInitializer = state => (0, _extends2.default)({}, state, {
+  editRows: {}
+});
+
+exports.editingStateInitializer = editingStateInitializer;
+
+const useGridEditing = (apiRef, props) => {
+  (0, _useGridCellEditing.useGridCellEditing)(apiRef, props);
+  (0, _useGridRowEditing.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) === _gridEditRowModel.GridCellModes.Edit) {
+          const result = await setEditCellValueToCall(params);
+          resolve(result);
+        }
+      });
+    });
+  }, [apiRef, props.editMode]);
+  const editingSharedApi = {
+    isCellEditable,
+    setEditCellValue,
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingSharedApi, 'EditingApi');
+};
+
+exports.useGridEditing = useGridEditing;

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

@@ -24,9 +24,9 @@ var _useGridLogger = require("../../utils/useGridLogger");
 
 var _gridEditRowsSelector = require("./gridEditRowsSelector");
 
-var _useGridCellEditing = require("./useGridCellEditing");
+var _useGridCellEditing = require("./useGridCellEditing.old");
 
-var _useGridRowEditing = require("./useGridRowEditing");
+var _useGridRowEditing = require("./useGridRowEditing.old");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -90,7 +90,7 @@ 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;
     }
@@ -182,7 +182,7 @@ function useGridEditing(apiRef, props) {
     setEditCellValue,
     unstable_setEditCellProps: setEditCellProps,
     unstable_parseValue: parseValue,
-    unstable_runPendingEditCellValueChangeDebounce: runPendingEditCellValueChangeDebounce
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingSharedApi, 'EditRowApi');
   React.useEffect(() => {