Update Select with events

ElemeFE · Aug 23, 2017 · 2f2b821 · 2f2b821
1 parent 0ffdb0a
commit 2f2b821
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-react",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Element UI for React",
   "private": false,
   "main": "dist/npm/es5/index.js",

diff --git a/site/docs/en-US/select.md b/site/docs/en-US/select.md
@@ -465,6 +465,8 @@ render() {
 |---------|---------|---------|
 | onChange | triggers when the selected value changes | current selected value |
 | onVisibleChange | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
+| onRemoveTag | triggers when a tag is removed in multiple mode | removed tag value |
+| onClear | triggers when the clear icon is clicked in a clearable Select | - |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

diff --git a/site/docs/zh-CN/select.md b/site/docs/zh-CN/select.md
@@ -451,9 +451,12 @@ render() {
 | loading | 是否正在从远程获取数据 | boolean | — | false |
 
 ### Select Events
-| 事件名称 | 说明 | 回调参数 | 类型 |
+| 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
-| onChange | 选中值发生变化时触发 | 目前的选中值 | function(value, option) |
+| onChange | 选中值发生变化时触发 | 目前的选中值 |
+| onVisibleChange | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
+| onRemoveTag | 多选模式下移除tag时触发 | 移除的tag值 |
+| onClear | 可清空的单选模式下用户点击清空按钮时触发 | - |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

diff --git a/src/select/Select.jsx b/src/select/Select.jsx
@@ -133,6 +133,7 @@ class Select extends Component {
       if (this.props.onVisibleChange) {
         this.props.onVisibleChange(state.visible);
       }
+
       this.onVisibleChange(state.visible);
     }
 
@@ -700,6 +701,10 @@ class Select extends Component {
       if (this.props.onChange) {
         this.props.onChange('');
       }
+
+      if (this.props.onClear) {
+        this.props.onClear();
+      }
     }
   }
 
@@ -711,7 +716,11 @@ class Select extends Component {
 
       selected.splice(index, 1);
 
-      this.setState({ selected });
+      this.setState({ selected }, () => {
+        if (this.props.onRemoveTag) {
+          this.props.onRemoveTag(tag.props.value);
+        }
+      });
     }
   }
 
@@ -975,7 +984,10 @@ Select.propTypes = {
   filterMethod: PropTypes.func,
   multiple: PropTypes.bool,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  onVisibleChange: PropTypes.func,
+  onRemoveTag: PropTypes.func,
+  onClear: PropTypes.func
 }
 
 export default ClickOutside(Select);