[table] add editableTextProps to allow adjusting cells during editing (…

…#3350)
palantir · Jun 12, 2019 · c0c5d1f · c0c5d1f · blueprint-bot · Jun 12, 2019
1 parent 6496586
commit c0c5d1f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/packages/table/src/cell/editableCell.tsx b/packages/table/src/cell/editableCell.tsx
@@ -22,6 +22,7 @@ import {
     Hotkey,
     Hotkeys,
     HotkeysTarget,
+    IEditableTextProps,
     Utils as CoreUtils,
 } from "@blueprintjs/core";
 
@@ -65,6 +66,11 @@ export interface IEditableCellProps extends ICellProps {
      * were originally provided via props.
      */
     onConfirm?: (value: string, rowIndex?: number, columnIndex?: number) => void;
+
+    /**
+     * Props that should be passed to the EditableText when it is used to edit
+     */
+    editableTextProps?: IEditableTextProps;
 }
 
 export interface IEditableCellState {
@@ -121,17 +127,27 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
     }
 
     public render() {
-        const { onCancel, onChange, onConfirm, truncated, wrapText, ...spreadableProps } = this.props;
+        const {
+            onCancel,
+            onChange,
+            onConfirm,
+            truncated,
+            wrapText,
+            editableTextProps,
+            ...spreadableProps
+        } = this.props;
 
         const { isEditing, dirtyValue, savedValue } = this.state;
         const interactive = spreadableProps.interactive || isEditing;
 
         let cellContents: JSX.Element = null;
         if (isEditing) {
+            const className = editableTextProps ? editableTextProps.className : null;
             cellContents = (
                 <EditableText
+                    {...editableTextProps}
                     isEditing={true}
-                    className={classNames(Classes.TABLE_EDITABLE_TEXT, Classes.TABLE_EDITABLE_NAME)}
+                    className={classNames(Classes.TABLE_EDITABLE_TEXT, Classes.TABLE_EDITABLE_NAME, className)}
                     intent={spreadableProps.intent}
                     minWidth={null}
                     onCancel={this.handleCancel}

diff --git a/packages/table/test/editableCellTests.tsx b/packages/table/test/editableCellTests.tsx
@@ -19,14 +19,15 @@ import { mount } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
-import * as Classes from "../src/common/classes";
+import { Classes } from "@blueprintjs/core";
+import * as TableClasses from "../src/common/classes";
 import { EditableCell } from "../src/index";
 import { CellType, expectCellLoading } from "./cellTestUtils";
 
 describe("<EditableCell>", () => {
     it("renders", () => {
         const elem = mount(<EditableCell value="test-value-5000" />);
-        expect(elem.find(`.${Classes.TABLE_TRUNCATED_TEXT}`).text()).to.equal("test-value-5000");
+        expect(elem.find(`.${TableClasses.TABLE_TRUNCATED_TEXT}`).text()).to.equal("test-value-5000");
     });
 
     it("renders loading state", () => {
@@ -39,10 +40,10 @@ describe("<EditableCell>", () => {
         const VALUE_2 = "bar";
 
         const elem = mount(<EditableCell value={VALUE_1} />);
-        expect(elem.find(`.${Classes.TABLE_TRUNCATED_TEXT}`).text()).to.equal(VALUE_1);
+        expect(elem.find(`.${TableClasses.TABLE_TRUNCATED_TEXT}`).text()).to.equal(VALUE_1);
 
         elem.setProps({ value: VALUE_2 });
-        expect(elem.find(`.${Classes.TABLE_TRUNCATED_TEXT}`).text()).to.equal(VALUE_2);
+        expect(elem.find(`.${TableClasses.TABLE_TRUNCATED_TEXT}`).text()).to.equal(VALUE_2);
     });
 
     it("edits", () => {
@@ -83,7 +84,7 @@ describe("<EditableCell>", () => {
 
         // start editing
         elem.setState({ isEditing: true, dirtyValue: "test-value-5000" });
-        const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
+        const input = elem.find(`.${TableClasses.TABLE_EDITABLE_TEXT} input`);
         expect(input.length).to.equal(1);
 
         // make changes
@@ -139,11 +140,41 @@ describe("<EditableCell>", () => {
 
     it("defaults to no wrapText", () => {
         const elem = mount(<EditableCell />);
-        expect(elem.find(`.${Classes.TABLE_NO_WRAP_TEXT}`).exists()).to.be.true;
+        expect(elem.find(`.${TableClasses.TABLE_NO_WRAP_TEXT}`).exists()).to.be.true;
     });
 
     it("wraps text when wrapText is true", () => {
         const elem = mount(<EditableCell wrapText={true} />);
-        expect(elem.find(`.${Classes.TABLE_NO_WRAP_TEXT}`).exists()).to.be.false;
+        expect(elem.find(`.${TableClasses.TABLE_NO_WRAP_TEXT}`).exists()).to.be.false;
+    });
+
+    it("Passes editableTextProps to inner EditableText", () => {
+        const onCancel = sinon.spy();
+        const onChange = sinon.spy();
+        const onConfirm = sinon.spy();
+
+        const elem = mount(
+            <EditableCell
+                value="test-value-5000"
+                onCancel={onCancel}
+                onChange={onChange}
+                onConfirm={onConfirm}
+                editableTextProps={{
+                    className: "input-only-class",
+                    maxLength: 345,
+                    value: "ignore this",
+                }}
+            />,
+        );
+
+        // start editing
+        elem.setState({ isEditing: true, dirtyValue: "test-value-5000" });
+        const input = elem.find("input");
+        // input props that EditableCell does not care about should pass through unchanged
+        expect(input.prop("maxLength")).to.equal(345);
+        expect(elem.find(`.${Classes.EDITABLE_TEXT}`).prop("className")).to.contain("input-only-class");
+
+        // But special values should be overridden by EditableCell
+        expect(input.prop("value")).to.equal("test-value-5000");
     });
 });