You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
5.2 KiB

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import Trigger from 'rc-trigger';
import classNames from 'classnames';
import Placements from './placements';
function Dropdown(props, ref) {
var _props$arrow = props.arrow,
arrow = _props$arrow === void 0 ? false : _props$arrow,
_props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'rc-dropdown' : _props$prefixCls,
transitionName = props.transitionName,
animation = props.animation,
align = props.align,
_props$placement = props.placement,
placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
_props$placements = props.placements,
placements = _props$placements === void 0 ? Placements : _props$placements,
getPopupContainer = props.getPopupContainer,
showAction = props.showAction,
hideAction = props.hideAction,
overlayClassName = props.overlayClassName,
overlayStyle = props.overlayStyle,
visible = props.visible,
_props$trigger = props.trigger,
trigger = _props$trigger === void 0 ? ['hover'] : _props$trigger,
otherProps = _objectWithoutProperties(props, ["arrow", "prefixCls", "transitionName", "animation", "align", "placement", "placements", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayStyle", "visible", "trigger"]);
var _React$useState = React.useState(),
_React$useState2 = _slicedToArray(_React$useState, 2),
triggerVisible = _React$useState2[0],
setTriggerVisible = _React$useState2[1];
var mergedVisible = 'visible' in props ? visible : triggerVisible;
var triggerRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return triggerRef.current;
});
var getOverlayElement = function getOverlayElement() {
var overlay = props.overlay;
var overlayElement;
if (typeof overlay === 'function') {
overlayElement = overlay();
} else {
overlayElement = overlay;
}
return overlayElement;
};
var onClick = function onClick(e) {
var onOverlayClick = props.onOverlayClick;
var overlayProps = getOverlayElement().props;
setTriggerVisible(false);
if (onOverlayClick) {
onOverlayClick(e);
}
if (overlayProps.onClick) {
overlayProps.onClick(e);
}
};
var onVisibleChange = function onVisibleChange(visible) {
var onVisibleChange = props.onVisibleChange;
setTriggerVisible(visible);
if (typeof onVisibleChange === 'function') {
onVisibleChange(visible);
}
};
var getMenuElement = function getMenuElement() {
var overlayElement = getOverlayElement();
var extraOverlayProps = {
prefixCls: "".concat(prefixCls, "-menu"),
onClick: onClick
};
if (typeof overlayElement.type === 'string') {
delete extraOverlayProps.prefixCls;
}
return React.createElement(React.Fragment, null, arrow && React.createElement("div", {
className: "".concat(prefixCls, "-arrow")
}), React.cloneElement(overlayElement, extraOverlayProps));
};
var getMenuElementOrLambda = function getMenuElementOrLambda() {
var overlay = props.overlay;
if (typeof overlay === 'function') {
return getMenuElement;
}
return getMenuElement();
};
var getMinOverlayWidthMatchTrigger = function getMinOverlayWidthMatchTrigger() {
var minOverlayWidthMatchTrigger = props.minOverlayWidthMatchTrigger,
alignPoint = props.alignPoint;
if ('minOverlayWidthMatchTrigger' in props) {
return minOverlayWidthMatchTrigger;
}
return !alignPoint;
};
var getOpenClassName = function getOpenClassName() {
var openClassName = props.openClassName;
if (openClassName !== undefined) {
return openClassName;
}
return "".concat(prefixCls, "-open");
};
var renderChildren = function renderChildren() {
var children = props.children;
var childrenProps = children.props ? children.props : {};
var childClassName = classNames(childrenProps.className, getOpenClassName());
return triggerVisible && children ? React.cloneElement(children, {
className: childClassName
}) : children;
};
var triggerHideAction = hideAction;
if (!triggerHideAction && trigger.indexOf('contextMenu') !== -1) {
triggerHideAction = ['click'];
}
return React.createElement(Trigger, Object.assign({}, otherProps, {
prefixCls: prefixCls,
ref: triggerRef,
popupClassName: classNames(overlayClassName, _defineProperty({}, "".concat(prefixCls, "-show-arrow"), arrow)),
popupStyle: overlayStyle,
builtinPlacements: placements,
action: trigger,
showAction: showAction,
hideAction: triggerHideAction || [],
popupPlacement: placement,
popupAlign: align,
popupTransitionName: transitionName,
popupAnimation: animation,
popupVisible: mergedVisible,
stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '',
popup: getMenuElementOrLambda(),
onPopupVisibleChange: onVisibleChange,
getPopupContainer: getPopupContainer
}), renderChildren());
}
export default React.forwardRef(Dropdown);