feat: Add loading prop for Input.Search, close #14538

ant-design · Feb 8, 2019 · de250cd · de250cd
1 parent d1fde36
commit de250cd
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 34 deletions.
diff --git a/components/input/Search.tsx b/components/input/Search.tsx
@@ -5,13 +5,16 @@ import Icon from '../icon';
 import Button from '../button';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
+function noop() {}
+
 export interface SearchProps extends InputProps {
   inputPrefixCls?: string;
   onSearch?: (
     value: string,
     event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>,
   ) => any;
   enterButton?: boolean | React.ReactNode;
+  loading?: boolean;
 }
 
 export default class Search extends React.Component<SearchProps, any> {
@@ -42,36 +45,57 @@ export default class Search extends React.Component<SearchProps, any> {
   };
 
   getButtonOrIcon(prefixCls: string) {
-    const { enterButton, size, disabled } = this.props;
+    const { enterButton, size, disabled, loading } = this.props;
     const enterButtonAsElement = enterButton as React.ReactElement<any>;
+    const iconClassName = classNames(`${prefixCls}-icon`, {
+      [`${prefixCls}-loading`]: !!loading,
+    });
+    const buttonClassName = classNames(`${prefixCls}-button`, {
+      [`${prefixCls}-loading`]: !!loading,
+    });
     let node;
     if (!enterButton) {
-      node = <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
+      node = (
+        <Icon className={iconClassName} type={loading ? 'loading' : 'search'} key="searchIcon" />
+      );
     } else if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
       node = React.cloneElement(
         enterButtonAsElement,
         enterButtonAsElement.type === Button
           ? {
-              className: `${prefixCls}-button`,
+              className: buttonClassName,
               size,
             }
           : {},
       );
     } else {
       node = (
         <Button
-          className={`${prefixCls}-button`}
+          className={buttonClassName}
           type="primary"
           size={size}
           disabled={disabled}
           key="enterButton"
         >
-          {enterButton === true ? <Icon type="search" /> : enterButton}
+          {enterButton === true ? (
+            <Icon type={loading ? 'loading' : 'search'} />
+          ) : (
+            <span>
+              <span
+                className={classNames({
+                  [`${prefixCls}-button-text-loading`]: !!loading,
+                })}
+              >
+                {enterButton}
+              </span>
+              {loading && <Icon type="loading" />}
+            </span>
+          )}
         </Button>
       );
     }
     return React.cloneElement(node, {
-      onClick: this.onSearch,
+      onClick: loading ? noop : this.onSearch,
     });
   }
 
@@ -83,6 +107,7 @@ export default class Search extends React.Component<SearchProps, any> {
       size,
       suffix,
       enterButton,
+      loading,
       ...others
     } = this.props;
     delete (others as any).onSearch;
@@ -104,7 +129,7 @@ export default class Search extends React.Component<SearchProps, any> {
     });
     return (
       <Input
-        onPressEnter={this.onSearch}
+        onPressEnter={loading ? noop : this.onSearch}
         {...others}
         size={size}
         className={inputClassName}

diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
@@ -126,4 +126,17 @@ describe('Input.Search', () => {
       }),
     );
   });
+
+  it('should be loading when loading is true', async () => {
+    let loading = false;
+    const wrapper = mount(<Search loading={loading} />);
+    expect(wrapper.find('.anticon-loading')).toHaveLength(0);
+
+    loading = true;
+    wrapper.setProps({ loading });
+
+    await new Promise(resolve => setTimeout(resolve, 500));
+    wrapper.update();
+    expect(wrapper.find('.anticon-loading')).toHaveLength(1);
+  });
 });
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
@@ -7,38 +7,65 @@ title:
 
 ## zh-CN
 
-带有搜索按钮的输入框，`2.5.0` 时新增。
+带有搜索按钮的输入框，`2.5.0` 时新增，3.14.0 后支持 `loading` 态。
 
 ## en-US
 
-Example of creating a search box by grouping a standard input with a search button, added in `2.5.0`.
+Example of creating a search box by grouping a standard input with a search button, added in `2.5.0` and `loading` property is supported in `3.14.0`.
 
 ````jsx
 import { Input } from 'antd';
 
 const Search = Input.Search;
 
-ReactDOM.render(
-  <div>
-    <Search
-      placeholder="input search text"
-      onSearch={value => console.log(value)}
-      style={{ width: 200 }}
-    />
-    <br /><br />
-    <Search
-      placeholder="input search text"
-      onSearch={value => console.log(value)}
-      enterButton
-    />
-    <br /><br />
-    <Search
-      placeholder="input search text"
-      enterButton="Search"
-      size="large"
-      onSearch={value => console.log(value)}
-    />
-  </div>,
-  mountNode
-);
+class SearchDemo extends React.Component {
+  state = {
+    loading1: false,
+    loading2: false,
+    loading3: false,
+  };
+
+  handleSearch = (key, value) => {
+    console.log(value);
+    this.setState({
+      [key]: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        [key]: false,
+      });
+    }, 3000);
+  }
+
+  render () {
+    const { loading1, loading2, loading3 } = this.state;
+    return (
+      <div>
+        <Search
+          placeholder="input search text"
+          onSearch={value => this.handleSearch('loading1', value)}
+          style={{ width: 200 }}
+          loading={loading1}
+        />
+        <br /><br />
+        <Search
+          placeholder="input search text"
+          onSearch={value => this.handleSearch('loading2', value)}
+          enterButton
+          loading={loading2}
+        />
+        <br /><br />
+        <Search
+          placeholder="input search text"
+          enterButton="Search"
+          size="large"
+          onSearch={value => this.handleSearch('loading3', value)}
+          loading={loading3}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render( <SearchDemo />, mountNode);
 ````
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
@@ -57,7 +57,8 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | enterButton | to show an enter button after input | boolean\|ReactNode | false |
-| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) |  |
+| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. It works when `loading` is false | function(value, event) |  |
+| loading | Searching status added in 3.15.0 | boolean | false |
 
 Supports all props of `Input`.
 

diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
@@ -54,7 +54,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | enterButton | 是否有确认按钮，可设为按钮文字 | boolean\|ReactNode | false |
-| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) |  |
+| onSearch | 点击搜索或按下回车键时的回调，loading 为 false 时生效 | function(value, event) |  |
+| loading | 是否搜索中，版本 3.15.0 后新增 | boolean | false |
 
 其余属性和 Input 一致。
 

diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
@@ -15,6 +15,10 @@
     }
   }
 
+  &-loading {
+    cursor: default !important;
+  }
+
   &:not(&-small) > .@{ant-prefix}-input-suffix {
     right: @control-padding-horizontal;
   }
@@ -27,6 +31,10 @@
     }
   }
 
+  &-button-text-loading {
+    margin-right: 12px;
+  }
+
   &.@{search-prefix}-enter-button {
     display: table;