feat(Select): add item from dataSource to onChange(v,e, item)

Author: 潕量

docs/select/index.en-us.md

@@ -64,7 +64,7 @@ This is because the layer's animation of the overlay is implemented by `classNam
 |Size | selector size<br><br>**optional values**:<br>'small', 'medium', 'large' | Enum | 'medium' |
 | value | Current value for controlled mode | any | - |
 | defaultValue | initial default | any | - |
-| onChange | Callback that fires when Select changes <br><br> **Signature**:<br>Function(value: mixed, actionType: String) => void<br>**Parameters**:<br> _value_: {mixed} Selected value <br>_actionType_: {String} Triggered, 'itemClick', 'enter', 'tag' | Function | func.noop |
+| onChange | Callback that fires when Select changes <br><br> **Signature**:<br>Function(value: mixed, actionType: String) => void<br>**Parameters**:<br> _value_: {mixed} Selected value <br>_actionType_: {String} Triggered, 'itemClick', 'enter', 'tag' <br> _item_: {mixed} value in dataSource(only useDetailValue=false) | Function | func.noop |
 | placeholder | placeholder when there is no value | ReactNode | - |
 | autoWidth | Drop-down menu to align with selector | Boolean | true |
 | label | custom inline label | ReactNode | - |

src/select/auto-complete.jsx

@@ -26,6 +26,7 @@ class AutoComplete extends Base {
          * Select发生改变时触发的回调
          * @param {*} value 选中的值
          * @param {String} actionType 触发的方式, 'itemClick', 'enter', 'change'
+         * @param {*} item 选中的值的对象数据
          */
         onChange: PropTypes.func,
         /**
@@ -145,10 +146,10 @@ class AutoComplete extends Base {
             this.setVisible(false, triggerType);
         }
 
-        this.handleChange(value, triggerType);
+        this.handleChange(value, triggerType, item);
     }
 
-    handleChange = (value, proxy) => {
+    handleChange = (value, proxy, item) => {
         const { disabled, readOnly, filterLocal } = this.props;
 
         if (disabled || readOnly) {
@@ -175,7 +176,7 @@ class AutoComplete extends Base {
             });
         }
 
-        this.props.onChange(value, actionType);
+        this.props.onChange(value, actionType, item);
 
         if (actionType === 'itemClick' || actionType === 'enter') {
             // 点击 item 的时候不会触发关闭，需要手动关闭，其它类型比如 keyDown 等都会有其它事件句柄处理

src/select/base.jsx

@@ -28,12 +28,6 @@ export default class Base extends React.Component {
         value: PropTypes.any, // to be override
         // 初始化的默认值
         defaultValue: PropTypes.any, // to be override
-        /**
-         * Select发生改变时触发的回调
-         * @param {*} value 选中的值
-         * @param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'
-         */
-        onChange: PropTypes.func,
         /**
          * 没有值的时候的占位符
          */

src/select/select.jsx

@@ -37,6 +37,13 @@ class Select extends Base {
          * 初始的默认值
          */
         defaultValue: PropTypes.any,
+        /**
+         * Select发生改变时触发的回调
+         * @param {*} value 选中的值
+         * @param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'
+         * @param {*} item 选中的值的对象数据 (useDetailValue=false有效)
+         */
+        onChange: PropTypes.func,
         /**
          * 传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)
          */
@@ -296,7 +303,7 @@ class Select extends Base {
         if (this.useDetailValue()) {
             return this.handleChange(itemObj.valueDS, triggerType);
         } else {
-            this.handleChange(itemObj.value, triggerType);
+            this.handleChange(itemObj.value, triggerType, itemObj.valueDS);
         }
 
         this.setState({
@@ -329,7 +336,7 @@ class Select extends Base {
         if (this.useDetailValue()) {
             this.handleChange(itemObj.valueDS, triggerType);
         } else {
-            this.handleChange(itemObj.value, triggerType);
+            this.handleChange(itemObj.value, triggerType, itemObj.valueDS);
         }
 
         // 清空搜索

test/select/index-spec.js

@@ -305,6 +305,38 @@ describe('Select', () => {
         wrapper.find('i.next-icon-delete-filling').simulate('click');
     });
 
+    it('should support onChange with mode=single ', (done) => {
+        const dataSource = [{ label: 'xxx', value: '0' }, { label: 'empty', value: 1 }];
+        wrapper.setProps({
+            dataSource,
+            visible: true,
+            onChange:(v, e, item) => {
+                assert(v === 1)
+                assert(item.value === 1)
+                done();
+            }
+        });
+
+        ReactTestUtils.Simulate.click(document.querySelectorAll('.next-menu-item')[1]);
+    });
+
+    it('should support onChange with mode=multiple ', (done) => {
+        const dataSource = [{ label: 'xxx', value: '0' }, { label: 'empty', value: 1 }];
+        wrapper.setProps({
+            dataSource,
+            mode:'multiple',
+            visible: true,
+            onChange:(v, e, item) => {
+                assert(v.length === 1)
+                assert(item.length === 1);
+                done();
+            }
+        });
+
+        ReactTestUtils.Simulate.click(document.querySelectorAll('.next-menu-item')[1]);
+
+    });
+
     it('should support useDetailValue onChange with mode=single ', (done) => {
         const dataSource = [{ label: 'xxx', value: '0' }, { label: 'empty', value: false }];
         wrapper.setProps({