@mui/x-data-grid 5.4.0 → 5.6.0

package/hooks/features/editRows/useGridCellEditing.js

@@ -0,0 +1,354 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useEventCallback } from '@mui/material/utils';
+import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+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 const useCellEditing = (apiRef, props) => {
+  var _props$experimentalFe2;
+
+  const logger = useGridLogger(apiRef, 'useGridEditRows');
+
+  const buildCallback = callback => (...args) => {
+    if (props.editMode === GridEditModes.Cell) {
+      callback(...args);
+    }
+  };
+
+  const setCellMode = React.useCallback((id, field, mode) => {
+    if (apiRef.current.getCellMode(id, field) === mode) {
+      return;
+    }
+
+    logger.debug(`Switching cell id: ${id} field: ${field} to mode: ${mode}`);
+    apiRef.current.setState(state => {
+      const 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(GridEvents.cellModeChange, apiRef.current.getCellParams(id, field));
+  }, [apiRef, logger]);
+  const getCellMode = React.useCallback((id, field) => {
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+    const isEditing = editRowsState[id] && editRowsState[id][field];
+    return isEditing ? GridCellModes.Edit : GridCellModes.View;
+  }, [apiRef]); // TODO v6: it should always return a promise
+
+  const commitCellChange = React.useCallback((params, event = {}) => {
+    var _props$experimentalFe;
+
+    const {
+      id,
+      field
+    } = params;
+    apiRef.current.unstable_runPendingEditCellValueChangeDebounce(id, field);
+    const model = apiRef.current.getEditRowsModel();
+
+    if (!model[id] || !model[id][field]) {
+      throw new Error(`MUI: Cell at id: ${id} and field: ${field} is not in edit mode.`);
+    }
+
+    const editCellProps = model[id][field];
+    const column = apiRef.current.getColumn(field);
+    const row = apiRef.current.getRow(id);
+
+    if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
+      const cellProps = model[id][field];
+
+      if (cellProps.isValidating || cellProps.error) {
+        return false;
+      }
+    }
+
+    const commitParams = _extends({}, params, {
+      value: editCellProps.value
+    });
+
+    let hasError = !!editCellProps.error;
+
+    if (!hasError && typeof column.preProcessEditCellProps === 'function') {
+      const result = column.preProcessEditCellProps({
+        id,
+        row,
+        props: editCellProps
+      });
+
+      if (isPromise(result)) {
+        return result.then(newEditCellProps => {
+          apiRef.current.unstable_setEditCellProps({
+            id,
+            field,
+            props: newEditCellProps
+          });
+
+          if (newEditCellProps.error) {
+            return false;
+          }
+
+          apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+          return true;
+        });
+      }
+
+      apiRef.current.unstable_setEditCellProps({
+        id,
+        field,
+        props: result
+      });
+      hasError = !!result.error;
+    }
+
+    if (!hasError) {
+      apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+      return true;
+    }
+
+    return false;
+  }, [apiRef, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
+  const setCellEditingEditCellValue = React.useCallback(params => {
+    const column = apiRef.current.getColumn(params.field);
+    const row = apiRef.current.getRow(params.id);
+    return new Promise(resolve => {
+      let newEditCellProps = {
+        value: params.value
+      };
+      const model = apiRef.current.getEditRowsModel();
+      const 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,
+        props: _extends({}, newEditCellProps, {
+          value: apiRef.current.unstable_parseValue(params.id, params.field, params.value)
+        })
+      })).then(newEditCellPropsProcessed => {
+        apiRef.current.unstable_setEditCellProps(_extends({}, params, {
+          props: _extends({}, newEditCellPropsProcessed, {
+            isValidating: false
+          })
+        }));
+        resolve(!newEditCellPropsProcessed.error);
+      });
+    });
+  }, [apiRef]);
+  const cellEditingApi = {
+    setCellMode,
+    getCellMode,
+    commitCellChange,
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+  };
+  useGridApiMethod(apiRef, cellEditingApi, 'EditRowApi');
+  const handleCellKeyDown = React.useCallback(async (params, event) => {
+    const {
+      id,
+      field,
+      cellMode,
+      isEditable
+    } = params;
+
+    if (!isEditable) {
+      return;
+    }
+
+    const isEditMode = cellMode === GridCellModes.Edit;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+
+    if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
+      apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+    }
+
+    if (!isEditMode && isDeleteKeys(event.key)) {
+      apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: ''
+      });
+      apiRef.current.commitCellChange({
+        id,
+        field
+      }, event);
+      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+    }
+
+    if (isEditMode && isCellEditCommitKeys(event.key)) {
+      const commitParams = {
+        id,
+        field
+      };
+      const isValid = await apiRef.current.commitCellChange(commitParams, event);
+
+      if (!isValid) {
+        return;
+      }
+    }
+
+    if (isEditMode && isCellExitEditModeKeys(event.key)) {
+      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+    }
+  }, [apiRef]);
+  const handleCellDoubleClick = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+  }, [apiRef]);
+
+  const commitPropsAndExit = async (params, event) => {
+    if (params.cellMode === GridCellModes.View) {
+      return;
+    }
+
+    await apiRef.current.commitCellChange(params, event);
+    apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+  };
+
+  const handleCellFocusOut = useEventCallback((params, event) => {
+    commitPropsAndExit(params, event);
+  });
+  const handleColumnHeaderDragStart = useEventCallback(() => {
+    const cell = gridFocusCellSelector(apiRef);
+
+    if (!cell) {
+      return;
+    }
+
+    const params = apiRef.current.getCellParams(cell.id, cell.field);
+    commitPropsAndExit(params, {});
+  });
+  const handleCellEditStart = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    apiRef.current.setCellMode(params.id, params.field, GridCellModes.Edit);
+
+    if (isKeyboardEvent(event) && isPrintableKey(event.key)) {
+      apiRef.current.unstable_setEditCellProps({
+        id: params.id,
+        field: params.field,
+        props: {
+          value: ''
+        }
+      });
+    }
+  }, [apiRef]);
+  const handleCellEditStop = React.useCallback((params, event) => {
+    apiRef.current.setCellMode(params.id, params.field, GridCellModes.View);
+
+    if (!isKeyboardEvent(event)) {
+      return;
+    }
+
+    if (isCellEditCommitKeys(event.key)) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      return;
+    }
+
+    if (event.key === 'Escape' || isDeleteKeys(event.key)) {
+      apiRef.current.setCellFocus(params.id, params.field);
+    }
+  }, [apiRef]);
+  const handleCellEditCommit = React.useCallback(params => {
+    const {
+      id,
+      field
+    } = params;
+    const model = apiRef.current.getEditRowsModel();
+    const {
+      value
+    } = model[id][field];
+    logger.debug(`Setting cell id: ${id} field: ${field} to value: ${value == null ? void 0 : value.toString()}`);
+    const row = apiRef.current.getRow(id);
+
+    if (row) {
+      const column = apiRef.current.getColumn(params.field);
+
+      let rowUpdate = _extends({}, row, {
+        [field]: value
+      });
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          row,
+          value
+        });
+      }
+
+      apiRef.current.updateRows([rowUpdate]);
+    }
+  }, [apiRef, logger]);
+  const handleEditCellPropsChange = React.useCallback(params => {
+    const row = apiRef.current.getRow(params.id);
+    const column = apiRef.current.getColumn(params.field);
+    const editCellProps = column.preProcessEditCellProps ? column.preProcessEditCellProps({
+      id: params.id,
+      row,
+      props: params.props
+    }) : params.props;
+
+    if (isPromise(editCellProps)) {
+      editCellProps.then(newEditCellProps => {
+        apiRef.current.unstable_setEditCellProps(_extends({}, params, {
+          props: newEditCellProps
+        }));
+      });
+    } else {
+      apiRef.current.unstable_setEditCellProps(_extends({}, params, {
+        props: editCellProps
+      }));
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
+  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, buildCallback(handleCellEditStart));
+  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, buildCallback(handleCellEditStop));
+  useGridApiEventHandler(apiRef, GridEvents.cellEditCommit, buildCallback(handleCellEditCommit));
+  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
+  useGridApiOptionHandler(apiRef, GridEvents.cellEditCommit, props.onCellEditCommit);
+  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
+  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * @requires useGridFocus - can be after, async only
+ * @requires useGridParamsApi (method)
+ * @requires useGridColumns (state)
+ */
+export declare function useGridEditing(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editRowsModel' | 'onEditRowsModelChange' | 'isCellEditable' | 'onEditCellPropsChange' | 'editMode' | 'onRowEditCommit' | 'onRowEditStart' | 'onRowEditStop' | 'onCellEditCommit' | 'onCellEditStart' | 'onCellEditStop' | 'experimentalFeatures'>): void;

package/hooks/features/editRows/useGridEditing.js

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { useGridStateInit } from '../../utils/useGridStateInit';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useCellEditing } from './useGridCellEditing';
+import { useGridRowEditing } from './useGridRowEditing';
+/**
+ * @requires useGridFocus - can be after, async only
+ * @requires useGridParamsApi (method)
+ * @requires useGridColumns (state)
+ */
+
+export function useGridEditing(apiRef, props) {
+  var _props$experimentalFe2;
+
+  const logger = useGridLogger(apiRef, 'useGridEditRows');
+  useCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  useGridStateInit(apiRef, state => _extends({}, state, {
+    editRows: {}
+  }));
+  const debounceMap = React.useRef({});
+  apiRef.current.unstable_updateControlState({
+    stateId: 'editRows',
+    propModel: props.editRowsModel,
+    propOnChange: props.onEditRowsModelChange,
+    stateSelector: gridEditRowsStateSelector,
+    changeEvent: GridEvents.editRowsModelChange
+  });
+  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.isCellEditable]);
+
+  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);
+    }
+
+    const callbackToRunImmediately = () => {
+      callback();
+      const [timeout] = debounceMap.current[id][field];
+      clearTimeout(timeout);
+      delete debounceMap.current[id][field];
+    };
+
+    const timeout = setTimeout(() => {
+      callback();
+      delete debounceMap.current[id][field];
+    }, debounceMs);
+    debounceMap.current[id][field] = [timeout, callbackToRunImmediately];
+  };
+
+  const runPendingEditCellValueChangeDebounce = React.useCallback((id, field) => {
+    if (!debounceMap.current[id]) {
+      return;
+    }
+
+    if (!field) {
+      Object.keys(debounceMap.current[id]).forEach(debouncedField => {
+        const [, callback] = debounceMap.current[id][debouncedField];
+        callback();
+      });
+    } else if (debounceMap.current[id][field]) {
+      const [, callback] = debounceMap.current[id][field];
+      callback();
+    }
+  }, []);
+  const setEditCellValue = React.useCallback((params, event = {}) => {
+    maybeDebounce(params.id, params.field, params.debounceMs, () => {
+      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);
+      }
+
+      const newParams = {
+        id: params.id,
+        field: params.field,
+        props: {
+          value: params.value
+        }
+      };
+      return apiRef.current.publishEvent(GridEvents.editCellPropsChange, newParams, event);
+    });
+  }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
+  const parseValue = React.useCallback((id, field, value) => {
+    const column = apiRef.current.getColumn(field);
+    return column.valueParser ? column.valueParser(value, apiRef.current.getCellParams(id, field)) : value;
+  }, [apiRef]);
+  const setEditCellProps = React.useCallback(params => {
+    const {
+      id,
+      field,
+      props: editProps
+    } = params;
+    logger.debug(`Setting cell props on id: ${id} field: ${field}`);
+    apiRef.current.setState(state => {
+      const 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();
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+    return editRowsState[id][field];
+  }, [apiRef, logger, parseValue]);
+  const setEditRowsModel = React.useCallback(model => {
+    const currentModel = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (currentModel !== model) {
+      logger.debug(`Setting editRows model`);
+      apiRef.current.setState(state => _extends({}, state, {
+        editRows: model
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const getEditRowsModel = React.useCallback(() => gridEditRowsStateSelector(apiRef.current.state), [apiRef]);
+  const preventTextSelection = React.useCallback((params, event) => {
+    const 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, GridEvents.cellMouseDown, preventTextSelection);
+  useGridApiOptionHandler(apiRef, GridEvents.editCellPropsChange, props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
+
+  const editingSharedApi = {
+    isCellEditable,
+    setEditRowsModel,
+    getEditRowsModel,
+    setEditCellValue,
+    unstable_setEditCellProps: setEditCellProps,
+    unstable_parseValue: parseValue,
+    unstable_runPendingEditCellValueChangeDebounce: runPendingEditCellValueChangeDebounce
+  };
+  useGridApiMethod(apiRef, editingSharedApi, 'EditRowApi');
+  React.useEffect(() => {
+    if (props.editRowsModel !== undefined) {
+      apiRef.current.setEditRowsModel(props.editRowsModel);
+    }
+  }, [apiRef, props.editRowsModel]);
+}

package/hooks/features/editRows/useGridRowEditing.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' | 'onRowEditCommit' | 'onRowEditStart' | 'onRowEditStop' | 'experimentalFeatures'>) => void;