@beisen/ethos/lib/transfer/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _commonFunc = require('../common-func');

var _list = require('./list');

var _list2 = _interopRequireDefault(_list);

var _operation = require('./operation');

var _operation2 = _interopRequireDefault(_operation);

var _adjustment = require('./adjustment');

var _adjustment2 = _interopRequireDefault(_adjustment);

require('./index.scss');

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

var Transfer = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Transfer, _Component);

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

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

    _this.handleSelect = function (dire, key) {
      var _this$state = _this.state,
          to_right = _this$state.to_right,
          to_left = _this$state.to_left,
          data_left = _this$state.data_left,
          data_right = _this$state.data_right;
      //判断待穿梭方向

      if (dire == 'to_right') {
        if (_this.props.multiSelect.left) {
          //是否可多选
          to_right.push(key); //将key加入待转集合
          if (_this.props.treeMode) {
            data_left.map(function (j) {
              j.Children.map(function (k) {
                if (k.ID == key) {
                  k.clicked = true;
                }
              });
            });
            _this.setState({ data_left: data_left });
          }
        } else {
          to_right = [key];
        }
      } else {
        if (_this.props.multiSelect.right) {
          //判断是否可多选
          to_left.push(key); //将key加入待转集合
        } else {
          to_left = [key];
        }
      }
      _this.setState({
        to_right: to_right,
        to_left: to_left,
        transfer_right: to_right.length > 0 ? false : true,
        transfer_left: to_left.length > 0 && (_this.props.treeMode ? true : !_this.props.data[to_left[0]].IsCustomListNecessary) ? false : true,
        shouldUpBtnDisabled: to_left.length > 0 ? key === data_right[0].index : true,
        shouldDownBtnDisabled: to_left.length > 0 ? key === data_right[data_right.length - 1].index : true
      });
    };

    _this.cancelSelect = function (dire, key) {
      var _this$state2 = _this.state,
          to_right = _this$state2.to_right,
          to_left = _this$state2.to_left,
          data_left = _this$state2.data_left,
          data_right = _this$state2.data_right;

      if (dire == 'to_right') {
        to_right = _this.state.to_right.filter(function (item) {
          return item !== key;
        });
        if (_this.props.treeMode) {
          data_left.map(function (j) {
            j.Children.map(function (k) {
              if (k.ID == key) {
                k.clicked = false;
              }
            });
          });
        }
      } else {
        to_left = _this.state.to_left.filter(function (item) {
          return item !== key;
        });
      }
      _this.setState({
        to_right: to_right,
        to_left: to_left,
        transfer_right: to_right.length > 0 ? false : true,
        transfer_left: to_left.length > 0 && (_this.props.treeMode ? true : !_this.props.data[to_left[0]].IsCustomListNecessary) ? false : true,
        shouldUpBtnDisabled: to_left.length > 0 ? key === data_right[0].index : true,
        shouldDownBtnDisabled: to_left.length > 0 ? key === data_right[data_right.length - 1].index : true
      });
    };

    _this.handleTransfer = function (dire) {
      var data_right = JSON.parse((0, _stringify2.default)(_this.state.data_right));
      var data_left = JSON.parse((0, _stringify2.default)(_this.state.data_left));
      var to_left = _this.state.to_left;
      var to_right = _this.state.to_right;
      var topPosition = 0;
      var topLeftPostion = 0;

      if (dire == 'to_right') {
        //向右穿梭，处理待转数据
        if (_this.props.treeMode) {
          data_left.map(function (item) {
            var leftChild = item.Children.filter(function (j) {
              return to_right.join(' ').indexOf(j.ID) < 0;
            });
            item.Children.map(function (k) {
              k.clicked = false;
              to_right.join(' ').indexOf(k.ID) > -1 ? data_right.push(k) : null;
            });
            item.Children = leftChild;
          });
        } else {
          data_left = data_left.filter(function (item) {
            return to_right.indexOf(item.index) < 0;
          });
          to_right.map(function (x, y) {
            data_right.push(_this.props.data[x]);
          });
        }
        topPosition = (data_right.length - 10) * 30;
        to_right = []; //清空待右转集合
      } else {
        //向左穿梭
        if (_this.state.data_right.length == 1 && _this.props.disableDragLastOne) {
          _this.props.onDragLastOne && _this.props.onDragLastOne();
          return;
        }
        if (_this.props.treeMode) {
          data_right = data_right.filter(function (item) {
            return to_left.join(' ').indexOf(item.ID) < 0;
          });
          _this.props.data.map(function (j, index) {
            _this.key = index;
            if (j.Children) {
              j.Children.map(function (k) {
                k.clicked = false;
                if (to_left.join(' ').indexOf(k.ID) > -1) {
                  data_left[_this.key].Children.push(k);
                }
              });
            } else {
              j.clicked = false;
              if (to_left.join(' ').indexOf(j.ID) > -1) {
                data_left[j.Pid == 100 ? 0 : 1].Children.push(j);
              }
            }
          });
        } else {
          data_right = data_right.filter(function (item) {
            return to_left.indexOf(item.index) < 0 || item.IsCustomListNecessary;
          });
          to_left.map(function (i) {
            if (!_this.props.data[i].IsCustomListNecessary) data_left.push(_this.props.data[i]);
          });
        }
        topLeftPostion = (data_left.length - 10) * 30;
        to_left = []; //清空待左转集合
      }

      _this.setData({ // 更新state＆抛数据
        data_left: data_left,
        data_right: data_right,
        to_right: to_right,
        to_left: to_left,
        transfer_right: to_right.length > 0 ? false : true,
        transfer_left: to_left.length > 0 ? false : true,
        topPosition: topPosition,
        topLeftPostion: topLeftPostion
      });
    };

    _this.sortTransfer = function (order, dire) {
      var _this$state3 = _this.state,
          data_left = _this$state3.data_left,
          data_right = _this$state3.data_right,
          to_left = _this$state3.to_left,
          to_right = _this$state3.to_right,
          transfer_right = _this$state3.transfer_right,
          transfer_left = _this$state3.transfer_left;

      if (dire === 'to_right') {
        data_left = [];
        order.map(function (index) {
          data_left.push(_this.props.data[parseInt(index)]);
        });
      } else {
        data_right = [];
        var self = _this;
        order.map(function (index) {
          if (self.props.treeMode) {
            self.props.data.map(function (j) {
              if (j.Children) {
                j.Children.map(function (k) {
                  if (k.index == parseInt(index)) data_right.push(k);
                });
              } else {
                if (j.index == parseInt(index)) data_right.push(j);
              }
            });
          } else {
            data_right.push(self.props.data[parseInt(index)]);
          }
        });
      }
      _this.setData({
        data_left: data_left,
        data_right: data_right,
        to_right: to_right,
        to_left: to_left,
        transfer_right: transfer_right,
        transfer_left: transfer_left
      });
    };

    _this.handleDropTransfer = function (chosenIndex, order, dire) {
      var data_left = [];
      var data_right = [];
      var _this$state4 = _this.state,
          to_left = _this$state4.to_left,
          to_right = _this$state4.to_right,
          transfer_right = _this$state4.transfer_right,
          transfer_left = _this$state4.transfer_left;

      if (dire == 'to_right') {
        order.map(function (index) {
          data_right.push(_this.props.data[parseInt(index)]);
        });
        data_left = _this.state.data_left.filter(function (item) {
          return item.index !== parseInt(chosenIndex);
        });
        to_right = to_right.filter(function (item) {
          return item !== parseInt(chosenIndex);
        });
      } else {
        if (_this.state.data_right.length == 1 && _this.props.disableDragLastOne) {
          _this.props.onDragLastOne && _this.props.onDragLastOne();
          return;
        }

        order.map(function (index) {
          if (index != chosenIndex || !_this.props.data[parseInt(chosenIndex)].IsCustomListNecessary) data_left.push(_this.props.data[parseInt(index)]);
        });
        data_right = _this.state.data_right.filter(function (item) {
          return item.index !== parseInt(chosenIndex) || item.IsCustomListNecessary;
        });
        to_left = to_left.filter(function (item) {
          return item !== parseInt(chosenIndex) || item.IsCustomListNecessary;
        });
      }

      _this.setData({
        data_left: data_left,
        data_right: data_right,
        to_right: to_right,
        to_left: to_left,
        transfer_right: to_right.length > 0 ? false : true,
        transfer_left: to_left.length > 0 ? false : true
      });
    };

    _this.handleItemSort = function (dire) {
      var self = _this;
      var data_right = _this.state.data_right;
      var to_left = _this.state.to_left;
      var len = data_right.length;
      var current = void 0,
          topPosition = void 0,
          listHeight = void 0,
          itemHeight = 30;
      var list = document.getElementById('transfer-list__body-to_left');
      listHeight = list.clientHeight;
      var items = list.getElementsByTagName('li');
      var toUpAndDownData = [];
      if (dire == 'to_up') {
        data_right.map(function (item, i) {
          if (item.index == to_left[0]) {
            current = i;
          }
        });
        toUpAndDownData = data_right[current];
        if (current == 0) {
          // 判断第一条，则置尾
          return false;
          data_right[0] = data_right.splice(len - 1, 1, data_right[0])[0];
          topPosition = (items.length - 10) * 30;
        } else {
          data_right[current] = data_right.splice(current - 1, 1, data_right[current])[0];
          topPosition = items[current].offsetTop - 240;
        }
      } else {
        data_right.map(function (item, i) {
          if (item.index == to_left[0]) {
            current = i;
          }
        });
        toUpAndDownData = data_right[current];
        if (current >= len - 1) {
          // 判断最后一条，则置顶
          return false;
          data_right[current] = data_right.splice(0, 1, data_right[current])[0];
          topPosition = 0;
        } else {
          data_right[current] = data_right.splice(current + 1, 1, data_right[current])[0];
          topPosition = items[current].offsetTop - 270;
        }
      }
      //上下排序时判断上移或下移按钮是否禁用
      var toUpAndDownDataIndex = data_right.findIndex(function (item) {
        return item.index == toUpAndDownData.index;
      });
      if (topPosition >= 0) {
        _this.setState({
          data_right: data_right,
          topPosition: topPosition
        });
      } else {
        _this.setState({
          data_right: data_right,
          shouldUpBtnDisabled: toUpAndDownDataIndex == 0 ? true : false,
          shouldDownBtnDisabled: toUpAndDownDataIndex == data_right.length - 1 ? true : false
        });
      }

      // 向上抛出结果数据
      _this.props.onTransfer({
        left: _this.state.data_left,
        right: data_right
      });
      setTimeout(function () {
        self.setRightScrollPostion(topPosition);
      }, 0);
    };

    _this.setData = function (data) {
      var self = _this;
      _this.setState({
        data_right: data.data_right,
        data_left: data.data_left,
        to_right: data.to_right,
        to_left: data.to_left,
        transfer_right: data.transfer_right,
        transfer_left: data.transfer_left
      });
      var topPosition = data.topPosition || 0;
      var topLeftPostion = data.topLeftPostion || 0;
      // 向上抛出结果数据
      _this.props.onTransfer({
        left: data.data_left,
        right: data.data_right
      });
      if (topLeftPostion || topPosition) {
        if (topPosition > 0) {
          setTimeout(function () {
            self.setRightScrollPostion(topPosition);
          }, 0);
        }
        if (topLeftPostion > 0) {
          setTimeout(function () {
            self.setLeftScrollPostion(topLeftPostion);
          }, 0);
        }
      }
    };

    _this.treeModeDefault = function () {
      return _this.state.data_left;
    };

    _this.updateData(true, props); //设置数据
    return _this;
  }

  (0, _createClass3.default)(Transfer, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // 根据isReset字段控制是否更新
      if (!this.props.act.isReset && nextProps.act.isReset) {
        this.updateData(false, nextProps);
      }
      if (this.props.data !== nextProps.data) {
        this.updateData(false, nextProps);
      }
    }

    // 更新或设置数据

  }, {
    key: 'updateData',
    value: function updateData(init, props) {
      var data_left = [];
      var data_right = [];
      // 对原始数据进行左右分组显示
      props.data.map(function (item, index) {
        if (!props.treeMode) {
          item.index = index;
        }
        if (item.role == 'left') {
          data_left.push(item);
        } else {
          data_right.push(item);
        }
      });

      var state = {
        data_left: data_left, // 左侧框数据
        data_right: data_right, // 右侧框数据
        transfer_left: true, // 转入左侧按钮状态
        transfer_right: true, // 转入右侧按钮状态
        to_left: [], // 待转入左侧的key集合
        to_right: [], // 待转入右侧的key集合
        shouldUpBtnDisabled: true, // 右侧上按钮是否为禁用状态
        shouldDownBtnDisabled: true //右侧下按钮是否为禁用状态
      };
      if (init) {
        state = (0, _extends3.default)({ topPosition: 0 }, state);
        this.state = state;
      } else {
        this.setState(state);
      }
      props.act.callback(props.act.isReset);
    }

    // 处理选中,进入待转集合


    // 取消选中


    // 处理按钮方式穿梭


    // 处理单列排序


    // 拖拽穿梭并排序


    // 上下排序调整


    // 更新state＆抛数据

  }, {
    key: 'setLeftScrollPostion',
    value: function setLeftScrollPostion(topPosition) {

      var thisDom = (0, _reactDom.findDOMNode)(this);
      var scrollLeftDiv = thisDom.querySelector("#transfer-list__body-to_right");

      scrollLeftDiv.scrollTop = topPosition;
    }
  }, {
    key: 'setRightScrollPostion',
    value: function setRightScrollPostion(topPosition) {

      var thisDom = (0, _reactDom.findDOMNode)(this);
      var scrollRightDiv = thisDom.querySelector("#transfer-list__body-to_left");

      scrollRightDiv.scrollTop = topPosition;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          title = _props.title,
          style = _props.style,
          showAdjust = _props.showAdjust,
          hiddenTip = _props.hiddenTip,
          sideTip = _props.sideTip,
          treeMode = _props.treeMode;

      return _react2.default.createElement(
        'div',
        { className: 'transfer' },
        _react2.default.createElement(_list2.default, {
          data: this.state.data_left,
          style: style,
          title: title.left,
          dire: 'to_right',
          waitForTrans: this.state.to_right,
          handleSelect: this.handleSelect,
          cancelSelect: this.cancelSelect,
          handleDropTransfer: this.handleDropTransfer,
          sortTransfer: this.sortTransfer,
          multiSelect: this.props.multiSelect.left,
          hiddenTip: hiddenTip,
          sideTip: sideTip,
          treeMode: treeMode,
          treeModeDefault: this.treeModeDefault
        }),
        _react2.default.createElement(_operation2.default, {
          handleTransfer: this.handleTransfer,
          transfer_left: this.state.transfer_left,
          transfer_right: this.state.transfer_right
        }),
        _react2.default.createElement(_list2.default, {
          data: this.state.data_right,
          style: style,
          title: title.right,
          dire: 'to_left',
          topPosition: this.state.topPosition,
          waitForTrans: this.state.to_left,
          handleSelect: this.handleSelect,
          cancelSelect: this.cancelSelect,
          handleDropTransfer: this.handleDropTransfer,
          sortTransfer: this.sortTransfer,
          multiSelect: this.props.multiSelect.right,
          hiddenTip: hiddenTip,
          sideTip: sideTip,
          treeModeLeft: treeMode
        }),
        showAdjust && !treeMode ? _react2.default.createElement(_adjustment2.default, {
          handleItemSort: this.handleItemSort,
          transfer_left: this.state.transfer_left,
          hasLeftSelect: this.state.hasLeftSelect,
          upBtnDisabled: this.state.shouldUpBtnDisabled,
          downBtnDisabled: this.state.shouldDownBtnDisabled
        }) : null
      );
    }
  }]);
  return Transfer;
}(_react.Component), _class.defaultProps = {
  data: [],
  title: {
    left: '源列表',
    right: '目的列表'
  },
  style: {
    width: '284px'
  },
  multiSelect: {
    left: true,
    right: true
  },
  showAdjust: true,
  hiddenTip: false,
  sideTip: false
}, _temp);


module.exports = Transfer;