var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } import React, { Component, cloneElement } from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import Trigger from 'rc-trigger'; import classNames from 'classnames'; import placements from './placements'; import { polyfill } from 'react-lifecycles-compat'; var Dropdown = function (_Component) { _inherits(Dropdown, _Component); function Dropdown(props) { _classCallCheck(this, Dropdown); var _this = _possibleConstructorReturn(this, _Component.call(this, props)); _initialiseProps.call(_this); if ('visible' in props) { _this.state = { visible: props.visible }; } else { _this.state = { visible: props.defaultVisible }; } return _this; } Dropdown.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { if ('visible' in nextProps) { return { visible: nextProps.visible }; } return null; }; Dropdown.prototype.getOverlayElement = function getOverlayElement() { var overlay = this.props.overlay; var overlayElement = void 0; if (typeof overlay === 'function') { overlayElement = overlay(); } else { overlayElement = overlay; } return overlayElement; }; Dropdown.prototype.getMenuElementOrLambda = function getMenuElementOrLambda() { var overlay = this.props.overlay; if (typeof overlay === 'function') { return this.getMenuElement; } return this.getMenuElement(); }; Dropdown.prototype.getPopupDomNode = function getPopupDomNode() { return this.trigger.getPopupDomNode(); }; Dropdown.prototype.getOpenClassName = function getOpenClassName() { var _props = this.props, openClassName = _props.openClassName, prefixCls = _props.prefixCls; if (openClassName !== undefined) { return openClassName; } return prefixCls + '-open'; }; Dropdown.prototype.renderChildren = function renderChildren() { var children = this.props.children; var visible = this.state.visible; var childrenProps = children.props ? children.props : {}; var childClassName = classNames(childrenProps.className, this.getOpenClassName()); return visible && children ? cloneElement(children, { className: childClassName }) : children; }; Dropdown.prototype.render = function render() { var _props2 = this.props, prefixCls = _props2.prefixCls, transitionName = _props2.transitionName, animation = _props2.animation, align = _props2.align, placement = _props2.placement, getPopupContainer = _props2.getPopupContainer, showAction = _props2.showAction, hideAction = _props2.hideAction, overlayClassName = _props2.overlayClassName, overlayStyle = _props2.overlayStyle, trigger = _props2.trigger, otherProps = _objectWithoutProperties(_props2, ['prefixCls', 'transitionName', 'animation', 'align', 'placement', 'getPopupContainer', 'showAction', 'hideAction', 'overlayClassName', 'overlayStyle', 'trigger']); var triggerHideAction = hideAction; if (!triggerHideAction && trigger.indexOf('contextMenu') !== -1) { triggerHideAction = ['click']; } return React.createElement( Trigger, _extends({}, otherProps, { prefixCls: prefixCls, ref: this.saveTrigger, popupClassName: overlayClassName, popupStyle: overlayStyle, builtinPlacements: placements, action: trigger, showAction: showAction, hideAction: triggerHideAction || [], popupPlacement: placement, popupAlign: align, popupTransitionName: transitionName, popupAnimation: animation, popupVisible: this.state.visible, afterPopupVisibleChange: this.afterVisibleChange, popup: this.getMenuElementOrLambda(), onPopupVisibleChange: this.onVisibleChange, getPopupContainer: getPopupContainer }), this.renderChildren() ); }; return Dropdown; }(Component); Dropdown.propTypes = { minOverlayWidthMatchTrigger: PropTypes.bool, onVisibleChange: PropTypes.func, onOverlayClick: PropTypes.func, prefixCls: PropTypes.string, children: PropTypes.any, transitionName: PropTypes.string, overlayClassName: PropTypes.string, openClassName: PropTypes.string, animation: PropTypes.any, align: PropTypes.object, overlayStyle: PropTypes.object, placement: PropTypes.string, overlay: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), trigger: PropTypes.array, alignPoint: PropTypes.bool, showAction: PropTypes.array, hideAction: PropTypes.array, getPopupContainer: PropTypes.func, visible: PropTypes.bool, defaultVisible: PropTypes.bool }; Dropdown.defaultProps = { prefixCls: 'rc-dropdown', trigger: ['hover'], showAction: [], overlayClassName: '', overlayStyle: {}, defaultVisible: false, onVisibleChange: function onVisibleChange() {}, placement: 'bottomLeft' }; var _initialiseProps = function _initialiseProps() { var _this2 = this; this.onClick = function (e) { var props = _this2.props; var overlayProps = _this2.getOverlayElement().props; // do no call onVisibleChange, if you need click to hide, use onClick and control visible if (!('visible' in props)) { _this2.setState({ visible: false }); } if (props.onOverlayClick) { props.onOverlayClick(e); } if (overlayProps.onClick) { overlayProps.onClick(e); } }; this.onVisibleChange = function (visible) { var props = _this2.props; if (!('visible' in props)) { _this2.setState({ visible: visible }); } props.onVisibleChange(visible); }; this.getMinOverlayWidthMatchTrigger = function () { var _props3 = _this2.props, minOverlayWidthMatchTrigger = _props3.minOverlayWidthMatchTrigger, alignPoint = _props3.alignPoint; if ('minOverlayWidthMatchTrigger' in _this2.props) { return minOverlayWidthMatchTrigger; } return !alignPoint; }; this.getMenuElement = function () { var prefixCls = _this2.props.prefixCls; var overlayElement = _this2.getOverlayElement(); var extraOverlayProps = { prefixCls: prefixCls + '-menu', onClick: _this2.onClick }; if (typeof overlayElement.type === 'string') { delete extraOverlayProps.prefixCls; } return React.cloneElement(overlayElement, extraOverlayProps); }; this.afterVisibleChange = function (visible) { if (visible && _this2.getMinOverlayWidthMatchTrigger()) { var overlayNode = _this2.getPopupDomNode(); var rootNode = ReactDOM.findDOMNode(_this2); if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) { overlayNode.style.minWidth = rootNode.offsetWidth + 'px'; if (_this2.trigger && _this2.trigger._component && _this2.trigger._component.alignInstance) { _this2.trigger._component.alignInstance.forceAlign(); } } } }; this.saveTrigger = function (node) { _this2.trigger = node; }; }; polyfill(Dropdown); export default Dropdown;