refactor Input.Search

components/input/Search.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import Input from './Input';
 import Icon from '../icon';
 import splitObject from '../_util/splitObject';
-import omit from 'omit.js';
 
 export interface SearchProps {
   className?: string;
@@ -13,70 +12,47 @@ export interface SearchProps {
   defaultValue?: any;
   value?: any;
   onChange?: React.FormEventHandler<any>;
-  onSearch?: React.FormEventHandler<any>;
+  onSearch?: (value: string) => any;
+  size?: 'large' | 'default' | 'small';
+  disabled?: boolean;
+  readOnly?: boolean;
 }
 
 export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
     prefixCls: 'ant-input-search',
+    onSearch() {},
   };
-  constructor(props) {
-    super(props);
-    let value;
-    if ('value' in props) {
-      value = props.value;
-    } else if ('defaultValue' in props) {
-      value = props.defaultValue;
-    } else {
-      value = '';
-    }
-    this.state = {
-      value,
-      focus: false,
-    };
-  }
-  onChange = (e) => {
-    if (!('value' in this.props)) {
-      this.setState({ value: e.target.value });
-    }
-    const onChange = this.props.onChange;
-    if (onChange) {
-      onChange(e);
-    }
-  }
+  input: any;
   onSearch = () => {
-    if (this.state.focus && this.props.onSearch) {
-      this.props.onSearch(this.state.value);
-    } else if (!this.state.focus) {
-      this.setState({ focus: true });
+    const { onSearch } = this.props;
+    if (onSearch) {
+      onSearch(this.input.refs.input.value);
     }
+    this.input.refs.input.focus();
   }
   render() {
-    const [{ className, placeholder, prefixCls }, others] = splitObject(
-      this.props, ['className', 'placeholder', 'prefixCls']
+    const [{ className, prefixCls, style }, others] = splitObject(
+      this.props, ['className', 'prefixCls', 'style']
     );
-    // Fix https://fb.me/react-unknown-prop
-    const otherProps = omit(others, [
-      'defaultValue',
-      'value',
-      'onChange',
-      'onSearch',
-    ]);
+    delete others.onSearch;
     const wrapperCls = classNames({
       [`${prefixCls}-wrapper`]: true,
-      [`${prefixCls}-wrapper-focus`]: this.state.focus,
       [className]: !!className,
     });
     return (
-      <div className={wrapperCls} {...otherProps}>
+      <div className={wrapperCls} style={style}>
         <Input
           className={prefixCls}
-          placeholder={placeholder}
-          value={this.state.value}
-          onChange={this.onChange}
           onPressEnter={this.onSearch}
+          ref={node => this.input = node}
+          {...others}
+        />
+        <Icon
+          className={`${prefixCls}-icon`}
+          onClick={this.onSearch}
+          type="search"
         />
-        <Icon className={`${prefixCls}-icon`} onClick={this.onSearch} type="search" />
       </div>
     );
   }

components/input/demo/search-input.md

@@ -15,9 +15,9 @@ Example of creating a search box by grouping a standard input with a search butt
 
 ````jsx
 import { Input } from 'antd';
-const InputSearch = Input.Search;
+const Search = Input.Search;
 
 ReactDOM.render(
-  <InputSearch placeholder="input search text" onSearch={value => console.log(value)} />
+  <Search placeholder="input search text" onSearch={value => console.log(value)} />
 , mountNode);
 ````

components/input/index.en-US.md

@@ -29,17 +29,16 @@ Keyboard and mouse can be used for providing or changing data.
 | onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) |   |   |
 | autosize | Height autosize feature, available when type="textarea". | bool or object | `true` or `{ minRows: 2, maxRows: 6 }` | false |
 
-> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined  
+> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
 then `value`, `defaultValue`, and `id` props are automatically set.
 
 #### Input.Search
 
 | Property  | Description                          | Type       |  Available Values  | Default |
 |-----------|------------------------------------------|------------|-------|--------|
-| defaultValue | The initial value. | any |  |  |
-| value | The content value. | any |  |  |
-| onChange | The callback function that is triggered when you change the value. | function(e) |  |  |
-| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function |  |  |
+| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value) |  |  |
+
+Support all props of `Input`.
 
 #### Input.Group
 

components/input/index.zh-CN.md

@@ -35,10 +35,9 @@ title: Input
 
 | 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
-| defaultValue | 初始默认值 | any |  |  |
-| value | value 值 | any |  |  |
-| onChange | 值改变的回调 | function(e) |  |  |
-| onSearch | 点击搜索或按下回车键时的回调 | function |  |  |
+| onSearch | 点击搜索或按下回车键时的回调 | function(value) |  |  |
+
+其余属性和 Input 一致。
 
 #### Input.Group
 

components/input/style/search-input.less

@@ -5,40 +5,27 @@
 
 .@{ant-prefix}-input-search-wrapper {
   display: inline-block;
-  vertical-align: middle;
   position: relative;
-  min-width: 24px;
-  height: @input-height-base;
 
   .@{ant-prefix}-input-search {
-    opacity: 0;
-    width: 0;
     transition: all .3s ease;
-  }
-
-  .@{ant-prefix}-input-search-icon {
-    position: absolute;
-    line-height: @input-height-base;
-    left: 0;
-    cursor: pointer;
-    font-size: 24px;
-    transition: all .3s ease;
-
-    &:hover {
-      color: @input-hover-border-color;
+    &-icon {
+      position: absolute;
+      right: 8px;
+      cursor: pointer;
+      transition: all .3s ease;
+      font-size: 14px;
+      height: 20px;
+      line-height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      &:hover {
+        color: @input-hover-border-color;
+      }
     }
   }
-}
 
-.@{ant-prefix}-input-search-wrapper-focus {
-  .@{ant-prefix}-input-search {
-    opacity: 1;
-    width: 100%;
-  }
-
-  .@{ant-prefix}-input-search-icon {
-    left: 100%;
-    margin-left: -22px;
-    font-size: 14px;
+  &:hover .@{ant-prefix}-input-search {
+    border: 1px solid @input-hover-border-color;
   }
 }

components/tree/demo/search.md

@@ -17,6 +17,7 @@ Searchable Tree.
 import { Tree, Input } from 'antd';
 
 const TreeNode = Tree.TreeNode;
+const Search = Input.Search;
 
 const x = 3;
 const y = 2;
@@ -129,7 +130,7 @@ class SearchTree extends React.Component {
     });
     return (
       <div>
-        <Input
+        <Search
           style={{ width: 200 }}
           placeholder="Search"
           onChange={this.onChange}