重构 components 组件下 Search 组件代码

src/components/Search/index.js

+/**
+*
+* IKSearch
+*
+*/
+
+import React, { PureComponent } from 'react';
+import { Row, Col, Icon, From, Button, Input } from 'antd';
+
+const InputGroup = Input.Group;
+
+
+class IKSearch extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    type: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    className: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    onSearch: React.PropTypes.func,
+    buttonEvent: React.PropTypes.func,
+  };
+
+  state = {
+    value: this.props.value || '',
+    noticeVisible: false,
+    button: this.props.button? this.props.button || false,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleInputChange(e) {
+    if (e.target.value > 50) {
+      if (!this.state.noticeVisible) {
+        this.setState({ noticeVisible: true });
+        errorNotice('字数不能超过50', () => {
+          this.setState({ noticeVisible: false });
+        });
+      }
+    } else {
+      this.setState({value: e.target.value });
+      this.props.onChange && this.props.onChange(e);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: nextProps.vaule });
+  }
+
+  handleSearch() {
+    this.props.onSearch && this.props.onSearch();
+  }
+
+  render() {
+    const props = $({}, this.props);
+    let svgElm = null;
+
+    if (props.button) {
+      svgElm = (
+        <Col span="3">
+          <svg>
+            <use xlinkHref={props.button} onClick={props.buttonEvent} />
+          </svg>
+        </Col>
+      );
+    }
+
+    return(
+      <div className="ik-search">
+        <div className="ant-search-input-wrapper ik-width-percent-100">
+          <Row>
+            <Col span={`${this.props.button? '21': '24'}`}
+              <Form>
+                <InputGroup className="ant-search-input">
+                  <Input
+                    placeholder={this.props.placeholder}
+                    size="large"
+                    type="search"
+                    value={this.state.value}
+                    onChange={this.handleInputChange}
+                    onPressEnter={this.handleSearch}
+                    className="ik-padding-right-40"/>
+                  <div className="ant-input-group-wrap">
+                    <Button icon="search" className="ant-search-btn" onClick={this.handleSearch} />
+                  </div>
+                </InputGroup>
+              </Form>
+              {svgElm}
+            </Col>
+          </Row>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default IKSearch;

src/components/Search/tests/index.test.js

+// import IKSearch from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKSearch />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});