feat: add Transfer[onSelectChange], close: ant-design#2968 (ant-desig…

…n#2984)

components/transfer/demo/basic.md

@@ -47,12 +47,17 @@ const App = React.createClass({
     console.log(targetKeys, direction, moveKeys);
     this.setState({ targetKeys });
   },
+  handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
+    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
+    console.log('targetSelectedKeys: ', targetSelectedKeys);
+  },
   render() {
     return (
       <Transfer
         dataSource={this.state.mockData}
         targetKeys={this.state.targetKeys}
         onChange={this.handleChange}
+        onSelectChange={this.handleSelectChange}
         render={item => item.title}
       />
     );

components/transfer/index.en-US.md

@@ -22,6 +22,7 @@ To transfer the elements between two columns in an intuitive and efficient way.
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) |     |
 | targetKeys | A set of keys of elements that are listed on the right column. | Array | [] |
 | onChange | A callback function that is executed when the transfer between columns is complete. | Function(targetKeys, direction, moveKeys) |  |
+| onSelectChange | A callback function which is executed when selected items are changed. | Function(sourceSelectedKeys, targetSelectedKeys) | |
 | listStyle | A custom CSS style used for rendering the transfer columns. | Object |  |
 | className | A custom CSS class. | String |  |
 | titles | A set of titles that are sorted from left to right. | Array | ['源列表', '目的列表'] |

components/transfer/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PropTypes } from 'react';
 import List from './list';
 import Operation from './operation';
@@ -19,8 +19,9 @@ export interface TransferItem {
 export interface TransferProps {
   dataSource: Array<TransferItem>;
   render?: (record: TransferItem) => any;
-  targetKeys: Array<string>;
+  targetKeys: string[];
   onChange?: (targetKeys: Array<TransferItem>, direction: string, moveKeys: any) => void;
+  onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
   listStyle?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
@@ -46,6 +47,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
     render: noop,
     targetKeys: [],
     onChange: noop,
+    onSelectChange: noop,
     titles: ['源列表', '目的列表'],
     operations: [],
     showSearch: false,
@@ -142,7 +144,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
   }
 
   moveTo = (direction) => {
-    const { targetKeys } = this.props;
+    const { targetKeys, onChange } = this.props;
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys;
     // move items to target box
@@ -151,22 +153,34 @@ export default class Transfer extends React.Component<TransferProps, any> {
       : targetKeys.filter(targetKey => !moveKeys.some(checkedKey => targetKey === checkedKey));
 
     // empty checked keys
+    const oppositeDirection = direction === 'right' ? 'left' : 'right';
     this.setState({
-      [direction === 'right' ? 'leftCheckedKeys' : 'rightCheckedKeys']: [],
+      [`${oppositeDirection}CheckedKeys`]: [],
     });
+    this.handleSelectChange(oppositeDirection, []);
 
-    this.props.onChange(newTargetKeys, direction, moveKeys);
+    onChange(newTargetKeys, direction, moveKeys);
   }
 
   moveToLeft = () => this.moveTo('left')
   moveToRight = () => this.moveTo('right')
 
+  handleSelectChange(direction: string, holder: string[]) {
+    const { leftCheckedKeys, rightCheckedKeys } = this.state;
+    const onSelectChange = this.props.onSelectChange;
+    if (direction === 'left') {
+      onSelectChange(holder, rightCheckedKeys);
+    } else {
+      onSelectChange(leftCheckedKeys, holder);
+    }
+  }
+
   handleSelectAll = (direction, filteredDataSource, checkAll) => {
     const holder = checkAll ? [] : filteredDataSource.map(item => item.key);
-
     this.setState({
       [`${direction}CheckedKeys`]: holder,
     });
+    this.handleSelectChange(direction, holder);
   }
 
   handleLeftSelectAll = (filteredDataSource, checkAll) => (
@@ -213,6 +227,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
     this.setState({
       [`${direction}CheckedKeys`]: holder,
     });
+    this.handleSelectChange(direction, holder);
   }
 
   handleLeftSelect = (selectedItem, checked) => this.handleSelect('left', selectedItem, checked);

components/transfer/index.zh-CN.md

@@ -23,6 +23,7 @@ english: Transfer
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 React element | Function(record)  |     |
 | targetKeys | 显示在右侧框数据的key集合 | Array  | [] |
 | onChange | 选项在两栏之间转移时的回调函数 | Function(targetKeys, direction, moveKeys) |  |
+| onSelectChange | 选中项发生改变时的回调函数 | Function(sourceSelectedKeys, targetSelectedKeys) | |
 | listStyle | 两个穿梭框的自定义样式 | Object |  |
 | className | 自定义类 | String |  |
 | titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] |