@mui/x-data-grid 5.6.1 → 5.7.0

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

@@ -0,0 +1,329 @@
+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 { 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 var useGridCellEditing = function useGridCellEditing(apiRef, props) {
+  var processRowUpdate = props.processRowUpdate;
+
+  var runIfEditModeIsCell = function runIfEditModeIsCell(callback) {
+    return function () {
+      if (props.editMode === GridEditModes.Cell) {
+        callback.apply(void 0, arguments);
+      }
+    };
+  };
+
+  var throwIfNotEditable = React.useCallback(function (id, field) {
+    var params = apiRef.current.getCellParams(id, field);
+
+    if (!apiRef.current.isCellEditable(params)) {
+      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
+    }
+  }, [apiRef]);
+  var throwIfNotInMode = React.useCallback(function (id, field, mode) {
+    if (apiRef.current.getCellMode(id, field) !== mode) {
+      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not in ").concat(mode, " mode."));
+    }
+  }, [apiRef]);
+  var handleCellDoubleClick = React.useCallback(function (params, event) {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (params.cellMode === GridCellModes.Edit) {
+      return;
+    }
+
+    var newParams = _extends({}, params, {
+      reason: GridCellEditStartReasons.cellDoubleClick
+    });
+
+    apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+  }, [apiRef]);
+  var handleCellFocusOut = React.useCallback(function (params, event) {
+    if (params.cellMode === GridCellModes.View) {
+      return;
+    }
+
+    var newParams = _extends({}, params, {
+      reason: GridCellEditStopReasons.cellFocusOut
+    });
+
+    apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+  }, [apiRef]);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    if (params.cellMode === GridCellModes.Edit) {
+      var 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) {
+        var newParams = _extends({}, params, {
+          reason: reason
+        });
+
+        apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+      }
+    } else if (params.isEditable) {
+      var _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) {
+        var _newParams = _extends({}, params, {
+          reason: _reason
+        });
+
+        apiRef.current.publishEvent(GridEvents.cellEditStart, _newParams, event);
+      }
+    }
+  }, [apiRef]);
+  var handleCellEditStart = React.useCallback(function (params, event) {
+    var id = params.id,
+        field = params.field,
+        reason = params.reason;
+    apiRef.current.startCellEditMode(params);
+
+    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+      apiRef.current.setEditCellValue({
+        id: id,
+        field: field,
+        value: ''
+      }, event);
+    }
+  }, [apiRef]);
+  var handleCellEditStop = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        reason = params.reason;
+    var cellToFocusAfter;
+
+    if (reason === GridCellEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === GridCellEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === GridCellEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+
+    var ignoreModifications = reason === 'escapeKeyDown';
+    var 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: id,
+      field: field,
+      ignoreModifications: ignoreModifications,
+      cellToFocusAfter: 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);
+  var getCellMode = React.useCallback(function (id, field) {
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var isEditing = editingState[id] && editingState[id][field];
+    return isEditing ? GridCellModes.Edit : GridCellModes.View;
+  }, [apiRef]);
+  var updateOrDeleteFieldState = React.useCallback(function (id, field, newProps) {
+    apiRef.current.setState(function (state) {
+      var newEditingState = _extends({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = _extends({}, newEditingState[id], _defineProperty({}, 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]);
+  var startCellEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field;
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, GridCellModes.View);
+    var newProps = {
+      value: apiRef.current.getCellValue(id, field),
+      error: false,
+      isProcessingProps: false
+    };
+    updateOrDeleteFieldState(id, field, newProps);
+    apiRef.current.setCellFocus(id, field);
+  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  var stopCellEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        ignoreModifications = params.ignoreModifications,
+        _params$cellToFocusAf = params.cellToFocusAfter,
+        cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
+
+    var updateFocusedCellIfNeeded = function updateFocusedCellIfNeeded() {
+      if (cellToFocusAfter !== 'none') {
+        apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
+      }
+    };
+
+    if (ignoreModifications) {
+      updateFocusedCellIfNeeded();
+      updateOrDeleteFieldState(id, field, null);
+      return;
+    }
+
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var row = apiRef.current.getRow(id);
+    var column = apiRef.current.getColumn(field);
+    var _editingState$id$fiel = editingState[id][field],
+        value = _editingState$id$fiel.value,
+        error = _editingState$id$fiel.error,
+        isProcessingProps = _editingState$id$fiel.isProcessingProps;
+
+    if (error || isProcessingProps) {
+      return;
+    }
+
+    var rowUpdate = column.valueSetter ? column.valueSetter({
+      value: value,
+      row: row
+    }) : _extends({}, row, _defineProperty({}, field, value));
+
+    if (processRowUpdate) {
+      Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
+        apiRef.current.updateRows([finalRowUpdate]);
+        updateFocusedCellIfNeeded();
+        updateOrDeleteFieldState(id, field, null);
+      });
+    } else {
+      apiRef.current.updateRows([rowUpdate]);
+      updateFocusedCellIfNeeded();
+      updateOrDeleteFieldState(id, field, null);
+    }
+  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+      var id, field, value, column, row, parsedValue, editingState, newProps, hasChanged;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              id = params.id, field = params.field, value = params.value;
+              throwIfNotEditable(id, field);
+              throwIfNotInMode(id, field, GridCellModes.Edit);
+              column = apiRef.current.getColumn(field);
+              row = apiRef.current.getRow(id);
+              parsedValue = value;
+
+              if (column.valueParser) {
+                parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+              }
+
+              editingState = gridEditRowsStateSelector(apiRef.current.state);
+              newProps = _extends({}, editingState[id][field], {
+                value: parsedValue
+              });
+
+              if (!column.preProcessEditCellProps) {
+                _context.next = 16;
+                break;
+              }
+
+              hasChanged = value !== editingState[id][field].value;
+              newProps = _extends({}, newProps, {
+                isProcessingProps: true
+              });
+              updateOrDeleteFieldState(id, field, newProps);
+              _context.next = 15;
+              return Promise.resolve(column.preProcessEditCellProps({
+                id: id,
+                row: row,
+                props: newProps,
+                hasChanged: hasChanged
+              }));
+
+            case 15:
+              newProps = _context.sent;
+
+            case 16:
+              if (!(apiRef.current.getCellMode(id, field) === GridCellModes.View)) {
+                _context.next = 18;
+                break;
+              }
+
+              return _context.abrupt("return", false);
+
+            case 18:
+              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 _context.abrupt("return", !editingState[id][field].error);
+
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  var editingApi = {
+    getCellMode: getCellMode,
+    startCellEditMode: startCellEditMode,
+    stopCellEditMode: stopCellEditMode,
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+  };
+  useGridApiMethod(apiRef, editingApi, 'EditingApi');
+};

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

@@ -72,7 +72,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
     var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var id = params.id,
         field = params.field;
-    apiRef.current.unstable_runPendingEditCellValueChangeDebounce(id, field);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     var model = apiRef.current.getEditRowsModel();
 
     if (!model[id] || !model[id][field]) {

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

@@ -0,0 +1,152 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 var editingStateInitializer = function editingStateInitializer(state) {
+  return _extends({}, state, {
+    editRows: {}
+  });
+};
+export var useGridEditing = function useGridEditing(apiRef, props) {
+  useGridCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  var debounceMap = React.useRef({});
+  var isCellEditableProp = props.isCellEditable;
+  var isCellEditable = React.useCallback(function (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]);
+
+  var maybeDebounce = function maybeDebounce(id, field, debounceMs, callback) {
+    if (!debounceMs) {
+      callback();
+      return;
+    }
+
+    if (!debounceMap.current[id]) {
+      debounceMap.current[id] = {};
+    }
+
+    if (debounceMap.current[id][field]) {
+      var _debounceMap$current$ = _slicedToArray(debounceMap.current[id][field], 1),
+          _timeout = _debounceMap$current$[0];
+
+      clearTimeout(_timeout);
+    } // To run the callback immediatelly without waiting the timeout
+
+
+    var runImmediately = function runImmediately() {
+      var _debounceMap$current$2 = _slicedToArray(debounceMap.current[id][field], 1),
+          timeout = _debounceMap$current$2[0];
+
+      clearTimeout(timeout);
+      callback();
+      delete debounceMap.current[id][field];
+    };
+
+    var timeout = setTimeout(function () {
+      callback();
+      delete debounceMap.current[id][field];
+    }, debounceMs);
+    debounceMap.current[id][field] = [timeout, runImmediately];
+  };
+
+  React.useEffect(function () {
+    var debounces = debounceMap.current;
+    return function () {
+      Object.entries(debounces).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            id = _ref2[0],
+            fields = _ref2[1];
+
+        Object.keys(fields).forEach(function (field) {
+          var _debounces$id$field = _slicedToArray(debounces[id][field], 1),
+              timeout = _debounces$id$field[0];
+
+          clearTimeout(timeout);
+          delete debounces[id][field];
+        });
+      });
+    };
+  }, []);
+  var runPendingEditCellValueMutation = React.useCallback(function (id, field) {
+    if (!debounceMap.current[id]) {
+      return;
+    }
+
+    if (!field) {
+      Object.keys(debounceMap.current[id]).forEach(function (debouncedField) {
+        var _debounceMap$current$3 = _slicedToArray(debounceMap.current[id][debouncedField], 2),
+            runCallback = _debounceMap$current$3[1];
+
+        runCallback();
+      });
+    } else if (debounceMap.current[id][field]) {
+      var _debounceMap$current$4 = _slicedToArray(debounceMap.current[id][field], 2),
+          runCallback = _debounceMap$current$4[1];
+
+      runCallback();
+    }
+  }, []);
+  var setEditCellValue = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        debounceMs = params.debounceMs;
+    return new Promise(function (resolve) {
+      maybeDebounce(id, field, debounceMs, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var setEditCellValueToCall, result;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                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)) {
+                  _context.next = 6;
+                  break;
+                }
+
+                _context.next = 4;
+                return setEditCellValueToCall(params);
+
+              case 4:
+                result = _context.sent;
+                resolve(result);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      })));
+    });
+  }, [apiRef, props.editMode]);
+  var editingSharedApi = {
+    isCellEditable: isCellEditable,
+    setEditCellValue: setEditCellValue,
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+  };
+  useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
+};

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

@@ -7,8 +7,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 var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
     editRows: {}
@@ -73,7 +73,7 @@ export function useGridEditing(apiRef, props) {
     debounceMap.current[id][field] = [timeout, callbackToRunImmediately];
   };
 
-  var runPendingEditCellValueChangeDebounce = React.useCallback(function (id, field) {
+  var runPendingEditCellValueMutation = React.useCallback(function (id, field) {
     if (!debounceMap.current[id]) {
       return;
     }
@@ -173,7 +173,7 @@ export function useGridEditing(apiRef, props) {
     setEditCellValue: setEditCellValue,
     unstable_setEditCellProps: setEditCellProps,
     unstable_parseValue: parseValue,
-    unstable_runPendingEditCellValueChangeDebounce: runPendingEditCellValueChangeDebounce
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditRowApi');
   React.useEffect(function () {