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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

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 React, { cloneElement, Component } from 'react';
import PropTypes from 'prop-types';
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), "getMenuElement", function () {
      var _this$props = _this.props,
          overlay = _this$props.overlay,
          prefixCls = _this$props.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 cloneElement(element, extraOverlayProps);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "afterVisibleChange", function (visible) {
      if (visible && _this.props.minOverlayWidthMatchTrigger) {
        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$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          children = _this$props2.children,
          transitionName = _this$props2.transitionName,
          animation = _this$props2.animation,
          align = _this$props2.align,
          placement = _this$props2.placement,
          getPopupContainer = _this$props2.getPopupContainer,
          showAction = _this$props2.showAction,
          hideAction = _this$props2.hideAction,
          overlayClassName = _this$props2.overlayClassName,
          overlayPlacements = _this$props2.overlayPlacements,
          overlayStyle = _this$props2.overlayStyle,
          trigger = _this$props2.trigger,
          otherProps = _objectWithoutProperties(_this$props2, ["prefixCls", "children", "transitionName", "animation", "align", "placement", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayPlacements", "overlayStyle", "trigger"]);

      var builtinPlacements = overlayPlacements || placements;
      return 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);
    }
  }]);

  return Dropdown;
}(Component);

_defineProperty(Dropdown, "propTypes", {
  minOverlayWidthMatchTrigger: PropTypes.bool,
  onVisibleChange: PropTypes.func,
  onOverlayClick: PropTypes.func,
  prefixCls: PropTypes.string,
  children: PropTypes.any,
  transitionName: PropTypes.string,
  overlayClassName: PropTypes.string,
  animation: PropTypes.any,
  align: PropTypes.object,
  overlayStyle: PropTypes.object,
  placement: PropTypes.string,
  overlay: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  showAction: PropTypes.array,
  hideAction: PropTypes.array,
  getPopupContainer: PropTypes.func,
  visible: PropTypes.bool,
  defaultVisible: PropTypes.bool,
  overlayPlacements: PropTypes.object
});

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

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