antui-admin/lib/components/treetransfer/asyncTreetransfer.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 _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

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');

var _treeTitle = require('./treeTitle');

var _treeTitle2 = _interopRequireDefault(_treeTitle);

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

var Search = _input2.default.Search;
var TreeNode = _tree2.default.TreeNode;

/**
 *  双栏穿梭选择框 其中，左边一栏为Tree
 */

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

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

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

    _initialiseProps.call(_this);

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

    _this.state = {
      treeData: treeData,
      listData: listData,
      treeLeafKeys: treeLeafKeys,
      treeSelectLeaf: treeSelectLeaf,
      treeSelectLeafKeys: treeSelectLeafKeys,
      expandedKeys: [],
      listCheckNodes: [],
      autoExpandParent: true,
      treeLoading: false,
      searchValue: "",
      searching: false
    };
    return _this;
  }

  // init


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

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

    // tree init

    //

    // select all children nodes


    // canel select all childr nen nodes


    // list checkbox click


    // list checkbox all click


    // _handleTreeToList

    // list delete 


    // list search


    // tree search


    // tree load data

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

      var _props = this.props,
          title = _props.title,
          targetKeys = _props.targetKeys,
          leafCount = _props.leafCount,
          showSearch = _props.showSearch,
          searchPlaceholder = _props.searchPlaceholder;
      var _state = this.state,
          treeLoading = _state.treeLoading,
          treeData = _state.treeData,
          listData = _state.listData,
          treeSelectLeaf = _state.treeSelectLeaf,
          listCheckNodes = _state.listCheckNodes;


      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' },
              treeSelectLeaf.length === 0 ? leafCount : treeSelectLeaf.length + '/' + leafCount,
              ' \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: treeSelectLeaf.length === 0, onClick: this._handleTreeToList }),
          _react2.default.createElement(_button2.default, { type: 'primary', icon: 'left', size: 'small', disabled: listCheckNodes.length === 0, onClick: this._handleListToTree })
        ),
        _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: listCheckNodes.length > 0 && listCheckNodes.length < targetKeys.length, checked: listCheckNodes.length > 0 && listCheckNodes.length === targetKeys.length }),
            _react2.default.createElement(
              'span',
              { className: 'antui-treetransfer-list-header-select' },
              listCheckNodes.length === 0 ? targetKeys.length : listCheckNodes.length + '/' + targetKeys.length,
              ' \u6761\u6570\u636E'
            ),
            _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: key, title: title });
                    }, checked: listCheckNodes.filter(function (_ref2) {
                      var _k = _ref2.key;
                      return _k === key;
                    }).length > 0 }),
                  _react2.default.createElement(
                    'span',
                    null,
                    title
                  )
                );
              })
            )
          )
        )
      );
    }
  }]);
  return AsyncTreetransfer;
}(_react2.default.Component);

