127 lines
5.2 KiB
JavaScript
127 lines
5.2 KiB
JavaScript
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
||
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
||
|
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||
|
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
||
|
|
var _excluded = ["arrow", "prefixCls", "transitionName", "animation", "align", "placement", "placements", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayStyle", "visible", "trigger", "autoFocus", "overlay", "children", "onVisibleChange"];
|
||
|
|
import Trigger from '@rc-component/trigger';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { composeRef, supportRef } from "rc-util/es/ref";
|
||
|
|
import React from 'react';
|
||
|
|
import useAccessibility from "./hooks/useAccessibility";
|
||
|
|
import Overlay from "./Overlay";
|
||
|
|
import Placements from "./placements";
|
||
|
|
function Dropdown(props, ref) {
|
||
|
|
var _children$props;
|
||
|
|
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,
|
||
|
|
autoFocus = props.autoFocus,
|
||
|
|
overlay = props.overlay,
|
||
|
|
children = props.children,
|
||
|
|
onVisibleChange = props.onVisibleChange,
|
||
|
|
otherProps = _objectWithoutProperties(props, _excluded);
|
||
|
|
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);
|
||
|
|
var overlayRef = React.useRef(null);
|
||
|
|
var childRef = React.useRef(null);
|
||
|
|
React.useImperativeHandle(ref, function () {
|
||
|
|
return triggerRef.current;
|
||
|
|
});
|
||
|
|
var handleVisibleChange = function handleVisibleChange(newVisible) {
|
||
|
|
setTriggerVisible(newVisible);
|
||
|
|
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(newVisible);
|
||
|
|
};
|
||
|
|
useAccessibility({
|
||
|
|
visible: mergedVisible,
|
||
|
|
triggerRef: childRef,
|
||
|
|
onVisibleChange: handleVisibleChange,
|
||
|
|
autoFocus: autoFocus,
|
||
|
|
overlayRef: overlayRef
|
||
|
|
});
|
||
|
|
var onClick = function onClick(e) {
|
||
|
|
var onOverlayClick = props.onOverlayClick;
|
||
|
|
setTriggerVisible(false);
|
||
|
|
if (onOverlayClick) {
|
||
|
|
onOverlayClick(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var getMenuElement = function getMenuElement() {
|
||
|
|
return /*#__PURE__*/React.createElement(Overlay, {
|
||
|
|
ref: overlayRef,
|
||
|
|
overlay: overlay,
|
||
|
|
prefixCls: prefixCls,
|
||
|
|
arrow: arrow
|
||
|
|
});
|
||
|
|
};
|
||
|
|
var getMenuElementOrLambda = function getMenuElementOrLambda() {
|
||
|
|
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 childrenNode = /*#__PURE__*/React.cloneElement(children, {
|
||
|
|
className: classNames((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className, mergedVisible && getOpenClassName()),
|
||
|
|
ref: supportRef(children) ? composeRef(childRef, children.ref) : undefined
|
||
|
|
});
|
||
|
|
var triggerHideAction = hideAction;
|
||
|
|
if (!triggerHideAction && trigger.indexOf('contextMenu') !== -1) {
|
||
|
|
triggerHideAction = ['click'];
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/React.createElement(Trigger, _extends({
|
||
|
|
builtinPlacements: placements
|
||
|
|
}, otherProps, {
|
||
|
|
prefixCls: prefixCls,
|
||
|
|
ref: triggerRef,
|
||
|
|
popupClassName: classNames(overlayClassName, _defineProperty({}, "".concat(prefixCls, "-show-arrow"), arrow)),
|
||
|
|
popupStyle: overlayStyle,
|
||
|
|
action: trigger,
|
||
|
|
showAction: showAction,
|
||
|
|
hideAction: triggerHideAction,
|
||
|
|
popupPlacement: placement,
|
||
|
|
popupAlign: align,
|
||
|
|
popupTransitionName: transitionName,
|
||
|
|
popupAnimation: animation,
|
||
|
|
popupVisible: mergedVisible,
|
||
|
|
stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '',
|
||
|
|
popup: getMenuElementOrLambda(),
|
||
|
|
onPopupVisibleChange: handleVisibleChange,
|
||
|
|
onPopupClick: onClick,
|
||
|
|
getPopupContainer: getPopupContainer
|
||
|
|
}), childrenNode);
|
||
|
|
}
|
||
|
|
export default /*#__PURE__*/React.forwardRef(Dropdown);
|