ant-design/components/transfer/index.jsx

import React, { Component, PropTypes } from 'react';
import List from './list.jsx';
import Operation from './operation.jsx';
import Search from './search.jsx';
import classNames from 'classnames';

function noop() {
}

class Transfer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      leftFilter: '',
      rightFilter: '',
      leftCheckedKeys: [],
      rightCheckedKeys: [],
    };
  }

  splitDataSource() {
    const { targetKeys, dataSource } = this.props;

    let leftDataSource = Object.assign([], dataSource);
    let rightDataSource = [];

    if ( targetKeys.length > 0 ) {
      targetKeys.forEach((targetKey) => {
        rightDataSource.push(leftDataSource.find((data, index) => {
          if( data.key === targetKey ) {
            leftDataSource.splice(index, 1);
            return true;
          }
        }));
      });
    }

    return {
      leftDataSource: leftDataSource,
      rightDataSource: rightDataSource,
    };
  }

  moveTo(direction) {
    const { targetKeys } = this.props;
    const { leftCheckedKeys, rightCheckedKeys } = this.state;
    // move items to target box
    const newTargetKeys = direction === 'right' ?
      leftCheckedKeys.concat(targetKeys) :
      targetKeys.filter((targetKey) => !rightCheckedKeys.some((checkedKey) => targetKey === checkedKey));

    // empty checked keys
    this.setState({
      [direction === 'right' ? 'leftCheckedKeys' : 'rightCheckedKeys']:  [],
    });

    this.props.onChange(newTargetKeys);
  }

  getGlobalCheckStatus(direction) {
    const { leftDataSource, rightDataSource } = this.splitDataSource();
    const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state;

    const dataSource = direction === 'left' ? leftDataSource : rightDataSource;
    const filter = direction === 'left' ? leftFilter : rightFilter;
    const checkedKeys = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
    const filteredDataSource = this.filterDataSource(dataSource, filter);

    let globalCheckStatus;

    if ( checkedKeys.length > 0 ) {
      if ( checkedKeys.length < filteredDataSource.length ) {
        globalCheckStatus = 'part';
      } else {
        globalCheckStatus = 'all';
      }
    } else {
      globalCheckStatus = 'none';
    }
    return globalCheckStatus;
  }

  filterDataSource(dataSource, filter) {
    return dataSource.filter(item => {
      const itemText = this.props.render(item);
      return this.matchFilter(itemText, filter);
    });
  }

  matchFilter(text, filterText) {
    const regex = new RegExp(filterText);
    return text.match(regex);
  }

  handleSelectAll(direction) {
    const { leftDataSource, rightDataSource } = this.splitDataSource();
    const { leftFilter, rightFilter } = this.state;
    const dataSource = direction === 'left' ? leftDataSource : rightDataSource;
    const filter = direction === 'left' ? leftFilter : rightFilter;
    const checkStatus = this.getGlobalCheckStatus(direction);
    let holder = [];

    if ( checkStatus === 'all' ) {
      holder = [];
    } else {
      holder = this.filterDataSource(dataSource, filter).map(item => item.key);
    }

    this.setState({
      [direction + 'CheckedKeys']: holder,
    });
  }

  handleFilter(direction, e) {
    this.setState({
      // deselect all
      [direction + 'CheckedKeys']: [],
      // add filter
      [direction + 'Filter']: e.target.value,