[DataGrid] Implement base foundation for editing a cell

packages/grid/_modules_/grid/GridComponent.tsx

@@ -22,6 +22,7 @@ import { useGridState } from './hooks/features/core/useGridState';
 import { useGridPagination } from './hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel } from './hooks/features/preferencesPanel/useGridPreferencesPanel';
 import { useGridRows } from './hooks/features/rows/useGridRows';
+import { useGridEditRows } from './hooks/features/rows/useGridEditRows';
 import { useGridSorting } from './hooks/features/sorting/useGridSorting';
 import { useGridApiRef } from './hooks/features/useGridApiRef';
 import { useGridColumnReorder } from './hooks/features/columnReorder';
@@ -75,6 +76,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
 
     useGridColumns(props.columns, apiRef);
     useGridRows(apiRef, props.rows, props.getRowId);
+    useGridEditRows(apiRef);
     useGridKeyboard(rootContainerRef, apiRef);
     useGridSelection(apiRef);
     useGridSorting(apiRef, props.rows);

packages/grid/_modules_/grid/components/GridCell.tsx

@@ -5,18 +5,19 @@ import { GRID_CELL_CSS_CLASS } from '../constants/cssClassesConstants';
 import { classnames } from '../utils';
 
 export interface GridCellProps {
+  align: GridAlignment;
+  colIndex?: number;
+  cssClass?: string;
   field?: string;
-  value?: GridCellValue;
   formattedValue?: GridCellValue;
-  width: number;
+  hasFocus?: boolean;
   height: number;
+  isEditable?: boolean;
+  rowIndex?: number;
   showRightBorder?: boolean;
-  hasFocus?: boolean;
-  align: GridAlignment;
-  cssClass?: string;
   tabIndex?: number;
-  colIndex?: number;
-  rowIndex?: number;
+  value?: GridCellValue;
+  width: number;
 }
 
 export const GridCell: React.FC<GridCellProps> = React.memo((props) => {
@@ -25,15 +26,16 @@ export const GridCell: React.FC<GridCellProps> = React.memo((props) => {
     children,
     colIndex,
     cssClass,
-    hasFocus,
     field,
     formattedValue,
+    hasFocus,
+    height,
+    isEditable,
     rowIndex,
     showRightBorder,
     tabIndex,
     value,
     width,
-    height,
   } = props;
 
   const valueToRender = formattedValue || value;
@@ -50,11 +52,13 @@ export const GridCell: React.FC<GridCellProps> = React.memo((props) => {
       ref={cellRef}
       className={classnames(GRID_CELL_CSS_CLASS, cssClass, `MuiDataGrid-cell${capitalize(align)}`, {
         'MuiDataGrid-withBorder': showRightBorder,
+        'MuiDataGrid-cellEditable': isEditable,
       })}
       role="cell"
       data-value={value}
       data-field={field}
       data-rowindex={rowIndex}
+      data-editable={isEditable}
       aria-colindex={colIndex}
       style={{
         minWidth: width,

packages/grid/_modules_/grid/components/GridRowCells.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { gridEditRowsStateSelector } from '../hooks/features/rows/gridEditRowsSelector';
 import {
   GridCellClassParams,
   GridColumns,
@@ -51,6 +52,7 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
   } = props;
   const api = React.useContext(GridApiContext);
   const rowHeight = useGridSelector(api, gridDensityRowHeightSelector);
+  const editRowsState = useGridSelector(api, gridEditRowsStateSelector);
 
   const cellsProps = columns.slice(firstColIdx, lastColIdx + 1).map((column, colIdx) => {
     const isLastColumn = firstColIdx + colIdx === columns.length - 1;
@@ -66,6 +68,7 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
       rowModel: row,
       colDef: column,
       rowIndex,
+      colIndex: colIdx,
       value,
       api: api!.current!,
     });
@@ -84,11 +87,8 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
       cssClassProp = { cssClass: `${cssClassProp.cssClass} ${cssClass}` };
     }
 
+    const editCellState = editRowsState[row.id] && editRowsState[row.id][column.field];
     let cellComponent: React.ReactElement | null = null;
-    if (column.renderCell) {
-      cellComponent = column.renderCell(cellParams);
-      cssClassProp = { cssClass: `${cssClassProp.cssClass} MuiDataGrid-cellWithRenderer` };
-    }
 
     if (column.valueGetter) {
       // Value getter override the original value
@@ -98,9 +98,21 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
 
     let formattedValueProp = {};
     if (column.valueFormatter) {
+      // TODO add formatted value to cellParams?
       formattedValueProp = { formattedValue: column.valueFormatter(cellParams) };
     }
 
+    if (editCellState == null && column.renderCell) {
+      cellComponent = column.renderCell(cellParams);
+      cssClassProp = { cssClass: `${cssClassProp.cssClass} MuiDataGrid-cellWithRenderer` };
+    }
+
+    if (editCellState != null && column.renderEditCell) {
+      const params = { ...cellParams, ...editCellState };
+      cellComponent = column.renderEditCell(params);
+      cssClassProp = { cssClass: `${cssClassProp.cssClass} MuiDataGrid-cellEditing` };
+    }
+
     const cellProps: GridCellProps & { children: any } = {
       value,
       field: column.field,
@@ -114,6 +126,7 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
       rowIndex,
       colIndex: colIdx + firstColIdx,
       children: cellComponent,
+      isEditable: cellParams.isEditable,
       hasFocus:
         cellFocus !== null &&
         cellFocus.rowIndex === rowIndex &&

packages/grid/_modules_/grid/components/editCell/EditInputCell.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import InputBase, { InputBaseProps } from '@material-ui/core/InputBase';
+import { GridCellParams } from '../../models/params/gridCellParams';
+import { formatDateToLocalInputDate, isDate, mapColDefTypeToInputType } from '../../utils/utils';
+import { GridEditRowUpdate } from '../../models/gridEditRowModel';
+import { GridEditRowApi } from '../../models/api/gridEditRowApi';
+
+export function EditInputCell(props: GridCellParams & InputBaseProps) {
+  const {
+    value,
+    api,
+    field,
+    row,
+    colDef,
+    getValue,
+    rowIndex,
+    colIndex,
+    isEditable,
+    ...inputBaseProps
+  } = props;
+
+  const editRowApi = api as GridEditRowApi;
+  const caretRafRef = React.useRef(0);
+  React.useEffect(() => {
+    return () => {
+      cancelAnimationFrame(caretRafRef.current);
+    };
+  }, []);
+
+  const keepCaretPosition = React.useCallback((event) => {
+    // Fix caret from jumping to the end of the input
+    const caret = event.target.selectionStart;
+    const element = event.target;
+    caretRafRef.current = window.requestAnimationFrame(() => {
+      element.selectionStart = caret;
+      element.selectionEnd = caret;
+    });
+  }, []);
+
+  const onValueChange = React.useCallback(
+    (event) => {
+      if (colDef.type === 'string') {
+        keepCaretPosition(event);
+      }
+      const newValue = event.target.value;
+      const update: GridEditRowUpdate = {};
+      update[field] = {
+        value: colDef.type === 'date' || colDef.type === 'dateTime' ? new Date(newValue) : newValue,
+      };
+      editRowApi.setEditCellProps(row.id, update);
+    },
+    [editRowApi, colDef.type, field, keepCaretPosition, row.id],
+  );
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (!inputBaseProps.error && event.key === 'Enter') {
+        const update: GridEditRowUpdate = {};
+        update[field] = { value };
+        editRowApi.commitCellChange(row.id, update);
+      }
+
+      if (event.key === 'Escape') {
+        editRowApi.setCellMode(row.id, field, 'view');
+      }
+    },
+    [inputBaseProps.error, row.id, field, value, editRowApi],
+  );
+
+  const inputType = mapColDefTypeToInputType(colDef.type);
+  const formattedValue =
+    value && isDate(value)
+      ? formatDateToLocalInputDate({ value, withTime: colDef.type === 'dateTime' })
+      : value;
+
+  return (
+    <InputBase
+      autoFocus
+      onKeyDown={onKeyDown}
+      value={formattedValue}
+      onChange={onValueChange}
+      type={inputType}
+      style={{ width: '100%' }}
+      {...inputBaseProps}
+    />
+  );
+}
+export const renderEditInputCell = (params) => <EditInputCell {...params} />;

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -1,6 +1,7 @@
 // Web standard events
 export const GRID_RESIZE = 'resize';
 export const GRID_CLICK = 'click';
+export const GRID_DOUBLE_CLICK = 'dblclick';
 export const GRID_MOUSE_HOVER = 'mouseover';
 export const GRID_FOCUS_OUT = 'focusout';
 export const GRID_KEYDOWN = 'keydown';
@@ -9,12 +10,18 @@ export const GRID_SCROLL = 'scroll';
 export const GRID_DRAGEND = 'dragend';
 
 // XGRID events
+export const GRID_CELL_CHANGE = 'cellChange';
+export const GRID_CELL_CHANGE_COMMITTED = 'cellChangeCommitted';
+export const GRID_CELL_MODE_CHANGE = 'cellModeChange';
+export const GRID_EDIT_ROW_MODEL_CHANGE = 'editRowModelChange';
 export const GRID_COMPONENT_ERROR = 'componentError';
 export const GRID_UNMOUNT = 'unmount';
 export const GRID_ELEMENT_FOCUS_OUT = 'gridFocusOut';
 export const GRID_CELL_CLICK = 'cellClick';
+export const GRID_DOUBLE_CELL_CLICK = 'doubleCellClick';
 export const GRID_CELL_HOVER = 'cellHover';
 export const GRID_ROW_CLICK = 'rowClick';
+export const GRID_DOUBLE_ROW_CLICK = 'doubleRowClick';
 export const GRID_ROW_HOVER = 'rowHover';
 export const GRID_ROW_SELECTED = 'rowSelected';
 export const GRID_SELECTION_CHANGED = 'selectionChange';

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -4,6 +4,7 @@ import {
   GridScrollBarState,
   GridViewportSizeState,
 } from '../../../models/gridContainerProps';
+import { GridEditRowsModel } from '../../../models/gridEditRowModel';
 import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../../models/gridOptions';
 import { ColumnMenuState } from '../columnMenu/columnMenuState';
 import {
@@ -32,6 +33,7 @@ import {
 
 export interface GridState {
   rows: InternalGridRowsState;
+  editRows: GridEditRowsModel;
   pagination: PaginationState;
   options: GridOptions;
   isScrolling: boolean;
@@ -53,6 +55,7 @@ export interface GridState {
 
 export const getInitialGridState: () => GridState = () => ({
   rows: getInitialGridRowState(),
+  editRows: {},
   pagination: GRID_INITIAL_PAGINATION_STATE,
   options: DEFAULT_GRID_OPTIONS,
   isScrolling: false,

packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts

@@ -12,6 +12,7 @@ import { GridCellIndexCoordinates } from '../../../models/gridCell';
 import {
   findParentElementFromClassName,
   getIdFromRowElem,
+  getRowEl,
   isGridCellRoot,
 } from '../../../utils/domUtils';
 import {
@@ -211,10 +212,7 @@ export const useGridKeyboard = (
   );
 
   const handleCopy = React.useCallback(() => {
-    const rowEl = findParentElementFromClassName(
-      document.activeElement as HTMLDivElement,
-      GRID_ROW_CSS_CLASS,
-    )! as HTMLElement;
+    const rowEl = getRowEl(document.activeElement)!;
     const rowId = getIdFromRowElem(rowEl);
     const isRowSelected = selectionState[rowId];
 

packages/grid/_modules_/grid/hooks/features/rows/gridEditRowsSelector.ts

@@ -0,0 +1,3 @@
+import { GridState } from '../core/gridState';
+
+export const gridEditRowsStateSelector = (state: GridState) => state.editRows;

packages/grid/_modules_/grid/hooks/features/rows/index.ts

@@ -1,3 +1,5 @@
 export * from './gridRowsSelector';
 export * from './gridRowsState';
 export * from './useGridRows';
+export * from './gridEditRowsSelector';
+export * from './useGridEditRows';