From de250cddacb0cb0eadc5c80012df72ffc707898c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= Date: Fri, 25 Jan 2019 17:53:11 +0800 Subject: [PATCH] feat: Add loading prop for Input.Search, close #14538 --- components/input/Search.tsx | 39 +++++++++--- components/input/__tests__/Search.test.js | 13 ++++ components/input/demo/search-input.md | 77 +++++++++++++++-------- components/input/index.en-US.md | 3 +- components/input/index.zh-CN.md | 3 +- components/input/style/search-input.less | 8 +++ 6 files changed, 109 insertions(+), 34 deletions(-) diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 92b8bd216741..a18b5020de12 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -5,6 +5,8 @@ import Icon from '../icon'; import Button from '../button'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +function noop() {} + export interface SearchProps extends InputProps { inputPrefixCls?: string; onSearch?: ( @@ -12,6 +14,7 @@ export interface SearchProps extends InputProps { event?: React.MouseEvent | React.KeyboardEvent, ) => any; enterButton?: boolean | React.ReactNode; + loading?: boolean; } export default class Search extends React.Component { @@ -42,17 +45,25 @@ export default class Search extends React.Component { }; getButtonOrIcon(prefixCls: string) { - const { enterButton, size, disabled } = this.props; + const { enterButton, size, disabled, loading } = this.props; const enterButtonAsElement = enterButton as React.ReactElement; + const iconClassName = classNames(`${prefixCls}-icon`, { + [`${prefixCls}-loading`]: !!loading, + }); + const buttonClassName = classNames(`${prefixCls}-button`, { + [`${prefixCls}-loading`]: !!loading, + }); let node; if (!enterButton) { - node = ; + node = ( + + ); } else if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') { node = React.cloneElement( enterButtonAsElement, enterButtonAsElement.type === Button ? { - className: `${prefixCls}-button`, + className: buttonClassName, size, } : {}, @@ -60,18 +71,31 @@ export default class Search extends React.Component { } else { node = ( ); } return React.cloneElement(node, { - onClick: this.onSearch, + onClick: loading ? noop : this.onSearch, }); } @@ -83,6 +107,7 @@ export default class Search extends React.Component { size, suffix, enterButton, + loading, ...others } = this.props; delete (others as any).onSearch; @@ -104,7 +129,7 @@ export default class Search extends React.Component { }); return ( { }), ); }); + + it('should be loading when loading is true', async () => { + let loading = false; + const wrapper = mount(); + 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 index 37f4713e3fa8..e7515f8868dd 100644 --- 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( -
- console.log(value)} - style={{ width: 200 }} - /> -

- console.log(value)} - enterButton - /> -

- console.log(value)} - /> -
, - 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 ( +
+ this.handleSearch('loading1', value)} + style={{ width: 200 }} + loading={loading1} + /> +

+ this.handleSearch('loading2', value)} + enterButton + loading={loading2} + /> +

+ this.handleSearch('loading3', value)} + loading={loading3} + /> +
+ ); + } +} + +ReactDOM.render( , mountNode); ```` diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 0f9bd92d2595..9802c9bdbd01 100644 --- 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 index fd1bad7ca558..5ad121bc0c8f 100644 --- 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 index 646778faac88..1bda56ca17fc 100644 --- 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;