choerodon-ui/pro/lib/transfer/TransferList.js

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

"use strict";

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

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

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

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

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _classnames = _interopRequireDefault(require("classnames"));

var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));

var _CheckBox = _interopRequireDefault(require("../check-box/CheckBox"));

var _localeContext = require("../locale-context");

var _TextField = _interopRequireDefault(require("../text-field/TextField"));

var _icon = _interopRequireDefault(require("../icon"));

var _Select2 = require("../select/Select");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _EventManager = require("../_util/EventManager");

var _ViewComponent = _interopRequireDefault(require("../core/ViewComponent"));

var _CustomArea = _interopRequireDefault(require("./CustomArea"));

var TransferList = /*#__PURE__*/function (_Select) {
  (0, _inherits2["default"])(TransferList, _Select);

  var _super = (0, _createSuper2["default"])(TransferList);

  function TransferList() {
    var _this;

    (0, _classCallCheck2["default"])(this, TransferList);
    _this = _super.apply(this, arguments);
    _this.wrapperRef = null;

    _this.handleRemove = function (value) {
      var onRemove = _this.props.onRemove;

      if (onRemove) {
        onRemove(value);
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(TransferList, [{
    key: "popup",
    get: function get() {
      return true;
    }
  }, {
    key: "header",
    get: function get() {
      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          header = this.observableProps.header;

      if (multiple || header) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, this.getHeaderSelected(), header && /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-header-title")
        }, header));
      }

      return undefined;
    }
  }, {
    key: "footer",
    get: function get() {
      var prefixCls = this.prefixCls,
          filteredOptions = this.filteredOptions,
          footer = this.observableProps.footer;

      if (footer) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-footer")
        }, footer(filteredOptions));
      }

      return undefined;
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var currentIndex = this.props.currentIndex; // 在渲染完之后执行

      if (this.wrapperRef && typeof currentIndex !== 'undefined') {
        var contentDom = this.wrapperRef.getElementsByTagName('ul')[0];
        var findSelectedDom = this.wrapperRef.getElementsByTagName('li');

        if (contentDom && currentIndex && currentIndex > -1 && currentIndex < this.filteredOptions.length) {
          var selectedDom = findSelectedDom[currentIndex];
          (0, _scrollIntoViewIfNeeded["default"])(selectedDom, {
            block: 'end',
            behavior: 'smooth',
            scrollMode: 'if-needed',
            boundary: contentDom
          });
        }

        this.options.setState('targetFilteredOptions', this.filteredOptions);
      }
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(TransferList.prototype), "getOmitPropsKeys", this).call(this).concat(['autoComplete', 'footer', 'header', 'selected', 'onSelect', 'onSelectAll']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _get2["default"])((0, _getPrototypeOf2["default"])(TransferList.prototype), "getOtherProps", this).call(this);
      delete otherProps.ref;
      delete otherProps.type;
      delete otherProps.onChange;
      delete otherProps.onKeyDown;
      delete otherProps.currentIndex;
      delete otherProps.sortable;
      delete otherProps.sortOperations;
      delete otherProps.oneWay;
      delete otherProps.onRemove;
      delete otherProps.targetOption;
      delete otherProps.direction;
      return otherProps;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(TransferList.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        header: props.header,
        footer: props.footer
      });
    }
  }, {
    key: "getMenuPrefixCls",
    value: function getMenuPrefixCls() {
      return "".concat(this.prefixCls, "-content");
    }
  }, {
    key: "handleSelectAllChange",
    value: function handleSelectAllChange(value) {
      var onSelectAll = this.props.onSelectAll;

      if (onSelectAll) {
        onSelectAll(value ? this.filteredOptions.filter(function (record) {
          return !record.get(_Select2.DISABLED_FIELD);
        }) : []);
      }
    }
  }, {
    key: "handleClear",
    value: function handleClear() {
      this.setText(undefined);
    }
  }, {
    key: "getHeaderSelected",
    value: function getHeaderSelected() {
      var length = this.filteredOptions.length,
          multiple = this.multiple,
          prefixCls = this.prefixCls,
          selectedLength = this.props.selected.length;
      var selectedText = selectedLength ? "".concat(selectedLength, "/") : '';
      var disabledLength = this.filteredOptions.filter(function (record) {
        return record.get(_Select2.DISABLED_FIELD);
      }).length;

      if (multiple) {
        return /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
          disabled: this.disabled,
          onChange: this.handleSelectAllChange,
          onFocus: _EventManager.stopPropagation,
          checked: !!length && disabledLength !== length && (length === selectedLength || length - disabledLength === selectedLength),
          indeterminate: !!selectedLength && length - disabledLength !== selectedLength
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-header-selected")
        }, "".concat(selectedText).concat(length).concat((0, _localeContext.$l)('Transfer', 'items'))));
      }

      return /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-header-selected")
      }, "".concat(length).concat((0, _localeContext.$l)('Transfer', 'items')));
    }
  }, {
    key: "getSearchField",
    value: function getSearchField() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-body-search-wrapper")
      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        ref: this.elementReference,
        onInput: this.handleChange,
        onClear: this.handleClear,
        onKeyDown: this.handleKeyDown,
        prefix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "search"
        }),
        clearButton: true
      }));
    }
  }, {
    key: "getMenuItem",
    value: function getMenuItem(_ref) {
      var _this2 = this;

      var record = _ref.record,
          text = _ref.text,
          value = _ref.value;
      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          options = this.options,
          _this$props = this.props,
          oneWay = _this$props.oneWay,
          optionRenderer = _this$props.optionRenderer;

      if (oneWay && !multiple) {
        var renderer = /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-item-delete")
        }, /*#__PURE__*/_react["default"].createElement("div", null, text), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "delete_black-o",
          className: "".concat(prefixCls, "-item-icon"),
          onClick: function onClick() {
            return _this2.handleRemove(value);
          }
        }));

        return optionRenderer ? optionRenderer({
          dataSet: options,
          record: record,
          text: text,
          value: value
        }) : renderer;
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(TransferList.prototype), "getMenuItem", this).call(this, {
        record: record,
        text: text,
        value: value
      });
    }
  }, {
    key: "renderBody",
    value: function renderBody() {
      var _this3 = this;

      var prefixCls = this.prefixCls,
          searchable = this.searchable,
          textField = this.textField,
          valueField = this.valueField,
          multiple = this.multiple,
          _this$props2 = this.props,
          selected = _this$props2.selected,
          onSelect = _this$props2.onSelect,
          onSelectAll = _this$props2.onSelectAll,
          setTargetOption = _this$props2.setTargetOption,
          children = _this$props2.children,
          targetOption = _this$props2.targetOption,
          direction = _this$props2.direction;
      var searchField = searchable && this.getSearchField();
      var classString = (0, _classnames["default"])("".concat(prefixCls, "-body"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-body-with-search"), searchable)); // 自定义渲染

      if (typeof children === 'function') {
        return /*#__PURE__*/_react["default"].createElement(_CustomArea["default"], {
          targetOption: targetOption
        }, children({
          direction: direction,
          targetOption: targetOption,
          setTargetOption: setTargetOption,
          onItemSelect: onSelectAll
        }));
      }

      var selectedKeys = multiple ? selected.map(function (record) {
        return (0, _Select2.getItemKey)(record, record.get(textField), record.get(valueField));
      }) : [];
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: classString
      }, searchField, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-content-wrapper"),
        ref: function ref(dom) {
          _this3.wrapperRef = dom;
        },
        onFocus: searchable ? _EventManager.stopPropagation : undefined
      }, this.getMenu({
        selectedKeys: selectedKeys,
        onClick: onSelect,
        focusable: !this.searchable
      })));
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var _get$call;

      var prefixCls = this.prefixCls,
          header = this.header,
          footer = this.footer;
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(TransferList.prototype), "getClassName", this).call(this, (_get$call = {}, (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-with-header"), header), (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-with-footer"), footer), _get$call));
    }
  }, {
    key: "removeLastValue",
    value: function removeLastValue() {// noop
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      _ViewComponent["default"].prototype.handleBlur.call(this, e);
    }
  }, {
    key: "renderHelpMessage",
    value: function renderHelpMessage() {
      return null;
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var header = this.header,
          footer = this.footer,
          _this$props3 = this.props,
          style = _this$props3.style,
          children = _this$props3.children;
      var isCustom = typeof children === 'function';
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, this.getOtherProps(), {
        style: style
      }), !isCustom && header, this.renderBody(), !isCustom && footer);
    }
  }]);
  return TransferList;
}(_Select2.Select);

(0, _tslib.__decorate)([_mobx.computed], TransferList.prototype, "header", null);
(0, _tslib.__decorate)([_mobx.computed], TransferList.prototype, "footer", null);
(0, _tslib.__decorate)([_autobind["default"]], TransferList.prototype, "handleSelectAllChange", null);
(0, _tslib.__decorate)([_autobind["default"]], TransferList.prototype, "handleClear", null);
(0, _tslib.__decorate)([_autobind["default"]], TransferList.prototype, "handleBlur", null);
TransferList = (0, _tslib.__decorate)([_mobxReact.observer], TransferList);
var _default = TransferList;
exports["default"] = _default;
//# sourceMappingURL=TransferList.js.map