From a5174a7fb5b4fd8117901b01228fcb73a1af0e37 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 4 Sep 2020 17:59:18 +0100 Subject: [PATCH 01/33] editor -> _old_editor --- src/editors/EditorContainer.tsx | 4 ++-- src/types.ts | 3 ++- src/utils/columnUtils.ts | 2 +- stories/demos/AllFeatures.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/editors/EditorContainer.tsx b/src/editors/EditorContainer.tsx index d8b4ff7879..339e5a3fbe 100644 --- a/src/editors/EditorContainer.tsx +++ b/src/editors/EditorContainer.tsx @@ -142,9 +142,9 @@ export default function EditorContainer({ function createEditor() { // return custom column editor or SimpleEditor if none specified - if (column.editor) { + if (column._old_editor) { return ( - { /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */ sortDescendingFirst?: boolean; /** Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable */ - editor?: React.ComponentType>; editor2?: React.ComponentType>; + /** @deprecated */ + _old_editor?: React.ComponentType>; editorOptions?: { /** Default: true for editor1 and false for editor2 */ createPortal?: boolean; diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts index fa016e4ded..b2c3fb2e65 100644 --- a/src/utils/columnUtils.ts +++ b/src/utils/columnUtils.ts @@ -164,7 +164,7 @@ export function canEdit(column: Column, row: R): boolean { if (typeof column.editable === 'function') { return column.editable(row); } - return Boolean(column.editor || column.editor2 || column.editable); + return Boolean(column._old_editor || column.editor2 || column.editable); } export function getColumnScrollPosition(columns: readonly CalculatedColumn[], idx: number, currentScrollLeft: number, currentClientWidth: number): number { diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx index 9ec3ba336c..4af57fd374 100644 --- a/stories/demos/AllFeatures.tsx +++ b/stories/demos/AllFeatures.tsx @@ -100,7 +100,7 @@ export default function AllFeatures() { { key: 'title', name: 'Title', - editor: React.forwardRef((props, ref) => ), + _old_editor: React.forwardRef((props, ref) => ), width: 200, resizable: true, formatter(props) { From ae59dd1fe7c5d039fd11c77301578b603ff53bcc Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 4 Sep 2020 18:02:41 +0100 Subject: [PATCH 02/33] fix types --- src/editors/EditorContainer.test.tsx | 4 ++-- src/utils/columnUtils.test.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/editors/EditorContainer.test.tsx b/src/editors/EditorContainer.test.tsx index 8c99aa3b7a..a1b8ea99f3 100644 --- a/src/editors/EditorContainer.test.tsx +++ b/src/editors/EditorContainer.test.tsx @@ -117,7 +117,7 @@ describe('EditorContainer', () => { function innerSetup() { return setup({ - column: { ...fakeColumn, key: 'col2', editor: TestEditor } + column: { ...fakeColumn, key: 'col2', _old_editor: TestEditor } }); } @@ -186,7 +186,7 @@ describe('EditorContainer', () => { function innerSetup() { const container = document.createElement('div'); document.body.appendChild(container); - const setupResult = setup({ column: { ...fakeColumn, editor: PortalTestEditor } }, { attachTo: container }); + const setupResult = setup({ column: { ...fakeColumn, _old_editor: PortalTestEditor } }, { attachTo: container }); return { container, ...setupResult }; } diff --git a/src/utils/columnUtils.test.ts b/src/utils/columnUtils.test.ts index a285755bd0..d9ec7bcfa8 100644 --- a/src/utils/columnUtils.test.ts +++ b/src/utils/columnUtils.test.ts @@ -154,13 +154,13 @@ describe('canEdit', () => { it('should return correct booleans', () => { const row: Row = { id: 1 }; - const editor = () => null; + const _old_editor = () => null; expect(canEdit(column, row)).toBe(false); expect(canEdit({ ...column, editable: false }, row)).toBe(false); expect(canEdit({ ...column, editable: true }, row)).toBe(true); - expect(canEdit({ ...column, editor }, row)).toBe(true); - expect(canEdit({ ...column, editor, editable: false }, row)).toBe(true); - expect(canEdit({ ...column, editor, editable: true }, row)).toBe(true); + expect(canEdit({ ...column, _old_editor }, row)).toBe(true); + expect(canEdit({ ...column, _old_editor, editable: false }, row)).toBe(true); + expect(canEdit({ ...column, _old_editor, editable: true }, row)).toBe(true); }); }); From bf3efe369445deff9c5a383f16c92afafb48c8e9 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 4 Sep 2020 18:16:36 +0100 Subject: [PATCH 03/33] editor2 -> editor --- src/DataGrid.tsx | 12 ++++++------ src/EditCell.tsx | 16 ++++++++-------- src/Row.tsx | 2 +- src/editors/Editor2Container.tsx | 10 +++++----- ...iner.test.tsx => OldEditorContainer.test.tsx} | 8 ++++---- ...ditorContainer.tsx => OldEditorContainer.tsx} | 2 +- src/editors/SimpleTextEditor.tsx | 4 ++-- src/editors/index.ts | 4 ++-- src/types.ts | 16 ++++++++-------- src/utils/columnUtils.ts | 2 +- stories/demos/CommonFeatures.tsx | 4 ++-- .../demos/components/Editors/DropDownEditor.tsx | 4 ++-- 12 files changed, 42 insertions(+), 42 deletions(-) rename src/editors/{EditorContainer.test.tsx => OldEditorContainer.test.tsx} (95%) rename src/editors/{EditorContainer.tsx => OldEditorContainer.tsx} (98%) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 4b170effea..08665d9478 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -478,9 +478,9 @@ function DataGrid({ closeEditor(); } - function commitEditor2Changes() { + function commitEditorChanges() { if ( - columns[selectedPosition.idx]?.editor2 === undefined + columns[selectedPosition.idx]?.editor === undefined || selectedPosition.mode === 'SELECT' || selectedPosition.row === selectedPosition.originalRow) { return; @@ -532,7 +532,7 @@ function DataGrid({ if (selectedPosition.mode === 'EDIT') { if (key === 'Enter') { // Custom editors can listen for the event and stop propagation to prevent commit - commitEditor2Changes(); + commitEditorChanges(); closeEditor(); } return; @@ -623,7 +623,7 @@ function DataGrid({ function handleOnClose(commitChanges?: boolean) { if (commitChanges) { - commitEditor2Changes(); + commitEditorChanges(); } closeEditor(); } @@ -642,7 +642,7 @@ function DataGrid({ function selectCell(position: Position, enableEditor = false): void { if (!isCellWithinBounds(position)) return; - commitEditor2Changes(); + commitEditorChanges(); if (enableEditor && isCellEditable(position)) { const row = rows[position.rowIdx] as R; @@ -799,7 +799,7 @@ function DataGrid({ onCommit: handleCommit, onCommitCancel: closeEditor }, - editor2Props: { + editorProps: { rowHeight, row: selectedPosition.row, onRowChange: handleRowChange, diff --git a/src/EditCell.tsx b/src/EditCell.tsx index 3fcdcb152e..9775572140 100644 --- a/src/EditCell.tsx +++ b/src/EditCell.tsx @@ -1,8 +1,8 @@ import React, { forwardRef, useState, useCallback } from 'react'; import clsx from 'clsx'; -import { EditorContainer, EditorContainer2, EditorPortal } from './editors'; -import { CellRendererProps, SharedEditorContainerProps, SharedEditor2Props } from './types'; +import { OldEditorContainer, EditorContainer, EditorPortal } from './editors'; +import { CellRendererProps, SharedEditorContainerProps, SharedEditorProps } from './types'; import { useCombinedRefs } from './hooks'; type SharedCellRendererProps = Pick, @@ -14,7 +14,7 @@ type SharedCellRendererProps = Pick, interface EditCellRendererProps extends SharedCellRendererProps, Omit, 'style' | 'children'> { editorPortalTarget: Element; editorContainerProps: SharedEditorContainerProps; - editor2Props: SharedEditor2Props; + editorProps: SharedEditorProps; } function EditCell({ @@ -24,7 +24,7 @@ function EditCell({ rowIdx, editorPortalTarget, editorContainerProps, - editor2Props, + editorProps, onKeyDown, ...props }: EditCellRendererProps, ref: React.Ref) { @@ -57,10 +57,10 @@ function EditCell({ const gridLeft = left + docLeft; const gridTop = top + docTop; - if (column.editor2 !== undefined) { + if (column.editor !== undefined) { return ( - ({ } const editor = ( - + {...editorContainerProps} rowIdx={rowIdx} row={row} diff --git a/src/Row.tsx b/src/Row.tsx index b301055ba0..169c9b2d6d 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -63,7 +63,7 @@ function Row({ onKeyDown={selectedCellProps.onKeyDown} editorPortalTarget={selectedCellProps.editorPortalTarget} editorContainerProps={selectedCellProps.editorContainerProps} - editor2Props={selectedCellProps.editor2Props} + editorProps={selectedCellProps.editorProps} /> ); } diff --git a/src/editors/Editor2Container.tsx b/src/editors/Editor2Container.tsx index b236907582..788d780c9c 100644 --- a/src/editors/Editor2Container.tsx +++ b/src/editors/Editor2Container.tsx @@ -1,22 +1,22 @@ import React from 'react'; import { createPortal } from 'react-dom'; -import { Editor2Props } from '../types'; +import { EditorProps } from '../types'; import { useClickOutside } from '../hooks'; -export default function Editor2Container({ +export default function EditorContainer({ row, column, onRowChange, editorPortalTarget, ...props -}: Editor2Props) { +}: EditorProps) { const onClickCapture = useClickOutside(() => onRowChange(row, true)); - if (column.editor2 === undefined) return null; + if (column.editor === undefined) return null; const editor = (
- { }); describe('Custom Editors', () => { - class TestEditor extends React.Component> { + class TestEditor extends React.Component> { getValue() { return undefined; } @@ -169,7 +169,7 @@ describe('EditorContainer', () => { }); describe('Custom Portal editors', () => { - class PortalTestEditor extends React.Component> { + class PortalTestEditor extends React.Component> { getValue() { return undefined; } diff --git a/src/editors/EditorContainer.tsx b/src/editors/OldEditorContainer.tsx similarity index 98% rename from src/editors/EditorContainer.tsx rename to src/editors/OldEditorContainer.tsx index 339e5a3fbe..58ef44e876 100644 --- a/src/editors/EditorContainer.tsx +++ b/src/editors/OldEditorContainer.tsx @@ -14,7 +14,7 @@ export interface EditorContainerProps extends SharedEditorContainerProps left: number; } -export default function EditorContainer({ +export default function OldEditorContainer({ rowIdx, column, row, diff --git a/src/editors/SimpleTextEditor.tsx b/src/editors/SimpleTextEditor.tsx index f8d4e18fe2..ccd60eed12 100644 --- a/src/editors/SimpleTextEditor.tsx +++ b/src/editors/SimpleTextEditor.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Editor, EditorProps } from '../types'; +import { Editor, OldEditorProps } from '../types'; -type Props = Pick, 'value' | 'column' | 'onCommit'>; +type Props = Pick, 'value' | 'column' | 'onCommit'>; export default class SimpleTextEditor extends React.Component implements Editor<{ [key: string]: string }> { private readonly input = React.createRef(); diff --git a/src/editors/index.ts b/src/editors/index.ts index 80adf056b9..114bf5aaa6 100644 --- a/src/editors/index.ts +++ b/src/editors/index.ts @@ -1,4 +1,4 @@ export { default as SimpleTextEditor } from './SimpleTextEditor'; export { default as EditorPortal } from './EditorPortal'; -export { default as EditorContainer } from './EditorContainer'; -export { default as EditorContainer2 } from './Editor2Container'; +export { default as OldEditorContainer } from './OldEditorContainer'; +export { default as EditorContainer } from './Editor2Container'; diff --git a/src/types.ts b/src/types.ts index dc58bb97aa..2dacc13679 100644 --- a/src/types.ts +++ b/src/types.ts @@ -36,11 +36,11 @@ export interface Column { /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */ sortDescendingFirst?: boolean; /** Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable */ - editor2?: React.ComponentType>; + editor?: React.ComponentType>; /** @deprecated */ - _old_editor?: React.ComponentType>; + _old_editor?: React.ComponentType>; editorOptions?: { - /** Default: true for editor1 and false for editor2 */ + /** Default: true for _old_editor and false for editor */ createPortal?: boolean; /** Default: false */ editOnClick?: boolean; @@ -48,7 +48,7 @@ export interface Column { onCellKeyDown?: (event: React.KeyboardEvent) => void; // TODO: Do we need these options // editOnDoubleClick?: boolean; - /** Default: true for editor1 and false for editor2 */ + /** Default: true for _old_editor and false for editor */ // commitOnScroll?: boolean; }; /** Header renderer for each header cell */ @@ -107,7 +107,7 @@ export interface GroupFormatterProps { toggleGroup: () => void; } -export interface EditorProps { +export interface OldEditorProps { ref: React.Ref>; column: CalculatedColumn; value: TValue; @@ -118,14 +118,14 @@ export interface EditorProps { onOverrideKeyDown: (e: KeyboardEvent) => void; } -export interface SharedEditor2Props { +export interface SharedEditorProps { row: Readonly; rowHeight: number; onRowChange: (row: Readonly, commitChanges?: boolean) => void; onClose: (commitChanges?: boolean) => void; } -export interface Editor2Props extends SharedEditor2Props { +export interface EditorProps extends SharedEditorProps { rowIdx: number; column: Readonly>; top: number; @@ -157,7 +157,7 @@ export interface EditCellProps extends SelectedCellPropsBase { mode: 'EDIT'; editorPortalTarget: Element; editorContainerProps: SharedEditorContainerProps; - editor2Props: SharedEditor2Props; + editorProps: SharedEditorProps; } export interface SelectedCellProps extends SelectedCellPropsBase { diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts index b2c3fb2e65..d995503d87 100644 --- a/src/utils/columnUtils.ts +++ b/src/utils/columnUtils.ts @@ -164,7 +164,7 @@ export function canEdit(column: Column, row: R): boolean { if (typeof column.editable === 'function') { return column.editable(row); } - return Boolean(column._old_editor || column.editor2 || column.editable); + return Boolean(column._old_editor || column.editor || column.editable); } export function getColumnScrollPosition(columns: readonly CalculatedColumn[], idx: number, currentScrollLeft: number, currentClientWidth: number): number { diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx index b70cdd17ff..360f5b2b12 100644 --- a/stories/demos/CommonFeatures.tsx +++ b/stories/demos/CommonFeatures.tsx @@ -81,7 +81,7 @@ function getColumns(countries: string[]): readonly Column[] { key: 'country', name: 'Country', width: 180, - editor2: p => ( + editor: p => ( p.onRowChange({ ...p.row, country: value }, true)} @@ -95,7 +95,7 @@ function getColumns(countries: string[]): readonly Column[] { key: 'contact', name: 'Contact', width: 160, - editor2: p => ( + editor: p => ( p.onRowChange({ ...p.row, contact: value })} diff --git a/stories/demos/components/Editors/DropDownEditor.tsx b/stories/demos/components/Editors/DropDownEditor.tsx index 88f2b6c9f1..ec8c8f9ce6 100644 --- a/stories/demos/components/Editors/DropDownEditor.tsx +++ b/stories/demos/components/Editors/DropDownEditor.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, useImperativeHandle, useRef } from 'react'; -import { Editor, EditorProps } from '../../../../src'; +import { Editor, OldEditorProps } from '../../../../src'; interface Option { id: string; @@ -8,7 +8,7 @@ interface Option { text: string; } -interface DropDownEditorProps extends EditorProps { +interface DropDownEditorProps extends OldEditorProps { options: Array
); } - -export default forwardRef(EditCell) as (props: EditCellRendererProps & React.RefAttributes) => JSX.Element; diff --git a/src/editors/SimpleTextEditor.test.tsx b/src/editors/SimpleTextEditor.test.tsx deleted file mode 100644 index d8546a2528..0000000000 --- a/src/editors/SimpleTextEditor.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import SimpleTextEditor from './SimpleTextEditor'; -import { ValueFormatter } from '../formatters'; -import { CalculatedColumn } from '../types'; - -interface Row { text: string } - -describe('SimpleTextEditor', () => { - describe('Basic tests', () => { - const fakeColumn: CalculatedColumn = { - idx: 0, - key: 'text', - name: 'name', - width: 0, - left: 0, - resizable: false, - sortable: false, - formatter: ValueFormatter - }; - const fakeBlurCb = jest.fn(); - - function setup() { - return mount( - - ); - } - - it('should pass the onBlur fuction down to the input as a prop', () => { - setup().find('input').simulate('blur'); - expect(fakeBlurCb).toHaveBeenCalled(); - }); - - it('should return the value when getValue is called', () => { - expect(setup().instance().getValue().text).toBe('This is a test'); - }); - }); -}); diff --git a/src/editors/SimpleTextEditor.tsx b/src/editors/SimpleTextEditor.tsx index ccd60eed12..f4469f9b0b 100644 --- a/src/editors/SimpleTextEditor.tsx +++ b/src/editors/SimpleTextEditor.tsx @@ -1,29 +1,18 @@ import React from 'react'; -import { Editor, OldEditorProps } from '../types'; +import { EditorProps } from '../types'; -type Props = Pick, 'value' | 'column' | 'onCommit'>; - -export default class SimpleTextEditor extends React.Component implements Editor<{ [key: string]: string }> { - private readonly input = React.createRef(); - - getInputNode() { - return this.input.current; - } - - getValue() { - return { - [this.props.column.key]: this.input.current!.value - }; - } - - render() { - return ( - - ); - } +export default function SimpleTextEditor({ + row, + column, + onRowChange, + onClose +}: EditorProps) { + return ( + onRowChange({ ...row, [column.key]: event.target.value })} + onBlur={() => onClose(true)} + /> + ); } diff --git a/src/types.ts b/src/types.ts index 2711da70ef..5432882255 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { KeyboardEvent } from 'react'; import { UpdateActions } from './enums'; import EventBus from './EventBus'; @@ -71,16 +70,6 @@ export interface Position { rowIdx: number; } -/** @deprecated */ -export interface Editor { - getInputNode: () => Element | Text | undefined | null; - getValue: () => TValue; - hasResults?: () => boolean; - isSelectOpen?: () => boolean; - validate?: (value: unknown) => boolean; - readonly disableContainerStyles?: boolean; -} - export interface FormatterProps { rowIdx: number; column: CalculatedColumn; @@ -106,18 +95,6 @@ export interface GroupFormatterProps { toggleGroup: () => void; } -/** @deprecated */ -export interface OldEditorProps { - ref: React.Ref>; - column: CalculatedColumn; - value: TValue; - row: TRow; - height: number; - onCommit: () => void; - onCommitCancel: () => void; - onOverrideKeyDown: (e: KeyboardEvent) => void; -} - export interface SharedEditorProps { row: Readonly; rowHeight: number; diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx index 22a520b52f..f88bdfbe4a 100644 --- a/stories/demos/AllFeatures.tsx +++ b/stories/demos/AllFeatures.tsx @@ -100,7 +100,13 @@ export function AllFeatures() { { key: 'title', name: 'Title', - editor: wrapOldEditor(React.forwardRef((props, ref) => )), + editor: props => ( + props.onRowChange({ ...props.row, title }, true)} + options={titles} + /> + ), editorOptions: { createPortal: true }, width: 200, resizable: true, @@ -244,5 +250,3 @@ export function AllFeatures() { ); } - -AllFeatures.storyName = 'All Features'; diff --git a/stories/demos/components/Editors/DropDownEditor.tsx b/stories/demos/components/Editors/DropDownEditor.tsx index e79d87f250..740fb156a3 100644 --- a/stories/demos/components/Editors/DropDownEditor.tsx +++ b/stories/demos/components/Editors/DropDownEditor.tsx @@ -1,62 +1,34 @@ -import React, { forwardRef, useImperativeHandle, useRef } from 'react'; -import { Editor, OldEditorProps } from '../../../../src'; +import React, { useRef } from 'react'; -interface Option { - id: string; - title: string; +interface DropDownEditorProps { value: string; - text: string; + onChange: (value: string) => void; + options: readonly string[]; } -interface DropDownEditorProps extends OldEditorProps { - options: Array