npm package: @riil-frontend/component-select-for-opration
Description: 变体选择器
Latest version: 1.0.1-a.2

# SelectForOperation 添加选项的选择器

#### select-for-opration

这是继承自Select选择器的变体，除了下面定义的相关属性外，其他的API属性继承与Select。SelectForOperation默认支持通过文本框添加和编辑选项，默认支持对选项的删除。可支持对其他操作项的扩展。

#### dataSourse的使用

SelectForOpration主要支持props中传入dataSource作为数据源。

注意：1、默认支持对选项的操作项悬浮显示，因此需要dataSource须包含boolean字段`operation`值为true。2、key值的使用同Select的默认设置。3、添加数据项时默认label和value值相同。

```javascript
const dataSource = [
	{label:'option1', value:'option1'},
    {label:'option2', value:'option2'},
    {label:'operation',value:'operation' ,operation:true}
]

<SelectForOperation  dataSource={dataSource}/>
```

# API

| 参数名   | 说明                     | 必填 | 类型 | 默认值 | 备注 |
| -------- | ------------------------ | ---- | ---- | ------ | ---- |
| value | 当前值，用于受控模式（同Select选择器） | - | any | - | - |
| onChange | Select发生改变时触发的回调<br /><br />**签名**:Function(value: mixed, actionType: String, item: mixed) => void<br />**参数**:<br />*value*: {mixed} 选中的值<br />*actionType*: {String} 触发的方式, 'itemClick', 'enter', 'tag'<br />*item*: {mixed} 选中的值的对象数据 (useDetailValue=false有效) | - | Function | - | - |
| dataSort | 默认选择器添加数据显示下拉菜单的位置<br /><br />**可选值**：<br />true：显示在下拉菜单第一条<br />false：自定义显示下拉菜单的位置<br />只针对添加类型为input类型有效 | - | boolean | true | 自定义时，saveOption，deleteOption，value，onChange需要填写，如果有扩展操作，相关的回调函数需要填写 |
| addType |添加数据项的形式<br /><br />**可选值**：<br />'input'：文本框<br />'drawer'：抽屉|-|String|'input'|-|
| editType |编辑数据项的形式<br /><br />**可选值**：<br />'input'：文本框<br />'drawer'：抽屉|-|String|'input'|-|
| dataSource |数据源，同Select选择器|是|Array<Object/Boolean/Number/String>|-|显示操作列需要设置operation字段为true|
| saveOption |添加项保存的方法<br /><br />**签名**：Function(e:Event, operation:boolean ,type:String ,item: Object)=>void<br />**参数**：<br />*e*:{Event}DOM事件对象，返回文本框的值<br />*operation*:{boolean}返回为 true，用于判断悬浮显示操作项<br />*type*:{String}返回操作类型，'add'为添加，'edit'为编辑<br />*item*:{Object}当前操作选项值对象，添加时null|-|Function|-|-|
| deleteOption |删除选项的方法<br /><br />**签名**：Function(e:Event,item:Object)=>void<br />**参数**：<br />*e*:{Event}DOM事件对象<br />*item*:{Object}当前删除项的值对象|-|Function|-|-|
| openDrawer |打开抽屉的方法<br /><br />**签名**：Function(isOpen:boolean,type:String,item:Object)=>void<br />**参数**：*isOpen*:{boolean}返回true<br />*type*:{String}:'add'表示添加时打开抽屉，'edit'表示编辑时打开抽屉<br />*item*:{Object}当前操作选项值对象，添加时为null|-|Function|-|-|
| operationItem |扩展添加操作项<br />数组类型，元素为对象，包含两个字段，第一个为`node:{ReactNode}`为操作项；第二个为`func：{Functon}`类型，为回调函数<br /><br />**回调函数签名：**（e:Event,item:Object）=>void<br /><br />**参数**:<br />e:{Event}DOM事件对象<br />item:{Object}当前操作选项值对象|-|Array<Object>|null|[<br />{node:<span></span>,func:()=>{}},]|
| validator |校验文本框的方法<br /><br />**签名**：Function(val:String,e:Event,type:String)=>String/null<br />**参数**：<br />*val*:{String}当前需要校验的文本框值<br />*e*:{Event}DOM事件对象<br />*type*:{String}校验的类型，'add'为添加，'edit'为编辑<br />**返回值**：<br />{String/null},返回校验信息，必须有返回值，有校验提示返回校验信息，没有提示返回null或者空字符串|-|Function|-|-|
| addItemSort |添加按钮的位置<br /><br />**可选值**：<br />'first':添加按钮在下拉菜单的第一项<br />'last':添加按钮在下拉菜单的 最后一项|-|String|'first'|-|
| className |下拉菜单的样式名|-|String|'itemlist'||
| style |选择器样式|-|Object|-|{width：300}|
| popupStyle |下拉菜单的样式|-|Object|-|{width：300}|
| mode |选择器模式<br /><br />**可选值**：<br />'single', 'multiple'|-|String|'single'|-|
| isOperation |添加项是否需要悬浮显示操作按钮|-|boolean|true|-|