@6thquake/react-material/TransferDnD/Transfer.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _DropList = _interopRequireDefault(require("./DropList"));

var _MyDropList = _interopRequireDefault(require("./MyDropList"));

var _DragListItem = require("./DragListItem");

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _Button = _interopRequireDefault(require("../Button"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _icons = require("@material-ui/icons");

var _reactDnd = require("react-dnd");

var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));

/**
 * @ignore - do not document.
 */
var styles = {
  root: {
    minWidth: '700px',
    height: '100%',
    minHeight: '300px',
    width: '100%',
    position: 'relative'
  },
  lists: {
    height: '100%',
    maxHeight: '400px',
    overflow: 'scroll',
    display: 'inline-block',
    border: '1px solid rgba(0,0,0,0.1)',
    width: '45%',
    minWidth: '300px',
    maxWidth: '300px',
    position: 'absolute'
  },
  leftLists: {},
  rightLists: {
    right: '0',
    top: '0'
  },
  btngrp: {
    position: 'absolute',
    width: '100%',
    textAlign: 'center',
    top: '50%',
    transform: 'translateY(-50%)'
  }
};

var Transfer =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Transfer, _React$Component);

  function Transfer(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Transfer);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Transfer).call(this, props));

    _this.subSet = function (arr1, arr2) {
      var set1 = new Set(arr1);
      var set2 = new Set(arr2);
      var subset = [];
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = set1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var item = _step.value;

          if (!set2.has(item)) {
            subset.push(item);
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return != null) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      return subset;
    };

    _this.dragToggle = function (value, position) {
      return function () {
        var _checked = [];

        _checked.push(value);

        _this.transferData(_checked, position);
      };
    };

    _this.transferToggle = function (position) {
      return function () {
        var _this$state = _this.state,
            leftChecked = _this$state.leftChecked,
            rightChecked = _this$state.rightChecked;

        var _checked = position === 'left' ? leftChecked : position === 'right' ? rightChecked : '';

        _this.transferData(_checked, position);
      };
    };

    _this.transferAllToggle = function (position) {
      return function () {
        var _this$props = _this.props,
            left = _this$props.left,
            right = _this$props.right;

        var _checked = position === 'left' ? left : position === 'right' ? right : '';

        _this.transferData(_checked, position);
      };
    };

    _this.transferData = function (_checked, position) {
      var _otherPos = position === 'left' ? 'right' : 'left';

      var aaa = _this.subSet(_this.props[position], _checked);

      var newData = {};
      newData[position] = aaa;
      newData[_otherPos] = [].concat(_this.props[_otherPos], _checked);

      _this.setState({
        leftChecked: [],
        rightChecked: []
      });

      _this.props.onChange(newData);
    };

    _this.handleToggle = function (value, position) {
      var _this$state2 = _this.state,
          leftChecked = _this$state2.leftChecked,
          rightChecked = _this$state2.rightChecked;

      var _checked = position === 'left' ? leftChecked : position === 'right' ? rightChecked : '';

      var currentIndex = _checked.indexOf(value);

      var newChecked = (0, _toConsumableArray2.default)(_checked);

      if (currentIndex === -1) {
        newChecked.push(value);
      } else {
        newChecked.splice(currentIndex, 1);
      }

      if (position === 'left') {
        _this.setState({
          leftChecked: newChecked
        });
      }

      if (position === 'right') {
        _this.setState({
          rightChecked: newChecked
        });
      }
    };

    _this.state = {
      leftChecked: [],
      rightChecked: []
    };
    return _this;
  } // 数组去重


  (0, _createClass2.default)(Transfer, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          left = _this$props2.left,
          right = _this$props2.right,
          classes = _this$props2.classes;
      return _react.default.createElement("div", {
        className: classes.root
      }, _react.default.createElement("div", {
        className: classes.btngrp
      }, _react.default.createElement(_Button.default, {
        color: "primary",
        onClick: this.transferAllToggle('left')
      }, _react.default.createElement(_icons.LastPage, null)), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
        color: "primary",
        onClick: this.transferToggle('left')
      }, _react.default.createElement(_icons.ChevronRight, null)), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
        color: "primary",
        onClick: this.transferToggle('right')
      }, _react.default.createElement(_icons.ChevronLeft, null)), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
        color: "primary",
        onClick: this.transferAllToggle('right')
      }, _react.default.createElement(_icons.FirstPage, null))), _react.default.createElement("div", {
        className: "".concat(classes.lists, " ").concat(classes.leftLists)
      }, _react.default.createElement(_MyDropList.default, {
        data: left,
        direction: "left",
        checkedItem: this.state.leftChecked,
        toggleChecked: this.handleToggle,
        dragToggle: this.dragToggle
      })), _react.default.createElement("div", {
        className: "".concat(classes.lists, " ").concat(classes.rightLists)
      }, _react.default.createElement(_MyDropList.default, {
        data: right,
        direction: "right",
        checkedItem: this.state.rightChecked,
        toggleChecked: this.handleToggle,
        dragToggle: this.dragToggle
      })));
    }
  }]);
  return Transfer;
}(_react.default.Component);

var C = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(Transfer);

var _default = (0, _withStyles.default)(styles, {
  name: 'RMTransferDnD'
})(C);

exports.default = _default;