choerodon-ui/lib/rc-components/select/SelectTrigger.js

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

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

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

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

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

var _trigger = _interopRequireDefault(require("../trigger"));

var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));

var _util = require("./util");

var _spin = _interopRequireDefault(require("../../spin"));

var _excluded = ["onPopupFocus"];
var BUILT_IN_PLACEMENTS = {
  bottomLeft: {
    points: ['tl', 'bl'],
    offset: [0, 4],
    overflow: {
      adjustX: 0,
      adjustY: 1
    }
  },
  topLeft: {
    points: ['bl', 'tl'],
    offset: [0, -4],
    overflow: {
      adjustX: 0,
      adjustY: 1
    }
  },
  bottomRight: {
    points: ['tr', 'br'],
    offset: [0, 4],
    overflow: {
      adjustX: 0,
      adjustY: 1
    }
  }
};

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

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

  function SelectTrigger(_props) {
    var _this;

    (0, _classCallCheck2["default"])(this, SelectTrigger);
    _this = _super.call(this, _props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDropdownWidth", function () {
      var width = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this)).offsetWidth;

      if (width !== _this.state.dropdownWidth) {
        _this.setState({
          dropdownWidth: width
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getInnerMenu", function () {
      return _this.dropdownMenuRef && _this.dropdownMenuRef.menuRef;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFilterInput", function () {
      return _this.dropdownMenuRef && _this.dropdownMenuRef.filterRef;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPopupDOMNode", function () {
      return _this.triggerRef.getPopupDomNode();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownElement", function (newProps) {
      var props = _this.props;
      var loading = props.loading;

      if (typeof loading === 'boolean') {
        loading = {
          spinning: loading
        };
      }

      return /*#__PURE__*/_react["default"].createElement(_spin["default"], (0, _extends2["default"])({
        prefixCls: props.spinPrefixCls
      }, loading), /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], (0, _extends2["default"])({
        ref: _this.saveDropdownMenuRef
      }, newProps, {
        prefixCls: _this.getDropdownPrefixCls(),
        onMenuSelect: props.onMenuSelect,
        onMenuDeselect: props.onMenuDeselect,
        onPopupScroll: props.onPopupScroll,
        onKeyDown: props.onKeyDown,
        value: props.value,
        placeholder: props.filterPlaceholder,
        checkAll: props.checkAll,
        backfillValue: props.backfillValue,
        firstActiveValue: props.firstActiveValue,
        defaultActiveFirstOption: props.defaultActiveFirstOption,
        dropdownMenuStyle: props.dropdownMenuStyle,
        dropdownMenuRippleDisabled: props.dropdownMenuRippleDisabled,
        onFilterChange: props.onFilterChange,
        footer: props.footer,
        onMouseDown: props.onDropdownMouseDown
      })));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownTransitionName", function () {
      var props = _this.props;
      var transitionName = props.transitionName;

      if (!transitionName && props.animation) {
        transitionName = "".concat(_this.getDropdownPrefixCls(), "-").concat(props.animation);
      }

      return transitionName;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownPrefixCls", function () {
      return "".concat(_this.props.prefixCls, "-dropdown");
    });
    _this.saveDropdownMenuRef = (0, _util.saveRef)((0, _assertThisInitialized2["default"])(_this), 'dropdownMenuRef');
    _this.saveTriggerRef = (0, _util.saveRef)((0, _assertThisInitialized2["default"])(_this), 'triggerRef');
    _this.state = {
      dropdownWidth: null
    };
    return _this;
  }

  (0, _createClass2["default"])(SelectTrigger, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setDropdownWidth();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.setDropdownWidth();
    }
  }, {
    key: "render",
    value: function render() {
      var _popupClassName;

      var _this$props = this.props,
          onPopupFocus = _this$props.onPopupFocus,
          props = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
      var multiple = props.multiple,
          visible = props.visible,
          inputValue = props.inputValue,
          dropdownAlign = props.dropdownAlign,
          disabled = props.disabled,
          showSearch = props.showSearch,
          dropdownClassName = props.dropdownClassName,
          dropdownStyle = props.dropdownStyle,
          dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
          filter = props.filter,
          filterValue = props.filterValue,
          checkAll = props.checkAll,
          footer = props.footer;
      var dropdownPrefixCls = this.getDropdownPrefixCls();
      var popupClassName = (_popupClassName = {}, (0, _defineProperty2["default"])(_popupClassName, dropdownClassName, !!dropdownClassName), (0, _defineProperty2["default"])(_popupClassName, "".concat(dropdownPrefixCls, "--").concat(multiple ? 'multiple' : 'single'), 1), _popupClassName);
      var popupElement = this.getDropdownElement({
        menuItems: props.options,
        onPopupFocus: onPopupFocus,
        multiple: multiple,
        inputValue: inputValue,
        visible: visible,
        filter: filter,
        filterValue: filterValue
      });
      var hideAction;

      if (disabled) {
        hideAction = [];
      } else if (footer || multiple && checkAll || filter || (0, _util.isSingleMode)(props) && !showSearch) {
        hideAction = ['click'];
      } else {
        hideAction = ['blur'];
      }

      var popupStyle = (0, _objectSpread2["default"])({}, dropdownStyle);
      var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';

      if (this.state.dropdownWidth && !popupStyle[widthProp]) {
        popupStyle[widthProp] = "".concat(this.state.dropdownWidth, "px");
      }

      return /*#__PURE__*/_react["default"].createElement(_trigger["default"], (0, _extends2["default"])({}, props, {
        showAction: disabled ? [] : props.showAction,
        hideAction: hideAction,
        ref: this.saveTriggerRef,
        popupPlacement: props.popupPlacement,
        builtinPlacements: props.builtinPlacements || BUILT_IN_PLACEMENTS,
        prefixCls: dropdownPrefixCls,
        popupTransitionName: this.getDropdownTransitionName(),
        onPopupVisibleChange: props.onDropdownVisibleChange,
        popup: popupElement,
        popupAlign: dropdownAlign,
        popupVisible: visible,
        getPopupContainer: props.getPopupContainer,
        popupClassName: (0, _classnames["default"])(popupClassName),
        popupStyle: popupStyle
      }), props.children);
    }
  }]);
  return SelectTrigger;
}(_react.Component);

exports["default"] = SelectTrigger;
(0, _defineProperty2["default"])(SelectTrigger, "defaultProps", {
  popupPlacement: 'bottomLeft',
  loading: false
});
SelectTrigger.displayName = 'SelectTrigger';
//# sourceMappingURL=SelectTrigger.js.map