2020-03-02 12:09:38 +08:00
|
|
|
import RightOutlined from '@ant-design/icons/RightOutlined';
|
2022-06-11 15:10:03 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import RcDropdown from 'rc-dropdown';
|
2022-06-21 15:48:29 +08:00
|
|
|
import useEvent from 'rc-util/lib/hooks/useEvent';
|
|
|
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
2023-01-20 11:03:50 +08:00
|
|
|
import omit from 'rc-util/lib/omit';
|
2023-05-05 20:52:44 +08:00
|
|
|
import React from 'react';
|
2023-03-30 14:55:34 +08:00
|
|
|
import genPurePanel from '../_util/PurePanel';
|
|
|
|
import type { AdjustOverflow } from '../_util/placements';
|
|
|
|
import getPlacements from '../_util/placements';
|
|
|
|
import { cloneElement } from '../_util/reactNode';
|
|
|
|
import warning from '../_util/warning';
|
2020-05-17 00:51:05 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2023-01-20 11:03:50 +08:00
|
|
|
import type { MenuProps } from '../menu';
|
|
|
|
import Menu from '../menu';
|
2022-06-17 14:37:18 +08:00
|
|
|
import { OverrideProvider } from '../menu/OverrideContext';
|
2023-01-20 11:03:50 +08:00
|
|
|
import { NoCompactStyle } from '../space/Compact';
|
2023-03-30 14:55:34 +08:00
|
|
|
import theme from '../theme';
|
2022-06-11 15:10:03 +08:00
|
|
|
import DropdownButton from './dropdown-button';
|
2022-04-25 10:54:00 +08:00
|
|
|
import useStyle from './style';
|
2015-12-02 15:18:15 +08:00
|
|
|
|
2022-12-13 14:57:40 +08:00
|
|
|
const Placements = [
|
2018-12-22 21:21:42 +08:00
|
|
|
'topLeft',
|
|
|
|
'topCenter',
|
|
|
|
'topRight',
|
|
|
|
'bottomLeft',
|
|
|
|
'bottomCenter',
|
|
|
|
'bottomRight',
|
2022-01-13 13:34:34 +08:00
|
|
|
'top',
|
|
|
|
'bottom',
|
2022-12-13 14:57:40 +08:00
|
|
|
] as const;
|
2021-02-17 17:09:13 +08:00
|
|
|
|
2019-11-15 14:35:25 +08:00
|
|
|
type Placement = typeof Placements[number];
|
2018-12-28 20:27:42 +08:00
|
|
|
|
2019-11-06 14:49:20 +08:00
|
|
|
type OverlayFunc = () => React.ReactElement;
|
2018-12-28 20:27:42 +08:00
|
|
|
|
2019-02-27 14:44:24 +08:00
|
|
|
type Align = {
|
|
|
|
points?: [string, string];
|
|
|
|
offset?: [number, number];
|
|
|
|
targetOffset?: [number, number];
|
|
|
|
overflow?: {
|
|
|
|
adjustX?: boolean;
|
|
|
|
adjustY?: boolean;
|
|
|
|
};
|
|
|
|
useCssRight?: boolean;
|
|
|
|
useCssBottom?: boolean;
|
|
|
|
useCssTransform?: boolean;
|
|
|
|
};
|
|
|
|
|
2022-01-13 13:34:34 +08:00
|
|
|
export type DropdownArrowOptions = {
|
|
|
|
pointAtCenter?: boolean;
|
|
|
|
};
|
|
|
|
|
2022-04-21 22:09:59 +08:00
|
|
|
export interface DropdownProps {
|
2022-10-23 00:33:45 +08:00
|
|
|
menu?: MenuProps;
|
2022-06-11 15:10:03 +08:00
|
|
|
autoFocus?: boolean;
|
2022-01-13 13:34:34 +08:00
|
|
|
arrow?: boolean | DropdownArrowOptions;
|
2018-08-24 11:51:52 +08:00
|
|
|
trigger?: ('click' | 'hover' | 'contextMenu')[];
|
2022-10-23 00:33:45 +08:00
|
|
|
dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
|
2022-08-24 17:46:44 +08:00
|
|
|
onOpenChange?: (open: boolean) => void;
|
|
|
|
open?: boolean;
|
2017-08-11 23:55:36 +08:00
|
|
|
disabled?: boolean;
|
2021-08-08 14:49:22 +08:00
|
|
|
destroyPopupOnHide?: boolean;
|
2019-02-27 14:44:24 +08:00
|
|
|
align?: Align;
|
2019-04-28 11:47:22 +08:00
|
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
2016-12-03 17:31:04 +08:00
|
|
|
prefixCls?: string;
|
2017-08-29 13:27:38 +08:00
|
|
|
className?: string;
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: string;
|
2018-01-13 17:25:08 +08:00
|
|
|
transitionName?: string;
|
2018-12-22 21:21:42 +08:00
|
|
|
placement?: Placement;
|
2018-12-13 22:03:12 +08:00
|
|
|
overlayClassName?: string;
|
|
|
|
overlayStyle?: React.CSSProperties;
|
2017-12-03 19:09:39 +08:00
|
|
|
forceRender?: boolean;
|
2018-12-04 20:28:48 +08:00
|
|
|
mouseEnterDelay?: number;
|
|
|
|
mouseLeaveDelay?: number;
|
2018-12-21 20:56:36 +08:00
|
|
|
openClassName?: string;
|
2022-04-08 22:55:42 +08:00
|
|
|
children?: React.ReactNode;
|
2022-12-22 17:56:02 +08:00
|
|
|
autoAdjustOverflow?: boolean | AdjustOverflow;
|
2022-09-06 21:46:49 +08:00
|
|
|
|
|
|
|
// Deprecated
|
2022-10-23 00:33:45 +08:00
|
|
|
/** @deprecated Please use `menu` instead */
|
|
|
|
overlay?: React.ReactElement | OverlayFunc;
|
2022-09-06 21:46:49 +08:00
|
|
|
/** @deprecated Please use `open` instead */
|
|
|
|
visible?: boolean;
|
|
|
|
/** @deprecated Please use `onOpenChange` instead */
|
|
|
|
onVisibleChange?: (open: boolean) => void;
|
2016-08-11 15:38:03 +08:00
|
|
|
}
|
|
|
|
|
2022-12-01 14:33:51 +08:00
|
|
|
type CompoundedComponent = React.FC<DropdownProps> & {
|
2020-05-17 00:51:05 +08:00
|
|
|
Button: typeof DropdownButton;
|
2022-07-11 15:57:05 +08:00
|
|
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
|
2022-12-01 14:33:51 +08:00
|
|
|
};
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2022-12-01 14:33:51 +08:00
|
|
|
const Dropdown: CompoundedComponent = (props) => {
|
2023-03-30 14:55:34 +08:00
|
|
|
const {
|
|
|
|
menu,
|
|
|
|
arrow,
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
children,
|
|
|
|
trigger,
|
|
|
|
disabled,
|
|
|
|
dropdownRender,
|
|
|
|
getPopupContainer,
|
|
|
|
overlayClassName,
|
|
|
|
rootClassName,
|
|
|
|
open,
|
|
|
|
onOpenChange,
|
|
|
|
// Deprecated
|
|
|
|
visible,
|
|
|
|
onVisibleChange,
|
|
|
|
mouseEnterDelay = 0.15,
|
|
|
|
mouseLeaveDelay = 0.1,
|
|
|
|
autoAdjustOverflow = true,
|
|
|
|
placement = '',
|
|
|
|
overlay,
|
|
|
|
transitionName,
|
|
|
|
} = props;
|
2021-08-08 14:49:22 +08:00
|
|
|
const {
|
|
|
|
getPopupContainer: getContextPopupContainer,
|
|
|
|
getPrefixCls,
|
|
|
|
direction,
|
|
|
|
} = React.useContext(ConfigContext);
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2022-09-02 17:22:23 +08:00
|
|
|
// Warning for deprecated usage
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
[
|
|
|
|
['visible', 'open'],
|
|
|
|
['onVisibleChange', 'onOpenChange'],
|
|
|
|
].forEach(([deprecatedName, newName]) => {
|
|
|
|
warning(
|
|
|
|
!(deprecatedName in props),
|
|
|
|
'Dropdown',
|
|
|
|
`\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
|
|
|
|
);
|
|
|
|
});
|
2022-10-23 00:33:45 +08:00
|
|
|
|
|
|
|
warning(
|
|
|
|
!('overlay' in props),
|
|
|
|
'Dropdown',
|
|
|
|
'`overlay` is deprecated. Please use `menu` instead.',
|
|
|
|
);
|
2022-09-02 17:22:23 +08:00
|
|
|
}
|
|
|
|
|
2023-03-30 14:55:34 +08:00
|
|
|
const memoTransitionName = React.useMemo<string>(() => {
|
2021-02-08 17:09:13 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2023-03-30 14:55:34 +08:00
|
|
|
|
2018-01-13 17:25:08 +08:00
|
|
|
if (transitionName !== undefined) {
|
|
|
|
return transitionName;
|
|
|
|
}
|
2022-09-30 09:49:28 +08:00
|
|
|
if (placement.includes('top')) {
|
2021-02-08 17:09:13 +08:00
|
|
|
return `${rootPrefixCls}-slide-down`;
|
2017-02-09 15:44:33 +08:00
|
|
|
}
|
2021-02-08 17:09:13 +08:00
|
|
|
return `${rootPrefixCls}-slide-up`;
|
2023-03-30 14:55:34 +08:00
|
|
|
}, [getPrefixCls, placement, transitionName]);
|
2017-02-09 15:44:33 +08:00
|
|
|
|
2023-03-30 14:55:34 +08:00
|
|
|
const memoPlacement = React.useMemo<string>(() => {
|
2022-01-13 13:34:34 +08:00
|
|
|
if (!placement) {
|
2022-09-30 09:49:28 +08:00
|
|
|
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
|
2022-01-13 13:34:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (placement.includes('Center')) {
|
|
|
|
const newPlacement = placement.slice(0, placement.indexOf('Center'));
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2022-01-13 13:34:34 +08:00
|
|
|
!placement.includes('Center'),
|
|
|
|
'Dropdown',
|
|
|
|
`You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
|
|
|
|
);
|
|
|
|
return newPlacement;
|
2020-01-02 19:10:16 +08:00
|
|
|
}
|
2022-01-13 13:34:34 +08:00
|
|
|
|
|
|
|
return placement;
|
2023-03-30 14:55:34 +08:00
|
|
|
}, [placement, direction]);
|
2020-01-02 19:10:16 +08:00
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
[
|
|
|
|
['visible', 'open'],
|
|
|
|
['onVisibleChange', 'onOpenChange'],
|
|
|
|
].forEach(([deprecatedName, newName]) => {
|
|
|
|
warning(
|
|
|
|
!(deprecatedName in props),
|
|
|
|
'Dropdown',
|
|
|
|
`\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-05-17 00:51:05 +08:00
|
|
|
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
|
2022-04-25 10:54:00 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
|
2023-01-19 11:21:05 +08:00
|
|
|
const { token } = theme.useToken();
|
|
|
|
|
2020-05-17 00:51:05 +08:00
|
|
|
const child = React.Children.only(children) as React.ReactElement<any>;
|
|
|
|
|
|
|
|
const dropdownTrigger = cloneElement(child, {
|
2020-09-06 13:07:39 +08:00
|
|
|
className: classNames(
|
|
|
|
`${prefixCls}-trigger`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
child.props.className,
|
|
|
|
),
|
2020-05-17 00:51:05 +08:00
|
|
|
disabled,
|
|
|
|
});
|
|
|
|
|
|
|
|
const triggerActions = disabled ? [] : trigger;
|
2022-09-30 09:49:28 +08:00
|
|
|
let alignPoint: boolean;
|
|
|
|
if (triggerActions && triggerActions.includes('contextMenu')) {
|
2020-05-17 00:51:05 +08:00
|
|
|
alignPoint = true;
|
|
|
|
}
|
2020-01-02 19:10:16 +08:00
|
|
|
|
2022-08-24 17:46:44 +08:00
|
|
|
// =========================== Open ============================
|
|
|
|
const [mergedOpen, setOpen] = useMergedState(false, {
|
2022-09-06 21:46:49 +08:00
|
|
|
value: open ?? visible,
|
2022-06-21 15:48:29 +08:00
|
|
|
});
|
|
|
|
|
2022-08-24 17:46:44 +08:00
|
|
|
const onInnerOpenChange = useEvent((nextOpen: boolean) => {
|
|
|
|
onOpenChange?.(nextOpen);
|
2022-09-06 21:46:49 +08:00
|
|
|
onVisibleChange?.(nextOpen);
|
2022-08-24 17:46:44 +08:00
|
|
|
setOpen(nextOpen);
|
2022-06-21 15:48:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// =========================== Overlay ============================
|
2023-01-20 11:03:50 +08:00
|
|
|
const overlayClassNameCustomized = classNames(overlayClassName, rootClassName, hashId, {
|
2022-06-21 15:48:29 +08:00
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
});
|
|
|
|
|
2022-01-13 13:34:34 +08:00
|
|
|
const builtinPlacements = getPlacements({
|
|
|
|
arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
|
2022-12-22 17:56:02 +08:00
|
|
|
autoAdjustOverflow,
|
2023-01-19 11:21:05 +08:00
|
|
|
offset: token.marginXXS,
|
|
|
|
arrowWidth: arrow ? token.sizePopupArrow : 0,
|
2023-02-15 10:21:28 +08:00
|
|
|
borderRadius: token.borderRadius,
|
2022-01-13 13:34:34 +08:00
|
|
|
});
|
|
|
|
|
2022-06-21 15:48:29 +08:00
|
|
|
const onMenuClick = React.useCallback(() => {
|
2022-08-24 17:46:44 +08:00
|
|
|
setOpen(false);
|
2022-06-21 15:48:29 +08:00
|
|
|
}, []);
|
2022-05-30 19:06:51 +08:00
|
|
|
|
|
|
|
const renderOverlay = () => {
|
|
|
|
// rc-dropdown already can process the function of overlay, but we have check logic here.
|
|
|
|
// So we need render the element to check and pass back to rc-dropdown.
|
|
|
|
|
2022-09-30 09:49:28 +08:00
|
|
|
let overlayNode: React.ReactNode;
|
2022-10-23 00:33:45 +08:00
|
|
|
if (menu?.items) {
|
|
|
|
overlayNode = <Menu {...menu} />;
|
|
|
|
} else if (typeof overlay === 'function') {
|
2022-11-09 17:36:49 +08:00
|
|
|
overlayNode = overlay();
|
2022-05-30 19:06:51 +08:00
|
|
|
} else {
|
|
|
|
overlayNode = overlay;
|
|
|
|
}
|
2022-10-23 00:33:45 +08:00
|
|
|
if (dropdownRender) {
|
|
|
|
overlayNode = dropdownRender(overlayNode);
|
|
|
|
}
|
2022-05-30 19:06:51 +08:00
|
|
|
overlayNode = React.Children.only(
|
|
|
|
typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2022-06-17 14:37:18 +08:00
|
|
|
<OverrideProvider
|
|
|
|
prefixCls={`${prefixCls}-menu`}
|
|
|
|
expandIcon={
|
|
|
|
<span className={`${prefixCls}-menu-submenu-arrow`}>
|
|
|
|
<RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
mode="vertical"
|
|
|
|
selectable={false}
|
2022-06-21 15:48:29 +08:00
|
|
|
onClick={onMenuClick}
|
2022-06-17 14:37:18 +08:00
|
|
|
validator={({ mode }) => {
|
|
|
|
// Warning if use other mode
|
|
|
|
warning(
|
|
|
|
!mode || mode === 'vertical',
|
|
|
|
'Dropdown',
|
|
|
|
`mode="${mode}" is not supported for Dropdown's Menu.`,
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
>
|
2022-11-22 22:52:40 +08:00
|
|
|
<NoCompactStyle>{overlayNode}</NoCompactStyle>
|
2022-06-17 14:37:18 +08:00
|
|
|
</OverrideProvider>
|
2022-05-30 19:06:51 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-06-21 15:48:29 +08:00
|
|
|
// ============================ Render ============================
|
2022-04-25 10:54:00 +08:00
|
|
|
return wrapSSR(
|
2020-05-17 00:51:05 +08:00
|
|
|
<RcDropdown
|
2022-09-30 09:49:28 +08:00
|
|
|
alignPoint={alignPoint!}
|
2023-01-20 11:03:50 +08:00
|
|
|
{...omit(props, ['rootClassName'])}
|
2022-09-30 09:49:28 +08:00
|
|
|
mouseEnterDelay={mouseEnterDelay}
|
|
|
|
mouseLeaveDelay={mouseLeaveDelay}
|
2022-08-24 17:46:44 +08:00
|
|
|
visible={mergedOpen}
|
2022-01-13 13:34:34 +08:00
|
|
|
builtinPlacements={builtinPlacements}
|
|
|
|
arrow={!!arrow}
|
2020-05-17 00:51:05 +08:00
|
|
|
overlayClassName={overlayClassNameCustomized}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
2023-03-30 14:55:34 +08:00
|
|
|
transitionName={memoTransitionName}
|
2020-05-17 00:51:05 +08:00
|
|
|
trigger={triggerActions}
|
2022-05-30 19:06:51 +08:00
|
|
|
overlay={renderOverlay}
|
2023-03-30 14:55:34 +08:00
|
|
|
placement={memoPlacement}
|
2022-08-24 17:46:44 +08:00
|
|
|
onVisibleChange={onInnerOpenChange}
|
2020-05-17 00:51:05 +08:00
|
|
|
>
|
|
|
|
{dropdownTrigger}
|
2022-04-25 10:54:00 +08:00
|
|
|
</RcDropdown>,
|
2020-05-17 00:51:05 +08:00
|
|
|
);
|
|
|
|
};
|
2018-06-12 22:07:02 +08:00
|
|
|
|
2020-05-17 00:51:05 +08:00
|
|
|
Dropdown.Button = DropdownButton;
|
2018-11-26 12:06:42 +08:00
|
|
|
|
2022-07-11 15:57:05 +08:00
|
|
|
// We don't care debug panel
|
2022-11-13 14:33:07 +08:00
|
|
|
const PurePanel = genPurePanel(Dropdown, 'dropdown', (prefixCls) => prefixCls);
|
2022-07-11 15:57:05 +08:00
|
|
|
|
|
|
|
/* istanbul ignore next */
|
|
|
|
const WrapPurePanel = (props: DropdownProps) => (
|
|
|
|
<PurePanel {...props}>
|
|
|
|
<span />
|
|
|
|
</PurePanel>
|
|
|
|
);
|
|
|
|
|
|
|
|
Dropdown._InternalPanelDoNotUseOrYouWillBeFired = WrapPurePanel;
|
|
|
|
|
2023-01-08 21:30:41 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Dropdown.displayName = 'Dropdown';
|
|
|
|
}
|
|
|
|
|
2020-05-17 00:51:05 +08:00
|
|
|
export default Dropdown;
|