@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -1,411 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import { useEventCallback } from '@mui/material/utils';
-import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent, isPrintableKey, isCellEnterEditModeKeys, isCellExitEditModeKeys, isCellEditCommitKeys, isDeleteKeys } from '../../../utils/keyboardUtils';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
-
-function isPromise(promise) {
-  return typeof promise.then === 'function';
-}
-
-export var useCellEditing = function useCellEditing(apiRef, props) {
-  var _props$experimentalFe2;
-
-  var logger = useGridLogger(apiRef, 'useGridEditRows');
-
-  var buildCallback = function buildCallback(callback) {
-    return function () {
-      if (props.editMode === GridEditModes.Cell) {
-        callback.apply(void 0, arguments);
-      }
-    };
-  };
-
-  var setCellMode = React.useCallback(function (id, field, mode) {
-    if (apiRef.current.getCellMode(id, field) === mode) {
-      return;
-    }
-
-    logger.debug("Switching cell id: ".concat(id, " field: ").concat(field, " to mode: ").concat(mode));
-    apiRef.current.setState(function (state) {
-      var newEditRowsState = _extends({}, state.editRows);
-
-      newEditRowsState[id] = _extends({}, newEditRowsState[id]);
-
-      if (mode === GridCellModes.Edit) {
-        newEditRowsState[id][field] = {
-          value: apiRef.current.getCellValue(id, field)
-        };
-      } else {
-        delete newEditRowsState[id][field];
-
-        if (!Object.keys(newEditRowsState[id]).length) {
-          delete newEditRowsState[id];
-        }
-      }
-
-      return _extends({}, state, {
-        editRows: newEditRowsState
-      });
-    });
-    apiRef.current.forceUpdate();
-    apiRef.current.publishEvent('cellModeChange', apiRef.current.getCellParams(id, field));
-  }, [apiRef, logger]);
-  var getCellMode = React.useCallback(function (id, field) {
-    var editRowsState = gridEditRowsStateSelector(apiRef.current.state);
-    var isEditing = editRowsState[id] && editRowsState[id][field];
-    return isEditing ? GridCellModes.Edit : GridCellModes.View;
-  }, [apiRef]); // TODO v6: it should always return a promise
-
-  var commitCellChange = React.useCallback(function (params) {
-    var _props$experimentalFe;
-
-    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var id = params.id,
-        field = params.field;
-    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
-    var model = apiRef.current.getEditRowsModel();
-
-    if (!model[id] || !model[id][field]) {
-      throw new Error("MUI: Cell at id: ".concat(id, " and field: ").concat(field, " is not in edit mode."));
-    }
-
-    var editCellProps = model[id][field];
-    var column = apiRef.current.getColumn(field);
-    var row = apiRef.current.getRow(id);
-
-    if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
-      var cellProps = model[id][field];
-
-      if (cellProps.isValidating || cellProps.error) {
-        return false;
-      }
-    }
-
-    var commitParams = _extends({}, params, {
-      value: editCellProps.value
-    });
-
-    var hasError = !!editCellProps.error;
-
-    if (!hasError && typeof column.preProcessEditCellProps === 'function') {
-      var result = column.preProcessEditCellProps({
-        id: id,
-        row: row,
-        props: editCellProps
-      });
-
-      if (isPromise(result)) {
-        return result.then(function (newEditCellProps) {
-          apiRef.current.unstable_setEditCellProps({
-            id: id,
-            field: field,
-            props: newEditCellProps
-          });
-
-          if (newEditCellProps.error) {
-            return false;
-          }
-
-          apiRef.current.publishEvent('cellEditCommit', commitParams, event);
-          return true;
-        });
-      }
-
-      apiRef.current.unstable_setEditCellProps({
-        id: id,
-        field: field,
-        props: result
-      });
-      hasError = !!result.error;
-    }
-
-    if (!hasError) {
-      apiRef.current.publishEvent('cellEditCommit', commitParams, event);
-      return true;
-    }
-
-    return false;
-  }, [apiRef, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
-  var setCellEditingEditCellValue = React.useCallback(function (params) {
-    var column = apiRef.current.getColumn(params.field);
-    var row = apiRef.current.getRow(params.id);
-    return new Promise(function (resolve) {
-      var newEditCellProps = {
-        value: params.value
-      };
-      var model = apiRef.current.getEditRowsModel();
-      var editCellProps = model[params.id][params.field];
-
-      if (typeof column.preProcessEditCellProps !== 'function') {
-        apiRef.current.unstable_setEditCellProps(_extends({}, params, {
-          props: newEditCellProps
-        }));
-        resolve(true);
-        return;
-      } // setEditCellProps runs the value parser and returns the updated props
-
-
-      newEditCellProps = apiRef.current.unstable_setEditCellProps(_extends({}, params, {
-        props: _extends({}, editCellProps, {
-          isValidating: true
-        })
-      }));
-      Promise.resolve(column.preProcessEditCellProps({
-        id: params.id,
-        row: row,
-        props: _extends({}, newEditCellProps, {
-          value: apiRef.current.unstable_parseValue(params.id, params.field, params.value)
-        })
-      })).then(function (newEditCellPropsProcessed) {
-        apiRef.current.unstable_setEditCellProps(_extends({}, params, {
-          props: _extends({}, newEditCellPropsProcessed, {
-            isValidating: false
-          })
-        }));
-        resolve(!newEditCellPropsProcessed.error);
-      });
-    });
-  }, [apiRef]);
-  var cellEditingApi = {
-    setCellMode: setCellMode,
-    getCellMode: getCellMode,
-    commitCellChange: commitCellChange,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
-  };
-  useGridApiMethod(apiRef, cellEditingApi, 'EditRowApi');
-  var handleCellKeyDown = React.useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params, event) {
-      var id, field, cellMode, isEditable, isEditMode, isModifierKeyPressed, commitParams, isValid;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(event.which === 229)) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              id = params.id, field = params.field, cellMode = params.cellMode, isEditable = params.isEditable;
-
-              if (isEditable) {
-                _context.next = 5;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 5:
-              isEditMode = cellMode === GridCellModes.Edit;
-              isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
-
-              if (!isEditMode && isCellEnterEditModeKeys(event) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
-                apiRef.current.publishEvent('cellEditStart', params, event);
-              }
-
-              if (!isEditMode && isDeleteKeys(event.key)) {
-                apiRef.current.setEditCellValue({
-                  id: id,
-                  field: field,
-                  value: ''
-                });
-                apiRef.current.commitCellChange({
-                  id: id,
-                  field: field
-                }, event);
-                apiRef.current.publishEvent('cellEditStop', params, event);
-              }
-
-              if (!(isEditMode && isCellEditCommitKeys(event.key))) {
-                _context.next = 16;
-                break;
-              }
-
-              commitParams = {
-                id: id,
-                field: field
-              };
-              _context.next = 13;
-              return apiRef.current.commitCellChange(commitParams, event);
-
-            case 13:
-              isValid = _context.sent;
-
-              if (isValid) {
-                _context.next = 16;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 16:
-              if (isEditMode && isCellExitEditModeKeys(event.key)) {
-                apiRef.current.publishEvent('cellEditStop', params, event);
-              }
-
-            case 17:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [apiRef]);
-  var handleCellDoubleClick = React.useCallback(function (params, event) {
-    if (!params.isEditable) {
-      return;
-    }
-
-    apiRef.current.publishEvent('cellEditStart', params, event);
-  }, [apiRef]);
-
-  var commitPropsAndExit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params, event) {
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(params.cellMode === GridCellModes.View)) {
-                _context2.next = 2;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 2:
-              _context2.next = 4;
-              return apiRef.current.commitCellChange(params, event);
-
-            case 4:
-              apiRef.current.publishEvent('cellEditStop', params, event);
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function commitPropsAndExit(_x3, _x4) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var handleCellFocusOut = useEventCallback(function (params, event) {
-    commitPropsAndExit(params, event);
-  });
-  var handleColumnHeaderDragStart = useEventCallback(function () {
-    var cell = gridFocusCellSelector(apiRef);
-
-    if (!cell) {
-      return;
-    }
-
-    var params = apiRef.current.getCellParams(cell.id, cell.field);
-    commitPropsAndExit(params, {});
-  });
-  var handleCellEditStart = React.useCallback(function (params, event) {
-    if (!params.isEditable) {
-      return;
-    }
-
-    apiRef.current.setCellMode(params.id, params.field, GridCellModes.Edit);
-
-    if (isKeyboardEvent(event) && isPrintableKey(event)) {
-      apiRef.current.unstable_setEditCellProps({
-        id: params.id,
-        field: params.field,
-        props: {
-          value: ''
-        }
-      });
-    }
-  }, [apiRef]);
-  var handleCellEditStop = React.useCallback(function (params, event) {
-    apiRef.current.setCellMode(params.id, params.field, GridCellModes.View);
-
-    if (!isKeyboardEvent(event)) {
-      return;
-    }
-
-    if (isCellEditCommitKeys(event.key)) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-      return;
-    }
-
-    if (event.key === 'Escape' || isDeleteKeys(event.key)) {
-      apiRef.current.setCellFocus(params.id, params.field);
-    }
-  }, [apiRef]);
-  var handleCellEditCommit = React.useCallback(function (params) {
-    var id = params.id,
-        field = params.field;
-    var model = apiRef.current.getEditRowsModel();
-    var value = model[id][field].value;
-    logger.debug("Setting cell id: ".concat(id, " field: ").concat(field, " to value: ").concat(value == null ? void 0 : value.toString()));
-    var row = apiRef.current.getRow(id);
-
-    if (row) {
-      var column = apiRef.current.getColumn(params.field);
-
-      var rowUpdate = _extends({}, row, _defineProperty({}, field, value));
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          row: row,
-          value: value
-        });
-      }
-
-      apiRef.current.updateRows([rowUpdate]);
-    }
-  }, [apiRef, logger]);
-  var handleEditCellPropsChange = React.useCallback(function (params) {
-    var row = apiRef.current.getRow(params.id);
-    var column = apiRef.current.getColumn(params.field);
-    var editCellProps = column.preProcessEditCellProps ? column.preProcessEditCellProps({
-      id: params.id,
-      row: row,
-      props: params.props
-    }) : params.props;
-
-    if (isPromise(editCellProps)) {
-      editCellProps.then(function (newEditCellProps) {
-        apiRef.current.unstable_setEditCellProps(_extends({}, params, {
-          props: newEditCellProps
-        }));
-      });
-    } else {
-      apiRef.current.unstable_setEditCellProps(_extends({}, params, {
-        props: editCellProps
-      }));
-    }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
-  useGridApiEventHandler(apiRef, 'cellEditStart', buildCallback(handleCellEditStart));
-  useGridApiEventHandler(apiRef, 'cellEditStop', buildCallback(handleCellEditStop));
-  useGridApiEventHandler(apiRef, 'cellEditCommit', buildCallback(handleCellEditCommit));
-  useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
-  useGridApiOptionHandler(apiRef, 'cellEditCommit', props.onCellEditCommit);
-  useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
-};

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

@@ -1,184 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { GridCellModes } from '../../../models/gridEditRowModel';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
-import { useCellEditing } from './useGridCellEditing.old';
-import { useGridRowEditing } from './useGridRowEditing.old';
-import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
-export var editingStateInitializer = function editingStateInitializer(state) {
-  return _extends({}, state, {
-    editRows: {}
-  });
-};
-/**
- * @requires useGridFocus - can be after, async only
- * @requires useGridParamsApi (method)
- * @requires useGridColumns (state)
- */
-
-export function useGridEditing(apiRef, props) {
-  var _props$experimentalFe2;
-
-  var logger = useGridLogger(apiRef, 'useGridEditRows');
-  useCellEditing(apiRef, props);
-  useGridRowEditing(apiRef, props);
-  var debounceMap = React.useRef({});
-  apiRef.current.unstable_registerControlState({
-    stateId: 'editRows',
-    propModel: props.editRowsModel,
-    propOnChange: props.onEditRowsModelChange,
-    stateSelector: gridEditRowsStateSelector,
-    changeEvent: 'editRowsModelChange'
-  });
-  var isCellEditable = React.useCallback(function (params) {
-    return !isAutoGeneratedRow(params.rowNode) && params.rowNode.type !== 'pinnedRow' && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params));
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [props.isCellEditable]);
-
-  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);
-    }
-
-    var callbackToRunImmediately = function callbackToRunImmediately() {
-      callback();
-
-      var _debounceMap$current$2 = _slicedToArray(debounceMap.current[id][field], 1),
-          timeout = _debounceMap$current$2[0];
-
-      clearTimeout(timeout);
-      delete debounceMap.current[id][field];
-    };
-
-    var timeout = setTimeout(function () {
-      callback();
-      delete debounceMap.current[id][field];
-    }, debounceMs);
-    debounceMap.current[id][field] = [timeout, callbackToRunImmediately];
-  };
-
-  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),
-            callback = _debounceMap$current$3[1];
-
-        callback();
-      });
-    } else if (debounceMap.current[id][field]) {
-      var _debounceMap$current$4 = _slicedToArray(debounceMap.current[id][field], 2),
-          callback = _debounceMap$current$4[1];
-
-      callback();
-    }
-  }, []);
-  var setEditCellValue = React.useCallback(function (params) {
-    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    maybeDebounce(params.id, params.field, params.debounceMs, function () {
-      var _props$experimentalFe;
-
-      if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
-        if (props.editMode === 'row') {
-          return apiRef.current.unstable_setRowEditingEditCellValue(params);
-        }
-
-        return apiRef.current.unstable_setCellEditingEditCellValue(params);
-      }
-
-      var newParams = {
-        id: params.id,
-        field: params.field,
-        props: {
-          value: params.value
-        }
-      };
-      return apiRef.current.publishEvent('editCellPropsChange', newParams, event);
-    });
-  }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
-  var parseValue = React.useCallback(function (id, field, value) {
-    var column = apiRef.current.getColumn(field);
-    return column.valueParser ? column.valueParser(value, apiRef.current.getCellParams(id, field)) : value;
-  }, [apiRef]);
-  var setEditCellProps = React.useCallback(function (params) {
-    var id = params.id,
-        field = params.field,
-        editProps = params.props;
-    logger.debug("Setting cell props on id: ".concat(id, " field: ").concat(field));
-    apiRef.current.setState(function (state) {
-      var editRowsModel = _extends({}, state.editRows);
-
-      editRowsModel[id] = _extends({}, state.editRows[id]);
-      editRowsModel[id][field] = _extends({}, editProps, {
-        value: parseValue(id, field, editProps.value)
-      });
-      return _extends({}, state, {
-        editRows: editRowsModel
-      });
-    });
-    apiRef.current.forceUpdate();
-    var editRowsState = gridEditRowsStateSelector(apiRef.current.state);
-    return editRowsState[id][field];
-  }, [apiRef, logger, parseValue]);
-  var setEditRowsModel = React.useCallback(function (model) {
-    var currentModel = gridEditRowsStateSelector(apiRef.current.state);
-
-    if (currentModel !== model) {
-      logger.debug("Setting editRows model");
-      apiRef.current.setState(function (state) {
-        return _extends({}, state, {
-          editRows: model
-        });
-      });
-      apiRef.current.forceUpdate();
-    }
-  }, [apiRef, logger]);
-  var getEditRowsModel = React.useCallback(function () {
-    return gridEditRowsStateSelector(apiRef.current.state);
-  }, [apiRef]);
-  var preventTextSelection = React.useCallback(function (params, event) {
-    var isMoreThanOneClick = event.detail > 1;
-
-    if (params.isEditable && params.cellMode === GridCellModes.View && isMoreThanOneClick) {
-      // If we click more than one time, then we prevent the default behavior of selecting the text cell.
-      event.preventDefault();
-    }
-  }, []);
-  useGridApiEventHandler(apiRef, 'cellMouseDown', preventTextSelection);
-  useGridApiOptionHandler(apiRef, 'editCellPropsChange', props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
-
-  var editingSharedApi = {
-    isCellEditable: isCellEditable,
-    setEditRowsModel: setEditRowsModel,
-    getEditRowsModel: getEditRowsModel,
-    setEditCellValue: setEditCellValue,
-    unstable_setEditCellProps: setEditCellProps,
-    unstable_parseValue: parseValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
-  };
-  useGridApiMethod(apiRef, editingSharedApi, 'EditRowApi');
-  React.useEffect(function () {
-    if (props.editRowsModel !== undefined) {
-      apiRef.current.setEditRowsModel(props.editRowsModel);
-    }
-  }, [apiRef, props.editRowsModel]);
-}