choerodon-ui/pro/es/transfer/Transfer.js

An enterprise-class UI design language and React-based implementation

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { action, observable, runInAction } from 'mobx';
import classNames from 'classnames';
import omit from 'lodash/omit';
import { Select } from '../select/Select';
import Option from '../option/Option';
import OptGroup from '../option/OptGroup';
import TransferList from './TransferList';
import TransferOperation from './TransferOperation';
import TransferSort from './TransferSort';
import autobind from '../_util/autobind';
import isSameLike from '../_util/isSameLike';

var Transfer = /*#__PURE__*/function (_Select) {
  _inherits(Transfer, _Select);

  var _super = _createSuper(Transfer);

  function Transfer(props, context) {
    var _this;

    _classCallCheck(this, Transfer);

    _this = _super.call(this, props, context);
    _this.isCustom = false;

    _this.clearCurrentIndex = function () {
      var current = _this.options.current;

      if (current) {
        current.isCurrent = false;
      }
    };

    _this.changeOptionIndex = function () {
      var _optionData;

      var _assertThisInitialize = _assertThisInitialized(_this),
          valueField = _assertThisInitialize.valueField,
          options = _assertThisInitialize.options;

      var targetValues = _this.getValues(); // 这是有顺序的


      var optionData = options.data;
      var sortOpt = [];
      targetValues.forEach(function (key) {
        optionData = optionData.filter(function (record) {
          if (record.get(valueField) !== key) {
            return true;
          }

          sortOpt.push(record);
          return false;
        });
      });

      (_optionData = optionData).unshift.apply(_optionData, sortOpt);

      _this.options.data = optionData;
    };

    _this.handleRemove = function (value) {
      _this.removeValues([value]);

      _this.updateIndex();
    };

    _this.handleSetTargetOption = function (values) {
      _this.setValue(values);
    };

    runInAction(function () {
      _this.sourceSelected = [];
      _this.targetSelected = [];

      _this.clearCurrentIndex();
    });
    _this.isCustom = typeof props.children === 'function';
    return _this;
  }

  _createClass(Transfer, [{
    key: "range",
    get: function get() {
      return false;
    }
  }, {
    key: "sourceFilter",
    value: function sourceFilter(record, index, array) {
      var valueField = this.valueField,
          optionsFilter = this.props.optionsFilter;

      if (optionsFilter && !optionsFilter(record, index, array)) {
        return false;
      }

      var values = this.getValues();

      if (values.length) {
        return values.every(function (v) {
          return !isSameLike(record.get(valueField), v);
        });
      }

      return true;
    }
  }, {
    key: "targetFilter",
    value: function targetFilter(record, index, array) {
      var valueField = this.valueField,
          optionsFilter = this.props.optionsFilter;

      if (optionsFilter && !optionsFilter(record, index, array)) {
        return false;
      }

      var values = this.getValues();

      if (values.length) {
        return values.some(function (v) {
          return isSameLike(record.get(valueField), v);
        });
      }

      return false;
    }
  }, {
    key: "handleMenuClick",
    value: function handleMenuClick(_ref) {
      var value = _ref.item.props.value;

      if (this.multiple) {
        this.selectRecord(value, this.sourceSelected);
      } else {
        this.prepareSetValue(this.processRecordToObject(value));
      }
    }
  }, {
    key: "handleTargetMenuClick",
    value: function handleTargetMenuClick(_ref2) {
      var value = _ref2.item.props.value;

      if (this.multiple) {
        this.selectRecord(value, this.targetSelected);
      } else {
        this.removeValue(value);
      }

      this.options.locate(value.index);
    }
  }, {
    key: "handleMoveToLeft",
    value: function handleMoveToLeft() {
      var valueField = this.valueField,
          isCustom = this.isCustom;

      if (!isCustom) {
        this.removeValues(this.targetSelected.map(function (record) {
          return record.get(valueField);
        }));
      } else {
        var currentValues = this.getValues();
        var targetKeys = this.targetSelected.map(function (record) {
          return record.key;
        });

        var _iterator = _createForOfIteratorHelper(targetKeys),
            _step;

        try {
          var _loop = function _loop() {
            var key = _step.value;
            currentValues = currentValues.filter(function (record) {
              return record.key !== key;
            });
          };

          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            _loop();
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }

        this.setValue(currentValues);
      }

      this.targetSelected = [];
      this.updateIndex();
    }
  }, {
    key: "handleMoveToRight",
    value: function handleMoveToRight() {
      var valueField = this.valueField;

      if (this.isCustom) {
        var currentValues = this.getValues();
        this.setValue([].concat(_toConsumableArray(currentValues), _toConsumableArray(this.sourceSelected)), true);
      } else {
        this.prepareSetValue.apply(this, _toConsumableArray(this.sourceSelected.map(function (record) {
          return record.get(valueField);
        })));
      }

      this.sourceSelected = [];
      this.updateIndex();
    }
  }, {
    key: "handleSortTo",
    value: function handleSortTo(direction) {
      var valueField = this.valueField,
          options = this.options;
      var current = options.current;

      if (current) {
        var targetFilteredOptions = options.getState('targetFilteredOptions');

        if (targetFilteredOptions) {
          var to = direction === 'up' ? -1 : 1;
          var currentValue = current.get(valueField);
          var index = targetFilteredOptions.findIndex(function (record) {
            return record.get(valueField) === currentValue;
          });
          var currentOpt = targetFilteredOptions[index];
          var moveOpt = targetFilteredOptions[index + to];

          if (currentOpt && moveOpt) {
            var currentOptValue = currentOpt.get(valueField);
            var moveOptValue = moveOpt.get(valueField);
            var optionsCurrentIndex = options.findIndex(function (record) {
              return record.get(valueField) === currentOptValue;
            });
            var optionsMoveIndex = options.findIndex(function (record) {
              return record.get(valueField) === moveOptValue;
            });

            if (optionsCurrentIndex !== -1 && optionsMoveIndex !== -1) {
              options.move(optionsCurrentIndex, optionsMoveIndex);
            }
          }
        }
      }
    }
  }, {
    key: "handleSourceSelectAllChange",
    value: function handleSourceSelectAllChange(selected) {
      this.sourceSelected = selected;
    }
  }, {
    key: "handleTargetSelectAllChange",
    value: function handleTargetSelectAllChange(selected) {
      this.targetSelected = selected;
    }
  }, {
    key: "selectRecord",
    value: function selectRecord(value, selected) {
      var index = selected.indexOf(value);

      if (index !== -1) {
        selected.splice(index, 1);
      } else {
        selected.push(value);
      }
    }
  }, {
    key: "updateIndex",
    value: function updateIndex() {
      this.changeOptionIndex();
      this.clearCurrentIndex();
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this2 = this;

      var disabled = this.disabled,
          prefixCls = this.prefixCls,
          targetSelected = this.targetSelected,
          sourceSelected = this.sourceSelected,
          multiple = this.multiple,
          valueField = this.valueField,
          _this$props = this.props,
          _this$props$titles = _this$props.titles,
          titles = _this$props$titles === void 0 ? [] : _this$props$titles,
          _this$props$operation = _this$props.operations,
          operations = _this$props$operation === void 0 ? [] : _this$props$operation,
          _this$props$sortOpera = _this$props.sortOperations,
          sortOperations = _this$props$sortOpera === void 0 ? [] : _this$props$sortOpera,
          sortable = _this$props.sortable,
          oneWay = _this$props.oneWay;
      var targetValues = this.getValues();
      var currentTarget = this.options.current;
      var upActive = false;
      var downActive = false;
      var currentIndex = currentTarget ? targetValues.findIndex(function (x) {
        return x === currentTarget.get(valueField);
      }) : -1;
      var targetFilteredOptions = this.options.getState('targetFilteredOptions');

      if (targetFilteredOptions && currentTarget) {
        currentIndex = targetFilteredOptions.findIndex(function (record) {
          return record.get(valueField) === currentTarget.get(valueField);
        });
        upActive = currentIndex > -1 && currentIndex !== 0;
        downActive = currentIndex > -1 && currentIndex !== targetFilteredOptions.length - 1;
      }

      var classNameString = classNames("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-sortable"), sortable));
      var oneWayProps = {};

      if (oneWay) {
        oneWayProps = {
          multiple: false,
          onRemove: this.handleRemove
        };
      }

      var customOption = {};

      if (this.isCustom) {
        customOption = {
          targetOption: targetValues
        };
      }

      var childProps = omit(this.props, ['help']);
      return /*#__PURE__*/React.createElement("span", {
        key: "wrapper",
        className: classNameString
      }, /*#__PURE__*/React.createElement(TransferList, _extends({}, childProps, {
        options: this.options,
        selected: sourceSelected,
        header: titles[0],
        onSelectAll: this.handleSourceSelectAllChange,
        onSelect: this.handleMenuClick,
        optionsFilter: this.sourceFilter,
        direction: "left"
      }, customOption)), /*#__PURE__*/React.createElement(TransferOperation, {
        className: "".concat(prefixCls, "-operation"),
        leftActive: !(!targetSelected.length || disabled),
        rightActive: !(!sourceSelected.length || disabled),
        rightArrowText: operations[0],
        leftArrowText: operations[1],
        moveToLeft: this.handleMoveToLeft,
        moveToRight: this.handleMoveToRight,
        multiple: multiple,
        oneWay: oneWay
      }), /*#__PURE__*/React.createElement(TransferList, _extends({}, childProps, {
        options: this.options,
        selected: targetSelected,
        header: titles[1],
        currentIndex: currentIndex,
        onSelectAll: this.handleTargetSelectAllChange,
        onSelect: this.handleTargetMenuClick,
        optionsFilter: this.targetFilter,
        direction: "right",
        setTargetOption: this.handleSetTargetOption
      }, customOption, oneWayProps)), sortable && !this.isCustom && /*#__PURE__*/React.createElement(TransferSort, {
        className: "".concat(prefixCls, "-sort"),
        upActive: upActive,
        downActive: downActive,
        upArrowText: sortOperations[0],
        downArrowText: sortOperations[1],
        moveToUp: function moveToUp() {
          return _this2.handleSortTo('up');
        },
        moveToDown: function moveToDown() {
          return _this2.handleSortTo('down');
        },
        multiple: multiple
      }));
    }
  }]);

  return Transfer;
}(Select);

