choerodon-ui/es/rc-components/dropdown/Dropdown.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["prefixCls", "children", "transitionName", "animation", "align", "placement", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayPlacements", "overlayStyle", "trigger"];
import React, { cloneElement, Component } from 'react';
import ReactDOM from 'react-dom';
import Trigger from '../trigger';
import placements from './placements';

var Dropdown = /*#__PURE__*/function (_Component) {
  _inherits(Dropdown, _Component);

  var _super = _createSuper(Dropdown);

  function Dropdown(_props) {
    var _this;

    _classCallCheck(this, Dropdown);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_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);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (visible) {
      var props = _this.props;

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

      props.onVisibleChange(visible);
    });

    _defineProperty(_assertThisInitialized(_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;
    });

    _defineProperty(_assertThisInitialized(_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__*/cloneElement(element, extraOverlayProps);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "afterVisibleChange", function (visible) {
      if (visible && _this.getMinOverlayWidthMatchTrigger()) {
        var overlayNode = _this.getPopupDomNode();

        var rootNode = ReactDOM.findDOMNode(_assertThisInitialized(_this));

        if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
          overlayNode.style.minWidth = "".concat(rootNode.offsetWidth, "px");

          if (_this.trigger && _this.trigger._component && _this.trigger._component.alignInstance) {
            _this.trigger._component.alignInstance.forceAlign();
          }
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "saveTrigger", function (node) {
      _this.trigger = node;
    });

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

    return _this;
  }

  _createClass(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 = _objectWithoutProperties(_this$props3, _excluded);

      var builtinPlacements = overlayPlacements || placements;
      return /*#__PURE__*/React.createElement(Trigger, _extends({}, 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;
}(Component);

_defineProperty(Dropdown, "defaultProps", {
  prefixCls: 'rc-dropdown',
  trigger: ['hover'],
  showAction: [],
  hideAction: [],
  overlayClassName: '',
  overlayStyle: {},
  defaultVisible: false,
  onVisibleChange: function onVisibleChange() {},
  placement: 'bottomLeft'
});

export { Dropdown as default };
//# sourceMappingURL=Dropdown.js.map