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]);
+ });
});