mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

refactor: Fix Dropdown nesting menu injection logic (#35810)

Browse Source 
* refactor: Dependency Inversion

* test: update snapshot

* test: Update snapshot

* test: more

* fix: table dropdown logic

* fix: menu lint
This commit is contained in:
二货机器人 2022-05-30 19:06:51 +08:00 committed by GitHub
parent 70aa243986
commit 99c16aa8d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 294 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -138,7 +138,6 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

1
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1643,7 +1643,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

2
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -826,7 +826,6 @@ Array [
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -980,7 +979,6 @@ Array [
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"

182
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -26835,9 +26835,29 @@ exports[`ConfigProvider components Table configProvider 1`] = `
>
Submenu
</span>
<i
class="config-dropdown-menu-submenu-arrow"
/>
<span
class="config-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right config-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -27116,9 +27136,29 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
>
Submenu
</span>
<i
class="config-dropdown-menu-submenu-arrow"
/>
<span
class="config-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right config-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -27398,9 +27438,29 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
>
Submenu
</span>
<i
class="config-dropdown-menu-submenu-arrow"
/>
<span
class="config-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right config-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -27679,9 +27739,29 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
>
Submenu
</span>
<i
class="config-dropdown-menu-submenu-arrow"
/>
<span
class="config-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right config-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -27960,9 +28040,29 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
>
Submenu
</span>
<i
class="ant-dropdown-menu-submenu-arrow"
/>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -28241,9 +28341,29 @@ exports[`ConfigProvider components Table normal 1`] = `
>
Submenu
</span>
<i
class="ant-dropdown-menu-submenu-arrow"
/>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
@ -28522,9 +28642,29 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
>
Submenu
</span>
<i
class="ant-dropdown-menu-submenu-arrow"
/>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>

35
components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -20,7 +20,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -234,7 +233,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -448,7 +446,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -663,7 +660,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -877,7 +873,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1091,7 +1086,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1310,7 +1304,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1524,7 +1517,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1738,7 +1730,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1953,7 +1944,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2167,7 +2157,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2381,7 +2370,6 @@ Array [
/>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2626,7 +2614,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2914,7 +2901,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -3146,7 +3132,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -3429,7 +3414,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -3714,7 +3698,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4025,7 +4008,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4311,7 +4293,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4596,7 +4577,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4823,7 +4803,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5092,7 +5071,6 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5231,7 +5209,6 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5347,7 +5324,6 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5462,7 +5438,6 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5581,7 +5556,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -6724,7 +6698,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -6936,7 +6909,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -7152,7 +7124,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -7368,7 +7339,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -7593,7 +7563,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -7809,7 +7778,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -8025,7 +7993,6 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -8273,7 +8240,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -8785,7 +8751,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

94
components/dropdown/dropdown.tsx
View File

@ -8,6 +8,8 @@ import warning from '../_util/warning';
import { tuple } from '../_util/type';
import { cloneElement } from '../_util/reactNode';
import getPlacements from '../_util/placements';
import OverrideContext from '../menu/OverrideContext';
import type { OverrideContextProps } from '../menu/OverrideContext';
const Placements = tuple(
'topLeft',
@ -87,54 +89,6 @@ const Dropdown: DropdownInterface = props => {
return `${rootPrefixCls}-slide-up`;
};
const renderOverlay = (prefixCls: string) => {
// 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.
const { overlay } = props;
let overlayNode;
if (typeof overlay === 'function') {
overlayNode = (overlay as OverlayFunc)();
} else {
overlayNode = overlay;
}
overlayNode = React.Children.only(
typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
);
const overlayProps = overlayNode.props;
// Warning if use other mode
warning(
!overlayProps.mode || overlayProps.mode === 'vertical',
'Dropdown',
`mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,
);
// menu cannot be selectable in dropdown defaultly
const { selectable = false, expandIcon } = overlayProps;
const overlayNodeExpandIcon =
typeof expandIcon !== 'undefined' && React.isValidElement(expandIcon) ? (
expandIcon
) : (
<span className={`${prefixCls}-menu-submenu-arrow`}>
<RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
</span>
);
const fixedModeOverlay =
typeof overlayNode.type === 'string'
? overlayNode
: cloneElement(overlayNode, {
mode: 'vertical',
selectable,
expandIcon: overlayNodeExpandIcon,
});
return fixedModeOverlay as React.ReactElement;
};
const getPlacement = () => {
const { placement } = props;
if (!placement) {
@ -193,6 +147,48 @@ const Dropdown: DropdownInterface = props => {
autoAdjustOverflow: true,
});
const overlayContext = React.useMemo<OverrideContextProps>(
() => ({
prefixCls: `${prefixCls}-menu`,
expandIcon: (
<span className={`${prefixCls}-menu-submenu-arrow`}>
<RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
</span>
),
mode: 'vertical',
selectable: false,
validator: ({ mode }) => {
// Warning if use other mode
warning(
!mode || mode === 'vertical',
'Dropdown',
`mode="${mode}" is not supported for Dropdown's Menu.`,
);
},
}),
[prefixCls],
);
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.
const { overlay } = props;
let overlayNode;
if (typeof overlay === 'function') {
overlayNode = (overlay as OverlayFunc)();
} else {
overlayNode = overlay;
}
overlayNode = React.Children.only(
typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
);
return (
<OverrideContext.Provider value={overlayContext}>{overlayNode}</OverrideContext.Provider>
);
};
return (
<RcDropdown
alignPoint={alignPoint}
@ -204,7 +200,7 @@ const Dropdown: DropdownInterface = props => {
getPopupContainer={getPopupContainer || getContextPopupContainer}
transitionName={getTransitionName()}
trigger={triggerActions}
overlay={() => renderOverlay(prefixCls)}
overlay={renderOverlay}
placement={getPlacement()}
>
{dropdownTrigger}

1
components/dropdown/style/index.tsx
View File

@ -3,3 +3,4 @@ import './index.less';
// style dependencies
import '../../button/style';
import '../../menu/style';

2
components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -523,7 +523,6 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -811,7 +810,6 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

16
components/menu/OverrideContext.ts Normal file
View File

@ -0,0 +1,16 @@
import * as React from 'react';
import type { MenuProps } from '.';
// Used for Dropdown only
export interface OverrideContextProps {
prefixCls?: string;
expandIcon?: React.ReactNode;
mode?: MenuProps['mode'];
selectable?: boolean;
validator?: (menuProps: Pick<MenuProps, 'mode'>) => void;
}
/** @private Internal Usage. Only used for Dropdown component. Do not use this in your production. */
const OverrideContext = React.createContext<OverrideContextProps | null>(null);
export default OverrideContext;

70
components/menu/index.tsx
View File

@ -17,6 +17,7 @@ import MenuContext, { MenuTheme } from './MenuContext';
import MenuDivider from './MenuDivider';
import type { ItemType } from './hooks/useItems';
import useItems from './hooks/useItems';
import OverrideContext from './OverrideContext';
export { MenuDividerProps } from './MenuDivider';
@ -44,6 +45,7 @@ type InternalMenuProps = MenuProps &
};
const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
const override = React.useContext(OverrideContext) || {};
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
@ -58,6 +60,8 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
siderCollapsed,
items,
children,
mode,
selectable,
...restProps
} = props;
@ -68,7 +72,7 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
// ======================== Warning ==========================
warning(
!('inlineCollapsed' in props && props.mode !== 'inline'),
!('inlineCollapsed' in props && mode !== 'inline'),
'Menu',
'`inlineCollapsed` should only be used when `mode` is inline.',
);
@ -85,6 +89,14 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
'`children` will be removed in next major version. Please use `items` instead.',
);
override.validator?.({ mode });
// ========================== Mode ===========================
const mergedMode = override.mode || mode;
// ======================= Selectable ========================
const mergedSelectable = selectable ?? override.selectable;
// ======================== Collapsed ========================
// Inline Collapsed
const mergedInlineCollapsed = React.useMemo(() => {
@ -100,9 +112,19 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
other: { motionName: `${rootPrefixCls}-zoom-big` },
};
const prefixCls = getPrefixCls('menu', customizePrefixCls);
const prefixCls = getPrefixCls('menu', customizePrefixCls || override.prefixCls);
const menuClassName = classNames(`${prefixCls}-${theme}`, className);
// ====================== Expand Icon ========================
let mergedExpandIcon: MenuProps[`expandIcon`];
if (typeof expandIcon === 'function') {
mergedExpandIcon = expandIcon;
} else {
mergedExpandIcon = cloneElement(expandIcon || override.expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
});
}
// ======================== Context ==========================
const contextValue = React.useMemo(
() => ({
@ -118,29 +140,27 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
// ========================= Render ==========================
return (
<MenuContext.Provider value={contextValue}>
<RcMenu
getPopupContainer={getPopupContainer}
overflowedIndicator={<EllipsisOutlined />}
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
{...passedProps}
inlineCollapsed={mergedInlineCollapsed}
className={menuClassName}
prefixCls={prefixCls}
direction={direction}
defaultMotions={defaultMotions}
expandIcon={
typeof expandIcon === 'function'
? expandIcon
: cloneElement(expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
})
}
ref={ref}
>
{mergedChildren}
</RcMenu>
</MenuContext.Provider>
<OverrideContext.Provider value={null}>
<MenuContext.Provider value={contextValue}>
<RcMenu
getPopupContainer={getPopupContainer}
overflowedIndicator={<EllipsisOutlined />}
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
mode={mergedMode}
selectable={mergedSelectable}
{...passedProps}
inlineCollapsed={mergedInlineCollapsed}
className={menuClassName}
prefixCls={prefixCls}
direction={direction}
defaultMotions={defaultMotions}
expandIcon={mergedExpandIcon}
ref={ref}
>
{mergedChildren}
</RcMenu>
</MenuContext.Provider>
</OverrideContext.Provider>
);
});

