# Search

用于查询输入

## 案例演示

### 基本使用

---demo
```js
import { Search, AmosAlert, StdForm } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 10
    };
  }

  onChange = (e, value) => {
    console.log('onChange:', e, value);
    this.setState({
      value
    });
  }

  onSearch = (e, value) => {
    console.log('onSearch:', e, value);
  }

  onIconClick = (e, value) => {
    AmosAlert.info('表单数据', value);
  }

  render() {
    const { value } = this.state;
    return (
      <div style={{ width: '25em', display: 'inline-block' }}>
        <StdForm label="小尺寸"><Search icon="shengyin" size="sm" /></StdForm>
        <StdForm label="小尺寸"><Search icon="shengyin" preIcon="good" size="sm" /></StdForm>
        <StdForm label="正  常"><Search icon="delete" /></StdForm>
        <StdForm label="大尺寸"><Search size="lg" icon="shengyin" /></StdForm>
        <StdForm label="大尺寸"><Search size="lg" preIcon="good" icon="shengyin" /></StdForm>
        <StdForm label="范围"><Search max={20} min={-5} /></StdForm>
        <StdForm label="Events"><Search icon="search" value={value} onChange={this.onChange} onIconClick={this.onIconClick} /></StdForm>
        <StdForm label="不可用"><Search preIcon="good" icon="search" disabled /></StdForm>
        <StdForm label="采用内置图标"><Search useInnerIcon preIcon="tip" icon="remove" /></StdForm>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 高级搜索

---demo
```js
import { Search, StdForm } from 'amos-framework';

