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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
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 { computed } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import scrollIntoView from 'scroll-into-view-if-needed';
import ObserverCheckBox from '../check-box/CheckBox';
import { $l } from '../locale-context';
import ObserverTextField from '../text-field/TextField';
import Icon from '../icon';
import { getItemKey, Select } from '../select/Select';
import autobind from '../_util/autobind';
import { stopPropagation } from '../_util/EventManager';
import ViewComponent from '../core/ViewComponent';

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

  var _super = _createSuper(TransferList);

  function TransferList() {
    var _this;

    _classCallCheck(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;
  }

  _createClass(TransferList, [{
    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];
          scrollIntoView(selectedDom, {
            block: 'end',
            behavior: 'smooth',
            scrollMode: 'if-needed',
            boundary: contentDom
          });
        }

        this.options.setState('targetFilteredOptions', this.filteredOptions);
      }
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(TransferList.prototype), "getOmitPropsKeys", this).call(this).concat(['autoComplete', 'footer', 'header', 'selected', 'onSelect', 'onSelectAll']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = _get(_getPrototypeOf(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;
      return otherProps;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _objectSpread({}, _get(_getPrototypeOf(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 : []);
      }
    }
  }, {
    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, "/") : '';

      if (multiple) {
        return React.createElement(ObserverCheckBox, {
          disabled: this.disabled,
          onChange: this.handleSelectAllChange,
          onFocus: stopPropagation,
          checked: !!length && length === selectedLength,
          indeterminate: !!selectedLength && length !== selectedLength
        }, React.createElement("span", {
          className: "".concat(prefixCls, "-header-selected")
        }, "".concat(selectedText).concat(length).concat($l('Transfer', 'items'))));
      }

      return React.createElement("span", {
        className: "".concat(prefixCls, "-header-selected")
      }, "".concat(length).concat($l('Transfer', 'items')));
    }
  }, {
    key: "getSearchField",
    value: function getSearchField() {
      var prefixCls = this.prefixCls;
      return React.createElement("div", {
        className: "".concat(prefixCls, "-body-search-wrapper")
      }, React.createElement(ObserverTextField, {
        ref: this.elementReference,
        onInput: this.handleChange,
        onClear: this.handleClear,
        onKeyDown: this.handleKeyDown,
        prefix: React.createElement(Icon, {
          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 = React.createElement("div", {
          className: "".concat(prefixCls, "-item-delete")
        }, React.createElement("div", null, text), React.createElement(Icon, {
          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 _get(_getPrototypeOf(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;
      var searchField = searchable && this.getSearchField();
      var classString = classNames("".concat(prefixCls, "-body"), _defineProperty({}, "".concat(prefixCls, "-body-with-search"), searchable));
      var selectedKeys = multiple ? selected.map(function (record) {
        return getItemKey(record, record.get(textField), record.get(valueField));
      }) : [];
      return React.createElement("div", {
        className: classString
      }, searchField, React.createElement("div", {
        className: "".concat(prefixCls, "-content-wrapper"),
        ref: function ref(dom) {
          _this3.wrapperRef = dom;
        },
        onFocus: searchable ? 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 _get(_getPrototypeOf(TransferList.prototype), "getClassName", this).call(this, (_get$call = {}, _defineProperty(_get$call, "".concat(prefixCls, "-with-header"), header), _defineProperty(_get$call, "".concat(prefixCls, "-with-footer"), footer), _get$call));
    }
  }, {
    key: "removeLastValue",
    value: function removeLastValue() {// noop
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      ViewComponent.prototype.handleBlur.call(this, e);
    }
  }, {
    key: "render",
    value: function render() {
      var header = this.header,
          footer = this.footer;
      return React.createElement("div", _extends({}, this.getOtherProps()), header, this.renderBody(), footer);
    }
  }, {
    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 React.createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, this.getHeaderSelected(), header && React.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 React.createElement("div", {
          className: "".concat(prefixCls, "-footer")
        }, footer(filteredOptions));
      }

      return undefined;
    }
  }]);

  return TransferList;
}(Select);

__decorate([computed], TransferList.prototype, "header", null);

__decorate([computed], TransferList.prototype, "footer", null);

__decorate([autobind], TransferList.prototype, "handleSelectAllChange", null);

__decorate([autobind], TransferList.prototype, "handleClear", null);

__decorate([autobind], TransferList.prototype, "handleBlur", null);

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