Promote editor2

CHANGELOG.md

@@ -26,7 +26,8 @@
   - `column.minWidth`
   - `column.maxWidth`
   - `column.headerCellClass`
-  - `column.editor2`
+  - `column.editor`
+    - New API
   - `column.editorOptions`
     - More info in [#2102](https://github.com/adazzle/react-data-grid/pull/2102)
   - `column.groupFormatter`

src/Cell.test.tsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 
 import Cell from './Cell';
 import helpers, { Row } from './test/GridPropHelpers';
-import { SimpleCellFormatter } from './formatters';
+import { ValueFormatter } from './formatters';
 import { CalculatedColumn, CellRendererProps, FormatterProps } from './types';
 import EventBus from './EventBus';
 
@@ -15,7 +15,7 @@ const defaultColumn: CalculatedColumn<Row> = {
   left: 0,
   resizable: false,
   sortable: false,
-  formatter: SimpleCellFormatter
+  formatter: ValueFormatter
 };
 
 const testProps: CellRendererProps<Row> = {
@@ -34,12 +34,6 @@ const renderComponent = (extraProps?: PropsWithChildren<Partial<CellRendererProp
 };
 
 describe('Cell', () => {
-  it('should render a SimpleCellFormatter with value', () => {
-    const wrapper = renderComponent();
-    const formatter = wrapper.find(SimpleCellFormatter);
-    expect(formatter.props().row[defaultColumn.key]).toStrictEqual('Wicklow');
-  });
-
   it('should render a custom formatter when specified on column', () => {
     const CustomFormatter = (props: FormatterProps) => <div>{props.row[props.column.key]}</div>;
 

src/DataGrid.tsx

@@ -93,10 +93,9 @@ export interface DataGridProps<R, SR = unknown> extends SharedDivProps {
   /**
    * Callback called whenever row data is updated
    * When editing is enabled, this callback will be called for the following scenarios
-   * 1. Using the supplied editor of the column. The default editor is the SimpleTextEditor.
-   * 2. Copy/pasting the value from one cell to another <kbd>CTRL</kbd>+<kbd>C</kbd>, <kbd>CTRL</kbd>+<kbd>V</kbd>
-   * 3. Update multiple cells by dragging the fill handle of a cell up or down to a destination cell.
-   * 4. Update all cells under a given cell by double clicking the cell's fill handle.
+   * 1. Copy/pasting the value from one cell to another <kbd>CTRL</kbd>+<kbd>C</kbd>, <kbd>CTRL</kbd>+<kbd>V</kbd>
+   * 2. Update multiple cells by dragging the fill handle of a cell up or down to a destination cell.
+   * 3. Update all cells under a given cell by double clicking the cell's fill handle.
    */
   onRowsUpdate?: <E extends RowsUpdateEvent>(event: E) => void;
   onRowsChange?: (rows: R[]) => void;
@@ -481,9 +480,9 @@ function DataGrid<R, SR>({
     closeEditor();
   }
 
-  function commitEditor2Changes() {
+  function commitEditorChanges() {
     if (
-      columns[selectedPosition.idx]?.editor2 === undefined
+      columns[selectedPosition.idx]?.editor === undefined
       || selectedPosition.mode === 'SELECT'
       || selectedPosition.row === selectedPosition.originalRow) {
       return;
@@ -535,7 +534,7 @@ function DataGrid<R, SR>({
     if (selectedPosition.mode === 'EDIT') {
       if (key === 'Enter') {
         // Custom editors can listen for the event and stop propagation to prevent commit
-        commitEditor2Changes();
+        commitEditorChanges();
         closeEditor();
       }
       return;
@@ -626,7 +625,7 @@ function DataGrid<R, SR>({
 
   function handleOnClose(commitChanges?: boolean) {
     if (commitChanges) {
-      commitEditor2Changes();
+      commitEditorChanges();
     }
     closeEditor();
   }
@@ -645,7 +644,7 @@ function DataGrid<R, SR>({
 
   function selectCell(position: Position, enableEditor = false): void {
     if (!isCellWithinBounds(position)) return;
-    commitEditor2Changes();
+    commitEditorChanges();
 
     if (enableEditor && isCellEditable(position)) {
       const row = rows[position.rowIdx] as R;
@@ -802,7 +801,7 @@ function DataGrid<R, SR>({
           onCommit: handleCommit,
           onCommitCancel: closeEditor
         },
-        editor2Props: {
+        editorProps: {
           rowHeight,
           row: selectedPosition.row,
           onRowChange: handleRowChange,
@@ -963,6 +962,4 @@ function DataGrid<R, SR>({
   );
 }
 
-export default forwardRef(
-  DataGrid as React.ForwardRefRenderFunction<DataGridHandle>
-) as <R, SR = unknown>(props: DataGridProps<R, SR> & React.RefAttributes<DataGridHandle>) => JSX.Element;
+export default forwardRef(DataGrid) as <R, SR = unknown>(props: DataGridProps<R, SR> & React.RefAttributes<DataGridHandle>) => JSX.Element;

src/EditCell.tsx

@@ -1,33 +1,32 @@
-import React, { forwardRef, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import clsx from 'clsx';
 
-import { EditorContainer, EditorContainer2, EditorPortal } from './editors';
-import { CellRendererProps, SharedEditorContainerProps, SharedEditor2Props } from './types';
-import { useCombinedRefs } from './hooks';
+import EditorContainer from './editors/EditorContainer';
+import { CellRendererProps, SharedEditorContainerProps, SharedEditorProps } from './types';
 
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>,
-| 'rowIdx'
-| 'row'
-| 'column'
+  | 'rowIdx'
+  | 'row'
+  | 'column'
 >;
 
 interface EditCellRendererProps<R, SR> extends SharedCellRendererProps<R, SR>, Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   editorPortalTarget: Element;
   editorContainerProps: SharedEditorContainerProps;
-  editor2Props: SharedEditor2Props<R>;
+  editorProps: SharedEditorProps<R>;
 }
 
-function EditCell<R, SR>({
+export default function EditCell<R, SR>({
   className,
   column,
   row,
   rowIdx,
   editorPortalTarget,
   editorContainerProps,
-  editor2Props,
+  editorProps,
   onKeyDown,
   ...props
-}: EditCellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
+}: EditCellRendererProps<R, SR>) {
   const [dimensions, setDimensions] = useState<{ left: number; top: number } | null>(null);
 
   const cellRef = useCallback(node => {
@@ -57,47 +56,24 @@ function EditCell<R, SR>({
     const gridLeft = left + docLeft;
     const gridTop = top + docTop;
 
-    if (column.editor2 !== undefined) {
-      return (
-        <EditorContainer2
-          {...editor2Props}
-          editorPortalTarget={editorPortalTarget}
-          rowIdx={rowIdx}
-          column={column}
-          left={gridLeft}
-          top={gridTop}
-        />
-      );
-    }
-
-    const editor = (
-      <EditorContainer<R, SR>
-        {...editorContainerProps}
+    return (
+      <EditorContainer
+        {...editorProps}
+        editorPortalTarget={editorPortalTarget}
         rowIdx={rowIdx}
-        row={row}
         column={column}
         left={gridLeft}
         top={gridTop}
       />
     );
-
-    if (column.editorOptions?.createPortal !== false) {
-      return (
-        <EditorPortal target={editorPortalTarget}>
-          {editor}
-        </EditorPortal>
-      );
-    }
-
-    return editor;
   }
 
   return (
     <div
       role="gridcell"
       aria-colindex={column.idx + 1} // aria-colindex is 1-based
       aria-selected
-      ref={useCombinedRefs(cellRef, ref)}
+      ref={cellRef}
       className={className}
       style={{
         width: column.width,
@@ -110,5 +86,3 @@ function EditCell<R, SR>({
     </div>
   );
 }
-
-export default forwardRef(EditCell) as <R, SR = unknown>(props: EditCellRendererProps<R, SR> & React.RefAttributes<HTMLDivElement>) => JSX.Element;

src/Row.tsx

@@ -63,7 +63,7 @@ function Row<R, SR = unknown>({
               onKeyDown={selectedCellProps.onKeyDown}
               editorPortalTarget={selectedCellProps.editorPortalTarget}
               editorContainerProps={selectedCellProps.editorContainerProps}
-              editor2Props={selectedCellProps.editor2Props}
+              editorProps={selectedCellProps.editorProps}
             />
           );
         }