## 选择器

### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| visible | 是否可见 | `bool` | `false` |
| name | 被选择的名词名称 | `string` | `` |
| detail | 解释说明 | `string` | `` |
| zIndex | css z-index | `number` | `1050` |
| data | @transformable 数据,如果data==null 会显示正在加载中 直到传入非null的data | `bool` | `false` |
| selectedIdList | @transformable 被选中的id列表,被选中在右边,没有被选中在左边 | `arrayOf(TypeID)` | `[]` |
| preselectedIdList | @transformable 被预选中的id列表,被预选中背景颜色是蓝色，当点击添加或切换后会切换selected | `arrayOf(TypeID)` | `[]` |
| onChange | 当被选中或没有被选中的项发生变化时回调callback(data) | `function` | `undefined` |
| onSave | 保存修改，当被关闭时调用 onSave(当前被选中的列表) | `function` | `undefined` |
| onClose | 放弃修改，当被关闭时调用 | `function` | `undefined` |
| maxSelected | 最多可以被选中几个，0表示没有限制 | `number` | `0` |
| onSearch | 当正在搜索时回调,callback(searchKeyword,data) | `function` | `undefined` |
| onNeedMoreData | 当左边当选择选项区滑动到底部时想要获得更多的可展示数据时调用,callback(searchKeyword,data) | `function` | `undefined` |
| loading | 当前是否正在加载数据中,是的话会在左边选项列表最下面显示加载中 | `bool` | `false` |
| warning | @transformable 警告信息，会以红色的文字显示在中间.当 warning==null || warning.length===0 时不会显示警告信息，否则会显示 | `string` | `undefined` |

### data 属性说明
options属性是一个数组用于传入所有下拉选项，options数组的每个元素的必须具有的属性如下（当然你也可以传入其它属性Picker组件会忽略它们）：

| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| id | 用于跟踪选项 必须保证唯一性 | `PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string].isRequired` | `undefined` |
| search | 用于搜索时的关键字匹配,如果search==null，search=id | `string` | `undefined` |
| display | 用于在列表里显示每个选项的样子,如果该属性是react元素将把这个元素显示在选项列表里否则将作为文字显示,如果display==null，display=id | `string or react.element` | `undefined` |

### 异步加载选项列表
如果选项列表需要异步加载，可以先传入data=null，等选项列表数据加载成功再给data属性赋新值

### 异步搜索
当用户在输入框搜索时会回调onSearch(searchKeyword,data),告诉你的参数分别是 搜索关键字，当前数据。你可以在收到onSearch回调时去根据搜索关键字加载更多数据。
在请求数据的过程中你需要设置loading=true，等数据加载完毕你需要传入新的data属性以及设置loading=false

```js
  onAsnycSearch(searchKeyword, data) {
      this.setState({
        loadingAsyncSearch: true
      });
      this.timer = window.setTimeout(() => {
        this.setState({
          dataAsyncSearch: data.concat(mockOptions(10, searchKeyword)),
          loadingAsyncSearch: false
        });
      }, 1000);
  }
```

### 异步加载更多
当左边当选择选项区滑动到底部时想要获得更多的可展示数据时调用会回调onNeedMoreData(searchKeyword,data),告诉你的参数分别是 搜索关键字，当前数据。你可以在收到onSearch回调时去根据搜索关键字加载更多数据。
在请求数据的过程中你需要设置loading=true，等数据加载完毕你需要传入新的data属性以及设置loading=false

```js
  onAsnycLoadmore(searchKeyword, data) {
      this.setState({
        loadingAsyncLoadmore: true
      });
      this.timer = window.setTimeout(() => {
        this.setState({
          dataAsyncLoadmore: data.concat(mockOptions(10, searchKeyword)),
          loadingAsyncLoadmore: false
        });
      }, 1000);
  }
```