diff --git a/packages/table-dev-app/src/features.tsx b/packages/table-dev-app/src/features.tsx index 898d6fd18e..9ee9813b9d 100644 --- a/packages/table-dev-app/src/features.tsx +++ b/packages/table-dev-app/src/features.tsx @@ -204,9 +204,11 @@ class EditableTable extends React.Component<{}, IEditableTableState> { ); }; @@ -216,10 +218,11 @@ class EditableTable extends React.Component<{}, IEditableTableState> { return ( ); }; @@ -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(key: string, index: number, value: T) { diff --git a/packages/table/src/headers/editableName.tsx b/packages/table/src/headers/editableName.tsx index 7d4c6a2a00..ec23a459d1 100644 --- a/packages/table/src/headers/editableName.tsx +++ b/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 diff --git a/packages/table/test/editableNameTests.tsx b/packages/table/test/editableNameTests.tsx index eb57ae5dfb..3c124151b5 100644 --- a/packages/table/test/editableNameTests.tsx +++ b/packages/table/test/editableNameTests.tsx @@ -55,4 +55,35 @@ describe("", () => { 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( + , + ); + + 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]); + }); });