choerodon-ui/lib/rc-components/dropdown/Dropdown.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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 _trigger = _interopRequireDefault(require("../trigger"));

var _placements = _interopRequireDefault(require("./placements"));

var _UnitConvertor = require("../../_util/UnitConvertor");

var _excluded = ["prefixCls", "children", "transitionName", "animation", "align", "placement", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayPlacements", "overlayStyle", "trigger"];

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

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

  function Dropdown(_props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Dropdown);
    _this = _super.call(this, _props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (e) {
      var props = _this.props;
      var overlay = props.overlay;
      var element = typeof overlay === 'function' ? overlay() : overlay;
      var overlayProps = element.props; // do no call onVisibleChange, if you need click to hide, use onClick and control visible

      if (!('visible' in props)) {
        _this.setState({
          visible: false
        });
      }

      if (props.onOverlayClick) {
        props.onOverlayClick(e);
      }

      if (overlayProps.onClick) {
        overlayProps.onClick(e);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (visible) {
      var props = _this.props;

      if (!('visible' in props)) {
        _this.setState({
          visible: visible
        });
      }

      props.onVisibleChange(visible);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMinOverlayWidthMatchTrigger", function () {
      var _this$props = _this.props,
          minOverlayWidthMatchTrigger = _this$props.minOverlayWidthMatchTrigger,
          alignPoint = _this$props.alignPoint;

      if ('minOverlayWidthMatchTrigger' in _this.props) {
        return minOverlayWidthMatchTrigger;
      }

      return !alignPoint;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMenuElement", function () {
      var _this$props2 = _this.props,
          overlay = _this$props2.overlay,
          prefixCls = _this$props2.prefixCls;
      var element = typeof overlay === 'function' ? overlay() : overlay;

      if (element) {
        var extraOverlayProps = {
          prefixCls: "".concat(prefixCls, "-menu"),
          onClick: _this.onClick
        };

        if (typeof element.type === 'string') {
          delete extraOverlayProps.prefixCls;
        }

        return /*#__PURE__*/(0, _react.cloneElement)(element, extraOverlayProps);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "afterVisibleChange", function (visible) {
      if (visible && _this.getMinOverlayWidthMatchTrigger()) {
        var overlayNode = _this.getPopupDomNode();

        var rootNode = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this));

        if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
          overlayNode.style.minWidth = (0, _UnitConvertor.pxToRem)(rootNode.offsetWidth, true);

          if (_this.trigger && _this.trigger._component && _this.trigger._component.alignInstance) {
            _this.trigger._component.alignInstance.forceAlign();
          }
        }
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveTrigger", function (node) {
      _this.trigger = node;
    });

    if ('visible' in _props) {
      _this.state = {
        visible: _props.visible
      };
    } else {
      _this.state = {
        visible: _props.defaultVisible
      };
    }

    return _this;
  }

  (0, _createClass2["default"])(Dropdown, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(_ref) {
      var visible = _ref.visible;

      if (visible !== undefined) {
        this.setState({
          visible: visible
        });
      }
    }
  }, {
    key: "getPopupDomNode",
    value: function getPopupDomNode() {
      return this.trigger.getPopupDomNode();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          children = _this$props3.children,
          transitionName = _this$props3.transitionName,
          animation = _this$props3.animation,
          align = _this$props3.align,
          placement = _this$props3.placement,
          getPopupContainer = _this$props3.getPopupContainer,
          showAction = _this$props3.showAction,
          hideAction = _this$props3.hideAction,
          overlayClassName = _this$props3.overlayClassName,
          overlayPlacements = _this$props3.overlayPlacements,
          overlayStyle = _this$props3.overlayStyle,
          trigger = _this$props3.trigger,
          otherProps = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
      var builtinPlacements = overlayPlacements || _placements["default"];
      return /*#__PURE__*/_react["default"].createElement(_trigger["default"], (0, _extends2["default"])({}, otherProps, {
        prefixCls: prefixCls,
        ref: this.saveTrigger,
        popupClassName: overlayClassName,
        popupStyle: overlayStyle,
        builtinPlacements: builtinPlacements,
        action: trigger,
        showAction: showAction,
        hideAction: hideAction,
        popupPlacement: placement,
        popupAlign: align,
        popupTransitionName: transitionName,
        popupAnimation: animation,
        popupVisible: this.state.visible,
        afterPopupVisibleChange: this.afterVisibleChange,
        popup: this.getMenuElement,
        onPopupVisibleChange: this.onVisibleChange,
        getPopupContainer: getPopupContainer
      }), children);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      if ('visible' in nextProps) {
        return {
          visible: nextProps.visible
        };
      }

      return null;
    }
  }]);
  return Dropdown;
}(_react.Component);

exports["default"] = Dropdown;
(0, _defineProperty2["default"])(Dropdown, "defaultProps", {
  prefixCls: 'rc-dropdown',
  trigger: ['hover'],
  showAction: [],
  hideAction: [],
  overlayClassName: '',
  overlayStyle: {},
  defaultVisible: false,
  onVisibleChange: function onVisibleChange() {},
  placement: 'bottomLeft'
});
//# sourceMappingURL=Dropdown.js.map