AsyncTreetransfer.propTypes = {
  /** 标题集合 */
  title: _react.PropTypes.array,
  /** 数据源，其中的数据将会被渲染到左侧框（Tree）中 */
  dataSource: _react.PropTypes.array,
  /** 显示在右侧框数据的key集合 */
  targetKeys: _react.PropTypes.array,
  /** 左侧框树叶子节点的长度 */
  leafCount: _react.PropTypes.number,
  /** 选项在左栏向右栏转移或者右栏数据更改时的回调函数 */
  onChange: _react.PropTypes.func,
  /** 异步数据加载与查询 */
  onLoadTree: _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
};
AsyncTreetransfer.defaultProps = {
  title: ['源数据', '目的数据'],
  dataSource: [],
  targetKeys: [],
  leafCount: 0,
  showSearch: false,
  searchPlaceholder: '请输入搜索内容',
  rowKey: 'key',
  rowTitle: 'title',
  rowChildren: 'children'
};

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

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

    // get leaf keys
    var listKeys = targetKeys.map(function (_ref4) {
      var key = _ref4.key;
      return key;
    });
    var treeLeafKeys = [];
    var treeSelectLeaf = [];
    var treeSelectLeafKeys = [];

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


        if (children === undefined) {
          treeLeafKeys.push(key);
          if (listKeys.indexOf(key) > -1) {
            treeSelectLeaf.push(item);
            treeSelectLeafKeys.push(key);
          }
        } else {
          loop(item.children);
        }
      });
    };

    loop(dataSource);

    return {
      treeData: dataSource,
      listData: targetKeys,
      treeLeafKeys: treeLeafKeys,
      treeSelectLeaf: treeSelectLeaf,
      treeSelectLeafKeys: treeSelectLeafKeys
    };
  };

  this._generateTreeNodes = function (treeData) {
    var _state2 = _this3.state,
        searching = _state2.searching,
        searchValue = _state2.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, name: title, title: _title, isLeaf: true }, others));
        } else {
          var treeTitleProps = {
            title: title,
            onSelect: function onSelect(e) {
              return _this3._parentNodeSelect(e, key, children);
            },
            onCanel: function onCanel(e) {
              return _this3._parentNodeCanel(e, key, children);
            }
          };
          return _react2.default.createElement(
            TreeNode,
            (0, _extends3.default)({ key: key, title: _react2.default.createElement(_treeTitle2.default, treeTitleProps) }, others),
            loop(item.children)
          );
        }
      });
    };
    var treeNodes = loop(treeData);
    var treeProps = {
      checkable: false,
      multiple: true,
      onSelect: _this3._handleTreeSelect,
      selectedKeys: _this3.state.treeSelectLeafKeys,
      loadData: _this3._treeLoadData,
      expandedKeys: searching ? expandedKeys : _this3.state.expandedKeys,
      autoExpandParent: searchValue !== "" ? true : _this3.state.autoExpandParent,
      onExpand: function onExpand(keys) {
        // console.log(keys);
        _this3.setState({
          expandedKeys: keys,
          autoExpandParent: false
        });
      }
    };

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

  this._handleTreeSelect = function (selectedKeys, _ref5) {
    var selectedNodes = _ref5.selectedNodes;

    // console.log(selectedNodes);
    var treeSelectLeafKeys = selectedKeys.filter(function (_k) {
      return _this3.state.treeLeafKeys.indexOf(_k) > -1;
    });
    var treeSelectLeaf = selectedNodes.map(function (_ref6) {
      var key = _ref6.key,
          props = _ref6.props;
      var title = props.name,
          isLeaf = props.isLeaf;

      if (isLeaf) {
        return { key: key, title: title };
      }
    }).filter(function (_v) {
      return _v !== undefined;
    });
    // console.log(treeSelectLeaf);
    _this3.setState({ treeSelectLeafKeys: treeSelectLeafKeys, treeSelectLeaf: treeSelectLeaf });
  };

  this._getLeafNodes = function (dt) {
    var _keys = [];
    var _nodes = [];

    // console.log(dt);
    var loop = function loop(data) {
      return data.forEach(function (item) {
        var children = item[_this3.props.rowChildren],
            key = item[_this3.props.rowKey];

        if (children === undefined) {
          _keys.push(key);
          _nodes.push(item);
        } else {
          loop(item.children);
        }
      });
    };

    loop([dt]);
    return { _keys: _keys, _nodes: _nodes };
  };

  this._parentNodeSelect = function (e, key, children) {
    e.preventDefault();
    e.stopPropagation();

    new _promise2.default(function (resolve) {
      _this3.props.onLoadTree && _this3.props.onLoadTree({ type: '_load', value: key, resolve: resolve });
    }).then(function () {
      var _getLeafNodes = _this3._getLeafNodes({ key: key, children: children }),
          _keys = _getLeafNodes._keys,
          _nodes = _getLeafNodes._nodes;

      var _state3 = _this3.state,
          treeSelectLeaf = _state3.treeSelectLeaf,
          treeSelectLeafKeys = _state3.treeSelectLeafKeys;


      _this3.setState({
        treeSelectLeaf: [].concat((0, _toConsumableArray3.default)(_nodes.filter(function (_ref7) {
          var key = _ref7.key;
          return treeSelectLeafKeys.indexOf(key) === -1;
        })), (0, _toConsumableArray3.default)(treeSelectLeaf)),
        treeSelectLeafKeys: [].concat((0, _toConsumableArray3.default)(treeSelectLeafKeys), (0, _toConsumableArray3.default)(_keys))
      });
    });
  };

  this._parentNodeCanel = function (e, key, children) {
    e.preventDefault();
    e.stopPropagation();

    var _getLeafNodes2 = _this3._getLeafNodes({ key: key, children: children }),
        _keys = _getLeafNodes2._keys;

    var _state4 = _this3.state,
        treeSelectLeaf = _state4.treeSelectLeaf,
        treeSelectLeafKeys = _state4.treeSelectLeafKeys;


    _this3.setState({
      treeSelectLeaf: treeSelectLeaf.filter(function (_ref8) {
        var key = _ref8.key;
        return _keys.indexOf(key) === -1;
      }),
      treeSelectLeafKeys: treeSelectLeafKeys.filter(function (_k) {
        return _keys.indexOf(_k) === -1;
      })
    });
  };

  this._handleListCheck = function (e, _ref9) {
    var key = _ref9.key,
        title = _ref9.title;

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

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

  this._handleTreeToList = function () {
    var _state5 = _this3.state,
        treeSelectLeaf = _state5.treeSelectLeaf,
        treeSelectLeafKeys = _state5.treeSelectLeafKeys;
    var _props2 = _this3.props,
        targetKeys = _props2.targetKeys,
        onChange = _props2.onChange;


    onChange && onChange([].concat((0, _toConsumableArray3.default)(targetKeys.filter(function (_ref11) {
      var key = _ref11.key;
      return treeSelectLeafKeys.indexOf(key) === -1;
    })), (0, _toConsumableArray3.default)(treeSelectLeaf)));
  };

  this._handleListToTree = function () {
    // delete tree clicked
    var treeSelectLeafKeys = _this3.state.treeSelectLeafKeys;

    _this3.setState({
      listCheckNodes: []
    });
    _this3.props.onChange && _this3.props.onChange(_this3.props.targetKeys.filter(function (_ref12) {
      var key = _ref12.key;
      return treeSelectLeafKeys.indexOf(key) === -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 (_ref13) {
          var title = _ref13.title;
          return title.indexOf(searchValue) > -1;
        })
      });
    }
  };

  this._handleTreeSearch = function (searchValue) {
    var _init3 = _this3._init(_this3.props),
        treeData = _init3.treeData;
    // no search


    if (searchValue === "") {
      _this3.setState({
        searchValue: "",
        treeData: treeData,
        autoExpandParent: false
      });
    } else {
      // load tree search
      if (_this3.props.onLoadTree) {
        new _promise2.default(function (resolve) {
          _this3.setState({
            treeLoading: true,
            searching: true
          });
          _this3.props.onLoadTree && _this3.props.onLoadTree({ type: '_search', value: searchValue, resolve: resolve });
        }).then(function () {
          _this3.setState({
            treeLoading: false
          });
        });
      }
      _this3.setState({ searchValue: searchValue });
    }
  };

  this._treeLoadData = function (treeNode) {
    return new _promise2.default(function (resolve) {
      _this3.props.onLoadTree && _this3.props.onLoadTree({ type: '_expand', value: treeNode, resolve: resolve });
    });
  };
};

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