antui-admin/lib/components/treetransfer/treetransfer.js

admin ui for antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

require('antd/lib/button/style/css');

var _checkbox = require('antd/lib/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

require('antd/lib/checkbox/style/css');

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

require('antd/lib/input/style/css');

var _tree = require('antd/lib/tree');

var _tree2 = _interopRequireDefault(_tree);

require('antd/lib/tree/style/css');

var _spin = require('antd/lib/spin');

var _spin2 = _interopRequireDefault(_spin);

require('antd/lib/spin/style/css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Search = _input2.default.Search;
var TreeNode = _tree2.default.TreeNode;
/**
 *  双栏穿梭选择框 其中，左边一栏为Tree
 */

var TreeTransfer = function (_React$Component) {
  (0, _inherits3.default)(TreeTransfer, _React$Component);

  function TreeTransfer(props) {
    (0, _classCallCheck3.default)(this, TreeTransfer);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TreeTransfer.__proto__ || (0, _getPrototypeOf2.default)(TreeTransfer)).call(this, props));

    _initialiseProps.call(_this);

    var _this$_init = _this._init(props),
        treeData = _this$_init.treeData,
        listData = _this$_init.listData,
        treeLeafKeys = _this$_init.treeLeafKeys,
        treeCheckLeafKeys = _this$_init.treeCheckLeafKeys;

    _this.state = {
      treeData: treeData,
      listData: listData,
      treeLeafKeys: treeLeafKeys,
      treeCheckLeafKeys: treeCheckLeafKeys,
      expandedKeys: treeCheckLeafKeys.length === 0 ? [] : treeCheckLeafKeys,
      listCheckKeys: [],
      autoExpandParent: true,
      treeLoading: false,
      searchValue: ""
    };
    return _this;
  }

  // init


  (0, _createClass3.default)(TreeTransfer, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _init = this._init(nextProps),
          treeData = _init.treeData,
          listData = _init.listData,
          treeLeafKeys = _init.treeLeafKeys,
          treeCheckLeafKeys = _init.treeCheckLeafKeys;

      this.setState({
        treeData: treeData,
        listData: listData,
        treeLeafKeys: treeLeafKeys,
        treeCheckLeafKeys: treeCheckLeafKeys
      });
    }

    // tree checkbox click


    // tree init


    // list checkbox click


    // list checkbox all click


    // list delete 


    // list search


    // tree search

  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          title = _props.title,
          targetKeys = _props.targetKeys,
          showSearch = _props.showSearch,
          searchPlaceholder = _props.searchPlaceholder,
          onChange = _props.onChange;
      var _state = this.state,
          treeLoading = _state.treeLoading,
          treeData = _state.treeData,
          listData = _state.listData,
          treeLeafKeys = _state.treeLeafKeys,
          treeCheckLeafKeys = _state.treeCheckLeafKeys,
          listCheckKeys = _state.listCheckKeys;


      var listBodyStyle = (0, _classnames2.default)({
        "antui-treetransfer-list-body": true,
        "antui-treetransfer-list-body-has-search": showSearch
      });

      return _react2.default.createElement(
        'div',
        { className: 'antui-treetransfer' },
        _react2.default.createElement(
          'div',
          { className: 'antui-treetransfer-list antui-treetransfer-left' },
          _react2.default.createElement(
            'div',
            { className: 'antui-treetransfer-list-header' },
            _react2.default.createElement(
              'span',
              { className: 'antui-treetransfer-list-header-select' },
              treeCheckLeafKeys.length === 0 ? treeLeafKeys.length : treeCheckLeafKeys.length + '/' + treeLeafKeys.length,
              ' \u6761\u6570\u636E'
            ),
            _react2.default.createElement(
              'span',
              { className: 'antui-treetransfer-list-header-title' },
              _react2.default.createElement(
                'span',
                null,
                title[0]
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { className: listBodyStyle },
            showSearch ? _react2.default.createElement(
              'div',
              { className: 'antui-treetransfer-list-body-search' },
              _react2.default.createElement(Search, { placeholder: searchPlaceholder, onSearch: this._handleTreeSearch })
            ) : null,
            _react2.default.createElement(
              'div',
              { className: 'antui-treetransfer-list-body-content' },
              treeLoading ? _react2.default.createElement(
                'div',
                { className: 'antui-treetransfer-list-loading' },
                _react2.default.createElement(_spin2.default, null)
              ) : this._generateTreeNodes(treeData)
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'antui-treetransfer-operation' },
          _react2.default.createElement(_button2.default, { type: 'primary', icon: 'right', size: 'small', disabled: treeCheckLeafKeys.length === 0, onClick: function onClick() {
              return onChange(treeCheckLeafKeys);
            } }),
          _react2.default.createElement(_button2.default, { type: 'primary', icon: 'left', size: 'small', disabled: listCheckKeys.length === 0, onClick: this._handleListDelete })
        ),
        _react2.default.createElement(
          'div',
          { className: 'antui-treetransfer-list antui-treetransfer-right' },
          _react2.default.createElement(
            'div',
            { className: 'antui-treetransfer-list-header' },
            _react2.default.createElement(_checkbox2.default, { onClick: this._handleListCheckAll, indeterminate: listCheckKeys.length > 0 && listCheckKeys.length < targetKeys.length, checked: listCheckKeys.length > 0 && listCheckKeys.length === targetKeys.length }),
            _react2.default.createElement(
              'span',
              { className: 'antui-treetransfer-list-header-select' },
              listCheckKeys.length === 0 ? targetKeys.length : listCheckKeys.length + '/' + targetKeys.length,
              ' \u6761\u6570\u636E'
            ),
            true ? null : _react2.default.createElement(
              'a',
              { className: 'antui-treetransfer-list-header-delete', onClick: this._handleListDelete },
              '\u5220\u9664'
            ),
            _react2.default.createElement(
              'span',
              { className: 'antui-treetransfer-list-header-title' },
              _react2.default.createElement(
                'span',
                null,
                title[1]
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { className: listBodyStyle },
            showSearch ? _react2.default.createElement(
              'div',
              { className: 'antui-treetransfer-list-body-search' },
              _react2.default.createElement(Search, { placeholder: searchPlaceholder, onSearch: this._handleListSearch })
            ) : null,
            _react2.default.createElement(
              'ul',
              { className: 'antui-treetransfer-list-body-content' },
              listData.map(function (_ref) {
                var key = _ref.key,
                    title = _ref.title;
                return _react2.default.createElement(
                  'li',
                  { key: key, className: 'list' },
                  _react2.default.createElement(_checkbox2.default, { onClick: function onClick(e) {
                      return _this2._handleListCheck(e, key);
                    }, checked: listCheckKeys.indexOf(key) > -1 }),
                  _react2.default.createElement(
                    'span',
                    null,
                    title
                  )
                );
              })
            )
          )
        )
      );
    }
  }]);
  return TreeTransfer;
}(_react2.default.Component);

TreeTransfer.propTypes = {
  /** 标题集合 */
  title: _react.PropTypes.array,
  /** 数据源，其中的数据将会被渲染到左侧框（Tree）中 */
  dataSource: _react.PropTypes.array,
  /** 显示在右侧框数据的key集合 */
  targetKeys: _react.PropTypes.array,
  /** 选项在左栏向右栏转移或者右栏数据更改时的回调函数 */
  onChange: _react.PropTypes.func,
  /** 是否显示搜索框 */
  showSearch: _react.PropTypes.bool,
  /** 搜索框的默认值 */
  searchPlaceholder: _react.PropTypes.string,
  /** 指定数据列的key */
  rowKey: _react.PropTypes.string,
  /** 指定数据列的title */
  rowTitle: _react.PropTypes.string,
  /** 指定数据列的children */
  rowChildren: _react.PropTypes.string
};
TreeTransfer.defaultProps = {
  title: ['源数据', '目的数据'],
  dataSource: [],
  targetKeys: [],
  showSearch: false,
  searchPlaceholder: '请输入搜索内容',
  rowKey: 'key',
  rowTitle: 'title',
  rowChildren: 'children'
};

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this._init = function (_ref2) {
    var dataSource = _ref2.dataSource,
        targetKeys = _ref2.targetKeys,
        rowKey = _ref2.rowKey,
        rowTitle = _ref2.rowTitle;

    // get leaf keys
    var treeLeafKeys = [];
    var listData = [];
    var treeCheckLeafKeys = [];

    var loop = function loop(data) {
      return data.map(function (item) {
        var children = item[_this3.props.rowChildren],
            key = item[_this3.props.rowKey],
            title = item[_this3.props.rowTitle];


        if (children === undefined) {
          treeLeafKeys.push(key);
          if (targetKeys.indexOf(key) > -1) {
            treeCheckLeafKeys.push(key);
            listData.push({ key: key, title: title });
          }
        } else {
          loop(item.children);
        }
      });
    };

    loop(dataSource);

    return {
      treeData: dataSource,
      treeLeafKeys: treeLeafKeys,
      listData: listData,
      treeCheckLeafKeys: treeCheckLeafKeys
    };
  };

  this._handleTreeCheck = function (checkedKeys) {
    // filter tree leaf keys
    var treeCheckLeafKeys = checkedKeys.filter(function (_k) {
      return _this3.state.treeLeafKeys.indexOf(_k) > -1;
    });
    _this3.setState({ treeCheckLeafKeys: treeCheckLeafKeys });
  };

  this._generateTreeNodes = function (treeData) {
    var searchValue = _this3.state.searchValue;

    var expandedKeys = [];

    var loop = function loop(data) {
      return data.map(function (item) {
        var children = item[_this3.props.rowChildren],
            key = item[_this3.props.rowKey],
            title = item[_this3.props.rowTitle],
            others = (0, _objectWithoutProperties3.default)(item, [_this3.props.rowChildren, _this3.props.rowKey, _this3.props.rowTitle]);

        if (children === undefined) {
          var _title = _react2.default.createElement(
            'span',
            null,
            title
          );
          // search value higlight
          if (searchValue !== "" && title.indexOf(searchValue) > -1) {
            var index = title.indexOf(searchValue);
            expandedKeys.push(key);

            _title = _react2.default.createElement(
              'span',
              null,
              title.substr(0, index),
              _react2.default.createElement(
                'span',
                { style: { color: '#f50' } },
                searchValue
              ),
              title.substr(index + searchValue.length)
            );
          }
          return _react2.default.createElement(TreeNode, (0, _extends3.default)({ key: key, title: _title, isLeaf: true }, others));
        } else {
          return _react2.default.createElement(
            TreeNode,
            (0, _extends3.default)({ key: key, title: title }, others),
            loop(item.children)
          );
        }
      });
    };

    var treeProps = {
      checkable: true,
      onCheck: _this3._handleTreeCheck,
      checkedKeys: _this3.state.treeCheckLeafKeys,
      expandedKeys: searchValue !== "" ? expandedKeys : _this3.state.expandedKeys,
      autoExpandParent: searchValue !== "" ? true : _this3.state.autoExpandParent,
      onExpand: function onExpand(keys) {
        _this3.setState({
          expandedKeys: keys,
          autoExpandParent: false
        });
      }
    };

    return _react2.default.createElement(
      _tree2.default,
      treeProps,
      loop(treeData)
    );
  };

  this._handleListCheck = function (e, key) {
    if (e.target.checked) {
      _this3.setState({
        listCheckKeys: [].concat((0, _toConsumableArray3.default)(_this3.state.listCheckKeys), [key])
      });
    } else {
      _this3.setState({
        listCheckKeys: _this3.state.listCheckKeys.filter(function (_k) {
          return _k !== key;
        })
      });
    }
  };

  this._handleListCheckAll = function (e) {
    if (e.target.checked) {
      _this3.setState({
        listCheckKeys: _this3.props.targetKeys
      });
    } else {
      _this3.setState({
        listCheckKeys: []
      });
    }
  };

  this._handleListDelete = function () {
    // delete tree clicked
    var _state2 = _this3.state,
        treeCheckLeafKeys = _state2.treeCheckLeafKeys,
        listCheckKeys = _state2.listCheckKeys;

    _this3.setState({
      treeCheckLeafKeys: treeCheckLeafKeys.filter(function (_k) {
        return listCheckKeys.indexOf(_k) === -1;
      }),
      listCheckKeys: []
    });
    _this3.props.onChange && _this3.props.onChange(_this3.props.targetKeys.filter(function (_k) {
      return listCheckKeys.indexOf(_k) === -1;
    }));
  };

  this._handleListSearch = function (searchValue) {
    if (searchValue === "") {
      var _init2 = _this3._init(_this3.props),
          listData = _init2.listData;

      _this3.setState({
        listData: listData
      });
    } else {
      _this3.setState({
        listData: _this3.state.listData.filter(function (_ref3) {
          var title = _ref3.title;
          return title.indexOf(searchValue) > -1;
        })
      });
    }
  };

  this._handleTreeSearch = function (searchValue) {
    // no search
    if (searchValue === "") {
      _this3.setState({
        searchValue: "",
        autoExpandParent: false
      });
    } else {
      _this3.setState({ searchValue: searchValue });
    }
  };
};

exports.default = TreeTransfer;
module.exports = exports['default'];