@6thquake/react-material/Transfer/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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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 _icons = require("@material-ui/icons");

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

var _List = _interopRequireDefault(require("../List"));

var _ListItem = _interopRequireDefault(require("../ListItem"));

var _ListItemText = _interopRequireDefault(require("../ListItemText"));

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

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

var _SelectFilter = _interopRequireDefault(require("./SelectFilter"));

var _Pagination = _interopRequireDefault(require("../Pagination"));

var _Divider = _interopRequireDefault(require("../Divider"));

var _throttle = require("../utils/throttle");

/**
 * @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'
  },
  dataSourceLists: {},
  targetKeysLists: {
    right: '0',
    top: '0'
  },
  btngrp: {
    position: 'absolute',
    width: '100%',
    textAlign: 'center',
    top: '50%',
    transform: 'translateY(-50%)'
  },
  devideDataSource: {
    position: 'absolute',
    top: '250px',
    left: '0',
    width: '100%'
  },
  devidetargetKeys: {
    position: 'absolute',
    top: '250px',
    right: '0',
    width: '100%'
  },
  paginationDataSource: {
    position: 'absolute',
    top: '240px ',
    left: '0',
    width: '100%'
  },
  paginationtargetKeys: {
    position: 'absolute',
    top: '240px',
    right: '0',
    width: '100%'
  }
};

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.transferToggle = function (position) {
      return function () {
        // 左右移动选中部分
        var _this$state = _this.state,
            dataSourceChecked = _this$state.dataSourceChecked,
            targetKeysChecked = _this$state.targetKeysChecked;

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

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

        var chooseBox = position === 'left' ? 'dataSource' : 'targetKeys';
        var otherBox = position === 'left' ? 'targetKeys' : 'dataSource';

        var sub = _this.subSet(_this.props[chooseBox], _checked);

        var newData = {};
        newData[chooseBox] = sub;
        newData[otherBox] = [].concat(_this.props[otherBox], _checked);

        _this.props.onChange(newData.dataSource, newData.targetKeys);

        _this.setState({
          dataSourceChecked: [],
          targetKeysChecked: [],
          temp: {
            dataSource: (0, _toConsumableArray2.default)(newData.dataSource),
            targetKeys: (0, _toConsumableArray2.default)(newData.targetKeys)
          },
          pageConfigDataSource: (0, _extends2.default)({}, _this.props.pageConfig, {
            count: newData.dataSource.length
          }),
          pageConfigtargetKeys: (0, _extends2.default)({}, _this.props.pageConfig, {
            count: newData.targetKeys.length
          })
        });
      };
    };

    _this.transferAllToggle = function (position) {
      return function () {
        // 左右移动所有
        var _this$props = _this.props,
            dataSource = _this$props.dataSource,
            targetKeys = _this$props.targetKeys;

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

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

        var chooseBox = position === 'left' ? 'dataSource' : 'targetKeys';
        var otherBox = position === 'left' ? 'targetKeys' : 'dataSource';

        var sub = _this.subSet(_this.props[chooseBox], _checked);

        var newData = {};
        newData[chooseBox] = sub;
        newData[otherBox] = [].concat(_this.props[otherBox], _checked);

        _this.props.onChange(newData.dataSource, newData.targetKeys);

        _this.setState({
          dataSourceChecked: [],
          targetKeysChecked: [],
          temp: {
            dataSource: (0, _toConsumableArray2.default)(newData.dataSource),
            targetKeys: (0, _toConsumableArray2.default)(newData.targetKeys)
          },
          pageConfigDataSource: (0, _extends2.default)({}, _this.props.pageConfig, {
            count: newData.dataSource.length
          }),
          pageConfigtargetKeys: (0, _extends2.default)({}, _this.props.pageConfig, {
            count: newData.targetKeys.length
          })
        });
      };
    };

    _this.handleToggle = function (value, position) {
      return function () {
        var _this$state2 = _this.state,
            dataSourceChecked = _this$state2.dataSourceChecked,
            targetKeysChecked = _this$state2.targetKeysChecked;

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

        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({
            dataSourceChecked: newChecked
          });
        }

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

    _this.textchange = function (position) {
      return function (e) {
        var chooseBox = position === 'left' ? 'dataSource' : 'targetKeys';
        var otherBox = position === 'left' ? 'targetKeys' : 'dataSource';
        var filterString = e.target.value;

        var filterData = _this.props[chooseBox].filter(function (item) {
          return !filterString || item.name.toLowerCase().indexOf(filterString.toLowerCase()) !== -1;
        });

        var newData = {};
        newData[chooseBox] = filterData;
        newData[otherBox] = _this.state.temp[otherBox];

        if (chooseBox === 'dataSource') {
          _this.setState({
            temp: newData,
            pageConfigDataSource: (0, _extends2.default)({}, _this.props.pageConfig, {
              page: 0,
              count: newData.dataSource.length
            })
          });
        } else if (chooseBox === 'targetKeys') {
          _this.setState({
            temp: newData,
            pageConfigtargetKeys: (0, _extends2.default)({}, _this.props.pageConfig, {
              page: 0,
              count: newData.targetKeys.length
            })
          });
        }
      };
    };

    _this.state = {
      dataSourceChecked: [],
      // 左边选中的item
      targetKeysChecked: [],
      temp: {
        dataSource: props.dataSource,
        // 左边渲染的数据
        targetKeys: props.targetKeys
      },
      pageConfigDataSource: {
        page: props.pageConfig.page || 0,
        rowsPerPage: props.pageConfig.rowsPerPage || 5,
        count: props.pageConfig.count || 5
      },
      // 左边的分页参数
      pageConfigtargetKeys: {
        page: props.pageConfig.page || 0,
        rowsPerPage: props.pageConfig.rowsPerPage || 5,
        count: props.pageConfig.count || 5
      }
    };
    return _this;
  } // 数组去重


  (0, _createClass2.default)(Transfer, [{
    key: "pageCallbackFndataSource",
    value: function pageCallbackFndataSource(currentPage1) {
      // 左边的分页参数改变回调
      this.setState({
        pageConfigDataSource: (0, _extends2.default)({}, this.state.pageConfigDataSource, {
          page: currentPage1
        })
      });
    }
  }, {
    key: "pageCallbackFntargetKeys",
    value: function pageCallbackFntargetKeys(currentPage1) {
      this.setState({
        pageConfigtargetKeys: (0, _extends2.default)({}, this.state.pageConfigtargetKeys, {
          page: currentPage1
        })
      });
    }
  }, {
    key: "listItem",
    value: function listItem(options, pageConfig) {
      // 只渲染属于该页面的item
      if (Array.isArray(options)) {
        var start = pageConfig.page * pageConfig.rowsPerPage;
        var end = (pageConfig.page + 1) * pageConfig.rowsPerPage > options.length ? options.length : (pageConfig.page + 1) * pageConfig.rowsPerPage;
        return options.slice(start, end);
      }

      throw new Error('React-Material: the `options` property must be an array ');
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          classes = _this$props2.classes,
          showSearch = _this$props2.showSearch,
          searchPlaceholder = _this$props2.searchPlaceholder,
          pageConfig = _this$props2.pageConfig,
          debounceProps = _this$props2.debounceProps;
      var showPagination = false;

      if (pageConfig) {
        showPagination = true;
      }

      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.dataSourceLists)
      }, _react.default.createElement(_List.default, null, showSearch && _react.default.createElement(_SelectFilter.default, {
        fullWidth: true,
        autoFocus: true,
        placeholder: searchPlaceholder,
        onChange: (0, _throttle.debounce)(this.textchange('left'), debounceProps.wait).bind(this)
      }), this.listItem(this.state.temp.dataSource, this.state.pageConfigDataSource).map(function (value) {
        return _react.default.createElement(_ListItem.default, {
          key: value.id,
          role: undefined,
          dense: true,
          button: true,
          onClick: _this2.handleToggle(value, 'left')
        }, _react.default.createElement(_Checkbox.default, {
          checked: _this2.state.dataSourceChecked.indexOf(value) !== -1,
          tabIndex: -1,
          disableRipple: true
        }), _react.default.createElement(_ListItemText.default, {
          primary: "".concat(value.name)
        }));
      }), _react.default.createElement(_Divider.default, {
        className: classes.devideDataSource
      }), showPagination && _react.default.createElement("div", {
        className: classes.paginationDataSource
      }, _react.default.createElement(_Pagination.default, (0, _extends2.default)({}, this.state.pageConfigDataSource, {
        onChangePage: this.pageCallbackFndataSource.bind(this)
      }))))), _react.default.createElement("div", {
        className: "".concat(classes.lists, " ").concat(classes.targetKeysLists)
      }, _react.default.createElement(_List.default, null, showSearch && _react.default.createElement(_SelectFilter.default, {
        fullWidth: true,
        autoFocus: true,
        placeholder: searchPlaceholder,
        onChange: (0, _throttle.debounce)(this.textchange('right'), debounceProps.wait).bind(this)
      }), this.listItem(this.state.temp.targetKeys, this.state.pageConfigtargetKeys).map(function (value) {
        return _react.default.createElement(_ListItem.default, {
          key: value.id,
          role: undefined,
          dense: true,
          button: true,
          onClick: _this2.handleToggle(value, 'right')
        }, _react.default.createElement(_Checkbox.default, {
          checked: _this2.state.targetKeysChecked.indexOf(value) !== -1,
          tabIndex: -1,
          disableRipple: true
        }), _react.default.createElement(_ListItemText.default, {
          primary: "".concat(value.name)
        }));
      }), _react.default.createElement(_Divider.default, {
        className: classes.devidetargetKeys
      }), showPagination && _react.default.createElement("div", {
        className: classes.paginationDataSource
      }, _react.default.createElement(_Pagination.default, (0, _extends2.default)({}, this.state.pageConfigtargetKeys, {
        onChangePage: this.pageCallbackFntargetKeys.bind(this)
      }))))));
    }
  }]);
  return Transfer;
}(_react.default.Component);

Transfer.defaultProps = {
  searchPlaceholder: 'please input something',
  onChange: function onChange() {},
  showSearch: false,
  paginationOption: false,
  debounceProps: {
    wait: 1000
  }
};
Transfer.propTypes = {
  /**
   * Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in targetKeys prop.
   */
  dataSource: _propTypes.default.array.isRequired,

  /**
   * debounce props
   */
  debounceProps: _propTypes.default.shape({
    wait: _propTypes.default.number
  }),

  /**
   * A callback function that is executed when the transfer between columns is complete.
   */
  onChange: _propTypes.default.func,

  /**
   * pageConfig should contain count, rowsPerPage, page
   */
  pageConfig: _propTypes.default.shape({
    count: _propTypes.default.number,
    page: _propTypes.default.number,
    rowsPerPage: _propTypes.default.number
  }),

  /**
   * the data in the target box
   */
  paginationOption: _propTypes.default.bool,

  /**
   *
   * placeholder of search box
   */
  searchPlaceholder: _propTypes.default.string,

  /**
   * A set of keys of selected items.
   */
  selectedKeys: _propTypes.default.array.isRequired,

  /**
   * Whether show search box
   */
  showSearch: _propTypes.default.bool,

  /**
   * A set of keys of elements that are listed on the right column.
   */
  targetKeys: _propTypes.default.array.isRequired
};

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

exports.default = _default;