[table] fix EditableCell update cycle, improve EditableName docs (#3649)

packages/table-dev-app/src/features.tsx

@@ -204,9 +204,11 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
             <EditableCell
                 value={value == null ? "" : value}
                 intent={this.state.sparseCellIntent[dataKey]}
-                onCancel={this.cellValidator(rowIndex, columnIndex)}
-                onChange={this.cellValidator(rowIndex, columnIndex)}
-                onConfirm={this.cellSetter(rowIndex, columnIndex)}
+                rowIndex={rowIndex}
+                columnIndex={columnIndex}
+                onCancel={this.cellValidator}
+                onChange={this.cellValidator}
+                onConfirm={this.cellSetter}
             />
         );
     };
@@ -216,10 +218,11 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
             return (
                 <EditableName
                     name={name}
+                    index={columnIndex}
                     intent={this.state.intents[columnIndex]}
-                    onChange={this.nameValidator(columnIndex)}
-                    onCancel={this.nameValidator(columnIndex)}
-                    onConfirm={this.nameSetter(columnIndex)}
+                    onChange={this.nameValidator}
+                    onCancel={this.nameValidator}
+                    onConfirm={this.nameSetter}
                 />
             );
         };
@@ -236,36 +239,28 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
         return /^[a-zA-Z]*$/.test(value);
     }
 
-    private nameValidator = (index: number) => {
-        return (name: string) => {
-            const intent = this.isValidValue(name) ? null : Intent.DANGER;
-            this.setArrayState("intents", index, intent);
-            this.setArrayState("names", index, name);
-        };
+    private nameValidator = (name: string, index: number) => {
+        const intent = this.isValidValue(name) ? null : Intent.DANGER;
+        this.setArrayState("intents", index, intent);
+        this.setArrayState("names", index, name);
     };
 
-    private nameSetter = (index: number) => {
-        return (name: string) => {
-            this.setArrayState("names", index, name);
-        };
+    private nameSetter = (name: string, index: number) => {
+        this.setArrayState("names", index, name);
     };
 
-    private cellValidator = (rowIndex: number, columnIndex: number) => {
+    private cellValidator = (value: string, rowIndex: number, columnIndex: number) => {
         const dataKey = EditableTable.dataKey(rowIndex, columnIndex);
-        return (value: string) => {
-            const intent = this.isValidValue(value) ? null : Intent.DANGER;
-            this.setSparseState("sparseCellIntent", dataKey, intent);
-            this.setSparseState("sparseCellData", dataKey, value);
-        };
+        const intent = this.isValidValue(value) ? null : Intent.DANGER;
+        this.setSparseState("sparseCellIntent", dataKey, intent);
+        this.setSparseState("sparseCellData", dataKey, value);
     };
 
-    private cellSetter = (rowIndex: number, columnIndex: number) => {
+    private cellSetter = (value: string, rowIndex: number, columnIndex: number) => {
         const dataKey = EditableTable.dataKey(rowIndex, columnIndex);
-        return (value: string) => {
-            const intent = this.isValidValue(value) ? null : Intent.DANGER;
-            this.setSparseState("sparseCellData", dataKey, value);
-            this.setSparseState("sparseCellIntent", dataKey, intent);
-        };
+        const intent = this.isValidValue(value) ? null : Intent.DANGER;
+        this.setSparseState("sparseCellData", dataKey, value);
+        this.setSparseState("sparseCellIntent", dataKey, intent);
     };
 
     private setArrayState<T>(key: string, index: number, value: T) {

packages/table/src/headers/editableName.tsx

@@ -31,19 +31,19 @@ export interface IEditableNameProps extends IIntentProps, IProps {
      * important to listen to if you are doing anything with `onChange` events,
      * since you'll likely want to revert whatever changes you made.
      */
-    onCancel?: (value: string) => void;
+    onCancel?: (value: string, columnIndex?: number) => void;
 
     /**
      * A listener that is triggered as soon as the editable name is modified.
      * This can be due, for example, to keyboard input or the clipboard.
      */
-    onChange?: (value: string) => void;
+    onChange?: (value: string, columnIndex?: number) => void;
 
     /**
      * A listener that is triggered once the editing is confirmed. This is
      * usually due to the `return` (or `enter`) key press.
      */
-    onConfirm?: (value: string) => void;
+    onConfirm?: (value: string, columnIndex?: number) => void;
 
     /**
      * The index of the name in the header. If provided, this will be passed as an argument to any

packages/table/test/editableNameTests.tsx

@@ -55,4 +55,35 @@ describe("<EditableName>", () => {
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.true;
     });
+
+    it("passes index prop to callbacks if index was provided", () => {
+        const onCancelSpy = sinon.spy();
+        const onChangeSpy = sinon.spy();
+        const onConfirmSpy = sinon.spy();
+
+        const CHANGED_VALUE = "my-changed-value";
+        const INDEX = 17;
+
+        const elem = mount(
+            <EditableName
+                name="test-name-5000"
+                index={INDEX}
+                onCancel={onCancelSpy}
+                onChange={onChangeSpy}
+                onConfirm={onConfirmSpy}
+            />,
+        );
+
+        elem.find(EditableText).simulate("focus");
+
+        elem.find(EditableText)
+            .find("input")
+            .simulate("change", { target: { value: CHANGED_VALUE } });
+        expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, INDEX]);
+
+        elem.find(EditableText)
+            .find("input")
+            .simulate("blur");
+        expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, INDEX]);
+    });
 });