Transfer.displayName = 'Transfer';
Transfer.defaultProps = _objectSpread(_objectSpread({}, Select.defaultProps), {}, {
  suffixCls: 'transfer',
  multiple: true,
  sortable: false,
  oneWay: false
});
Transfer.Option = Option;
Transfer.OptGroup = OptGroup;

__decorate([observable], Transfer.prototype, "sourceSelected", void 0);

__decorate([observable], Transfer.prototype, "targetSelected", void 0);

__decorate([observable], Transfer.prototype, "targetCurrentSelected", void 0);

__decorate([autobind], Transfer.prototype, "sourceFilter", null);

__decorate([autobind], Transfer.prototype, "targetFilter", null);

__decorate([autobind], Transfer.prototype, "handleMenuClick", null);

__decorate([autobind], Transfer.prototype, "handleTargetMenuClick", null);

__decorate([autobind, action], Transfer.prototype, "handleMoveToLeft", null);

__decorate([autobind, action], Transfer.prototype, "handleMoveToRight", null);

__decorate([autobind, action], Transfer.prototype, "handleSortTo", null);

__decorate([autobind, action], Transfer.prototype, "handleSourceSelectAllChange", null);

__decorate([autobind, action], Transfer.prototype, "handleTargetSelectAllChange", null);

__decorate([action], Transfer.prototype, "selectRecord", null);

__decorate([action], Transfer.prototype, "clearCurrentIndex", void 0);

__decorate([action], Transfer.prototype, "updateIndex", null);

Transfer = __decorate([observer], Transfer);
export default Transfer;
//# sourceMappingURL=Transfer.js.map