2
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -737,7 +737,6 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1613,7 +1612,6 @@ exports[`renders ./components/page-header/demo/responsive.md extend context corr
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"

2
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -1067,7 +1067,6 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1424,7 +1423,6 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

27
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -13481,9 +13481,29 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
>
Submenu
</span>
<i
class="ant-dropdown-menu-submenu-arrow"
/>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
<div>
<div
@ -19881,7 +19901,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md extend context
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

1
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -385,6 +385,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
locale={locale}
/>
<Menu
selectable
multiple={filterMultiple}
prefixCls={`${dropdownPrefixCls}-menu`}
className={dropdownMenuClass}

18
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -98,7 +98,6 @@ exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] =
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -243,7 +242,6 @@ exports[`renders ./components/tabs/demo/card.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -391,7 +389,6 @@ exports[`renders ./components/tabs/demo/card-top.md extend context correctly 1`]
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -545,7 +542,6 @@ exports[`renders ./components/tabs/demo/centered.md extend context correctly 1`]
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -743,7 +739,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context cor
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -885,7 +880,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md extend context correct
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -1048,7 +1042,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -1193,7 +1186,6 @@ exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`]
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -1419,7 +1411,6 @@ exports[`renders ./components/tabs/demo/editable-card.md extend context correctl
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -1594,7 +1585,6 @@ Array [
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -1816,7 +1806,6 @@ Array [
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -2004,7 +1993,6 @@ exports[`renders ./components/tabs/demo/icon.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -2777,7 +2765,6 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -3105,7 +3092,6 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -3478,7 +3464,6 @@ Array [
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -3689,7 +3674,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -3831,7 +3815,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"
@ -4376,7 +4359,6 @@ exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] =
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-dropdown-inject="true"
data-menu-list="true"
id="null-more-popup"
role="listbox"

20
components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -52,7 +52,6 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -426,7 +425,6 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -746,7 +744,6 @@ exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1265,7 +1262,6 @@ exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1688,7 +1684,6 @@ exports[`renders ./components/transfer/demo/custom-item.md extend context correc
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -1977,7 +1972,6 @@ exports[`renders ./components/transfer/demo/custom-item.md extend context correc
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2218,7 +2212,6 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend c
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2635,7 +2628,6 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend c
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -2891,7 +2883,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -3219,7 +3210,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -3534,7 +3524,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4095,7 +4084,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4475,7 +4463,6 @@ exports[`renders ./components/transfer/demo/search.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -4829,7 +4816,6 @@ exports[`renders ./components/transfer/demo/search.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5143,7 +5129,6 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5431,7 +5416,6 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -5673,7 +5657,6 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -6027,7 +6010,6 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -6337,7 +6319,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"
@ -7184,7 +7165,6 @@ Array [
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-dropdown-inject="true"
data-menu-list="true"
role="menu"
tabindex="0"

4
package.json
View File

@ -128,7 +128,7 @@
"rc-collapse": "~3.3.0",
"rc-dialog": "~8.8.1",
"rc-drawer": "~4.4.2",
"rc-dropdown": "~3.6.0",
"rc-dropdown": "~4.0.0",
"rc-field-form": "~1.26.1",
"rc-image": "~5.6.0",
"rc-input": "~0.0.1-alpha.5",
@ -148,7 +148,7 @@
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.24.0",
"rc-tabs": "~11.14.0",
"rc-tabs": "~11.15.0",
"rc-textarea": "~0.3.0",
"rc-tooltip": "~5.1.1",
"rc-tree": "~5.5.0",