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 _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { action, observable, runInAction } from 'mobx';
import { Select } from '../select/Select';
import Option from '../option/Option';
import OptGroup from '../option/OptGroup';
import TransferList from './TransferList';
import TransferOperation from './TransferOperation';
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);
    runInAction(function () {
      _this.sourceSelected = [];
      _this.targetSelected = [];
    });
    return _this;
  }

  _createClass(Transfer, [{
    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);
      }
    }
  }, {
    key: "handleMoveToLeft",
    value: function handleMoveToLeft() {
      var valueField = this.valueField;
      this.removeValues(this.targetSelected.map(function (record) {
        return record.get(valueField);
      }));
      this.targetSelected = [];
    }
  }, {
    key: "handleMoveToRight",
    value: function handleMoveToRight() {
      var valueField = this.valueField;
      this.prepareSetValue.apply(this, _toConsumableArray(this.sourceSelected.map(function (record) {
        return record.get(valueField);
      })));
      this.sourceSelected = [];
    }
  }, {
    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: "renderWrapper",
    value: function renderWrapper() {
      var disabled = this.disabled,
          prefixCls = this.prefixCls,
          targetSelected = this.targetSelected,
          sourceSelected = this.sourceSelected,
          multiple = this.multiple,
          _this$props$titles = this.props.titles,
          titles = _this$props$titles === void 0 ? [] : _this$props$titles;
      return React.createElement("span", {
        key: "wrapper",
        className: "".concat(prefixCls, "-wrapper")
      }, React.createElement(TransferList, _extends({}, this.props, {
        options: this.options,
        selected: sourceSelected,
        header: titles[0],
        onSelectAll: this.handleSourceSelectAllChange,
        onSelect: this.handleMenuClick,
        optionsFilter: this.sourceFilter
      })), React.createElement(TransferOperation, {
        className: "".concat(prefixCls, "-operation"),
        leftActive: !(!targetSelected.length || disabled),
        rightActive: !(!sourceSelected.length || disabled),
        moveToLeft: this.handleMoveToLeft,
        moveToRight: this.handleMoveToRight,
        multiple: multiple
      }), React.createElement(TransferList, _extends({}, this.props, {
        options: this.options,
        selected: targetSelected,
        header: titles[1],
        onSelectAll: this.handleTargetSelectAllChange,
        onSelect: this.handleTargetMenuClick,
        optionsFilter: this.targetFilter
      })));
    }
  }]);

  return Transfer;
}(Select);

Transfer.displayName = 'Transfer';
Transfer.propTypes = _objectSpread({}, Select.propTypes, {
  titles: PropTypes.arrayOf(PropTypes.node)
});
Transfer.defaultProps = _objectSpread({}, Select.defaultProps, {
  suffixCls: 'transfer',
  multiple: true
});
Transfer.Option = Option;
Transfer.OptGroup = OptGroup;

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

__decorate([observable], Transfer.prototype, "targetSelected", 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, "handleSourceSelectAllChange", null);

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

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

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