Renaming addTagOnBlur to addOnBlur

palantir · Dec 22, 2017 · 3724a35 · 3724a35
1 parent dc6d6ac
commit 3724a35
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 19 deletions.
diff --git a/packages/docs-app/src/examples/labs-examples/tagInputExample.tsx b/packages/docs-app/src/examples/labs-examples/tagInputExample.tsx
@@ -25,7 +25,7 @@ const VALUES = [
 ];
 
 export interface ITagInputExampleState {
-    addTagOnBlur?: boolean;
+    addOnBlur?: boolean;
     disabled?: boolean;
     fill?: boolean;
     intent?: boolean;
@@ -36,7 +36,7 @@ export interface ITagInputExampleState {
 
 export class TagInputExample extends BaseExample<ITagInputExampleState> {
     public state: ITagInputExampleState = {
-        addTagOnBlur: false,
+        addOnBlur: false,
         disabled: false,
         fill: false,
         intent: false,
@@ -45,15 +45,15 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
         values: VALUES,
     };
 
-    private handleAddTagOnBlurChange = handleBooleanChange(addTagOnBlur => this.setState({ addTagOnBlur }));
+    private handleAddOnBlurChange = handleBooleanChange(addOnBlur => this.setState({ addOnBlur }));
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
     private handleIntentChange = handleBooleanChange(intent => this.setState({ intent }));
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
     protected renderExample() {
-        const { addTagOnBlur, disabled, fill, large, values } = this.state;
+        const { addOnBlur, disabled, fill, large, values } = this.state;
 
         const classes = classNames({
             [Classes.FILL]: fill,
@@ -87,7 +87,7 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
                 placeholder="Separate values with commas..."
                 tagProps={getTagProps}
                 values={values}
-                addTagOnBlur={addTagOnBlur}
+                addOnBlur={addOnBlur}
             />
         );
     }
@@ -109,10 +109,10 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
                     onChange={this.handleDisabledChange}
                 />,
                 <Switch
-                    checked={this.state.addTagOnBlur}
-                    label="Add tag on blur"
-                    key="addTagOnBlur"
-                    onChange={this.handleAddTagOnBlurChange}
+                    checked={this.state.addOnBlur}
+                    label="Add on blur"
+                    key="addOnBlur"
+                    onChange={this.handleAddOnBlurChange}
                 />,
             ],
             [

diff --git a/packages/labs/src/components/tag-input/tag-input.md b/packages/labs/src/components/tag-input/tag-input.md
@@ -10,7 +10,7 @@
 
 @reactExample TagInputExample
 
-**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="pt-key">enter</kbd> will **add new items** by invoking callbacks. If `addTagOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
+**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="pt-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
 
 **Tags can be removed** by clicking their <span class="pt-icon-standard pt-icon-cross"></span> buttons, or by pressing <kbd class="pt-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
 

diff --git a/packages/labs/src/components/tag-input/tagInput.tsx b/packages/labs/src/components/tag-input/tagInput.tsx
@@ -24,11 +24,11 @@ import * as Classes from "../../common/classes";
 
 export interface ITagInputProps extends IProps {
     /**
-     * If this is set to true, a new tag will be created from a populated input field when
-     * the user either clicks out of the component or presses `enter` on the input.
+     * If true, onAdd will also be invoked when the input loses focus.
+     * By default, onAdd is only invoked on enter.
      * @default false
      */
-    addTagOnBlur?: boolean;
+    addOnBlur?: boolean;
 
     /**
      * Whether the component is non-interactive.
@@ -305,7 +305,7 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
             // we only need to "unfocus" if the blur event is leaving the container.
             // defer this check using rAF so activeElement will have updated.
             if (this.inputElement != null && !this.inputElement.parentElement.contains(document.activeElement)) {
-                if (this.state.inputValue.length > 0 && this.props.addTagOnBlur) {
+                if (this.state.inputValue.length > 0 && this.props.addOnBlur) {
                     this.addTag(this.state.inputValue);
                 }
                 this.setState({ activeIndex: NONE, isInputFocused: false });

diff --git a/packages/labs/test/tagInputTests.tsx b/packages/labs/test/tagInputTests.tsx
@@ -103,11 +103,9 @@ describe("<TagInput>", () => {
             assert.deepEqual(onAdd.args[0][0], [NEW_VALUE]);
         });
 
-        it("is invoked on blur when addTagOnBlur is true", done => {
+        it("is invoked on blur when addOnBlur is true", done => {
             const onAdd = sinon.stub();
-            const wrapper = mount(
-                <TagInput values={VALUES} addTagOnBlur={true} inputValue={NEW_VALUE} onAdd={onAdd} />,
-            );
+            const wrapper = mount(<TagInput values={VALUES} addOnBlur={true} inputValue={NEW_VALUE} onAdd={onAdd} />);
             const fakeEvent = { flag: "yes" };
             wrapper.simulate("blur", fakeEvent);
             setTimeout(() => {
@@ -116,7 +114,7 @@ describe("<TagInput>", () => {
             });
         });
 
-        it("is not invoked on blur when addTagOnBlur is false", done => {
+        it("is not invoked on blur when addOnBlur is false", done => {
             const onAdd = sinon.stub();
             const wrapper = mount(<TagInput values={VALUES} inputValue={NEW_VALUE} onAdd={onAdd} />);
             const fakeEvent = { flag: "yes" };