const BtnSearch = Search.BtnSearch;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 10
    };
  }

  onChange = (value, e) => {
    console.log('onChange:', value);
    this.setState({
      value
    });
  }

  onSearch = (value, e) => {
    console.log('onSearch:', value);
  }

  render() {
    const { value } = this.state;
    return (
      <div style={{ width: '25em', display: 'inline-block' }}>
        <StdForm>
          <BtnSearch value={value} onChange={this.onChange} onSearch={this.onSearch} />
        </StdForm>
        <StdForm>
          <BtnSearch value={value} onChange={this.onChange} onSearch={this.onSearch} btnText="搜索一下" />
        </StdForm>
        <StdForm>
          <BtnSearch
            value={value}
            onChange={this.onChange}
            onSearch={this.onSearch}
            btnText={null}
            buttonProps={{
              icon: 'good'
            }}
          />
        </StdForm>
        <StdForm>
          <BtnSearch
            value={value}
            onChange={this.onChange}
            onSearch={this.onSearch}
            btnText="检查"
            buttonProps={{
              icon: 'jiancha'
            }}
          />
        </StdForm>
        <StdForm>
          <BtnSearch
            value={value}
            onChange={this.onChange}
            onSearch={this.onSearch}
            btnText="检查"
            buttonProps={{
              useInnerIcon: true,
              icon: 'search'
            }}
          />
        </StdForm>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 高级搜索-自定义按钮

> 注意，使用时，需要将样式提出去，案例中仅仅是为了方便处理样式，才采用得 `DomHtml`

---demo
```js
import { Search, StdForm, Icon, DomHtml } from 'amos-framework';

const BtnSearch = Search.BtnSearch;

const maxLen = 50;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  componentWillUnmount() {
    // 组件卸载时，移出样式
    const style = document.querySelector('style[data-dhtype="btnsearch"]');
    if (style){
      style.parentNode.remove(style);
    }
  }


  onChange = (value, e) => {
    console.log(value);
    if (value.length > maxLen){
      return;
    }
    this.setState({
      value
    });
  }

  onSearch = (value, e) => {
    console.log('onSearch:', value);
  }

  renderBtn = () => {
    const { value } = this.state;
    const rootStyle = {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0 6px'
    };

    const btnStyle = {
      marginLeft: 16,
      cursor: 'pointer'
    };

    return (
      <div className="btn-search-tools" style={rootStyle}>
        <div className="btn-search-tools-left" />
        <div className="btn-search-tools-right">
          <span className="search-char-num">{value.length || 0} / {maxLen}</span>
          <span className="search-submit-btn" style={btnStyle}><Icon icon="publish" onClick={(e) => this.onSearch(value, e)} /></span>
        </div>
      </div>
    );
  }

  render() {
    const { value } = this.state;
    return (
      <div style={{ width: '25em', display: 'inline-block' }}>
        <DomHtml>
          <style type="text/css" data-dhtype="btnsearch">
          {
            `.btn-search-custom.btn-search {
              border: 1px solid #dfdfdf;
              border-radius: 6px;
              transition: all 0.3s;
            }

            .btn-search-custom:hover,
            .btn-search-custom.btn-search-focus {
              border-color: #878aab;
            }

            .btn-search-custom.btn-search .amos-input {
              border: 0;
              outline: 0;
              border-radius: 6px;
              box-shadow: none;
            }
            `
          }
          </style>
        </DomHtml>
        <StdForm>
          <BtnSearch className="btn-search-custom" value={value} onChange={this.onChange} onSearch={this.onSearch} renderBtn={this.renderBtn} />
        </StdForm>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

### Search props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-search` | css class 前缀 |
| className | string | - | 输入框自定义样式名 |
| style | object | - | 输入框外层div样式 |
| value | ReactText | - | 输入框的值 |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| type | string | `text` | 输入框类型 |
| autoComplete | string | off | 是否自动补全 `off、on` |
| size | string: `sm、lg` | - | 输入框大小，除默认外可选值：sm、lg |
| disabled | boolean | false | 是否禁用 |
| length | number or string | - | 输入的最大长度 |
| useInnerIcon | bool | - | 采用内置 icon 组件 |
| icon | `String、ReactNode` | - | 输入框`后`面放置图标 |
| preIcon | `String、ReactNode` | - |输入框`前`面放置图标 |
| onChange | function | - | 输入改变后的回调，参数为 `(e, value)`  |
| onSearch | function | - | 输入框摁`Enter`执行这个事件，参数为 `(e, value)` |
| onKeyUp | function | - | 其它按键回调，参数为 event 值 |
| addonBefore | ReactNode | - | 带标签的 input，设置前置标签 |
| addonAfter | ReactNode | - | 带标签的 input，设置后置标签 |
| onIconClick | function | - | 输入框`后`面放置的图标鼠标点击事件，参数为 `(e, value)` 值 |
| onPreIconClick | function | - | 输入框`前`面放置的图标鼠标点击事件，参数为 `(e, value)` 值 |
| onIconMouseOut | function | - | 输入框`后`面放置的图标，移开图标上的事件，参数为 `(e, value)` 值 |
| onPreIconMouseOut | function | - | 输入框`前`面放置的图标，移开图标上的事件，参数为 `(e, value)` 值 |
| onIconMouseOver | function | - | 输入框`后`面放置的图标，移到图标上的事件，参数为 `(e, value)` 值 |
| onPreIconMouseOver | function | - | 输入框`前`面放置的图标，移到图标上的事件，参数为 `(e, value)` 值 |

> 当 `useInnerIcon` 为 `true` ，且 icon 或者 preIcon 为 string 类型时，将采用 `import { Icon } from 'amos-framework'` 中的图标。
> 其余情况下，采用 `import Icon from 'amos-icon'` 中的图标，此图标库需要自行添加图标。

Search 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。

### Search.BtnSearch props

| params  | type | default | description |
| --- | --- | --- | --- |
| className | string | - | 自定义样式名 |
| value | ReactText | - | 输入框的值 |
| placeholder | string | - | 同 input placeholder |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| onChange | function | - | 输入改变后的回调，参数为 `(value, e)` |
| onSearch | function | - | 点击按钮执行事件，参数为 `(value, e)` |
| btnText | ReactNode | `搜索` | 按钮内容 |
| inputProps | Object | - | 输入框其它属性，[Input](/#/framework/input) |
| buttonProps | Object | - | 按钮其它属性，[Button](/#/framework/button) |

> 注意， `BtnSearch` 组件中的输入框，使用的是 `Input` 组件。