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

chore: next merge feature

Browse Source
This commit is contained in:
zombiej 2022-05-30 19:11:21 +08:00
commit 300dddebbb
16 changed files with 294 additions and 185 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

@ -1675,7 +1675,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>
@ -27115,9 +27135,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>
@ -27396,9 +27436,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>
@ -27676,9 +27736,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>
@ -27956,9 +28036,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>
@ -28236,9 +28336,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>
@ -28516,9 +28636,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';
import useStyle from './style';
const Placements = tuple(
@ -88,54 +90,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) {
@ -196,6 +150,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 wrapSSR(
<RcDropdown
alignPoint={alignPoint}
@ -207,7 +203,7 @@ const Dropdown: DropdownInterface = props => {
getPopupContainer={getPopupContainer || getContextPopupContainer}
transitionName={getTransitionName()}
trigger={triggerActions}
overlay={() => renderOverlay(prefixCls)}
overlay={renderOverlay}
placement={getPlacement()}
>
{dropdownTrigger}

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

@ -520,7 +520,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"
@ -807,7 +806,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;

72
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';
import useStyle from './style';
export { MenuDividerProps } from './MenuDivider';
@ -45,6 +46,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();
@ -60,6 +62,8 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
items,
children,
rootClassName,
mode,
selectable,
...restProps
} = props;
@ -71,7 +75,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.',
);
@ -88,6 +92,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(() => {
@ -103,10 +115,20 @@ 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 [wrapSSR, hashId] = useStyle(prefixCls, !injectFromDropdown);
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(
() => ({
@ -122,30 +144,28 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
// ========================= Render ==========================
return wrapSSR(
<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}
rootClassName={classNames(rootClassName, hashId)}
>
{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}
rootClassName={classNames(rootClassName, hashId)}
>
{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

@ -13480,9 +13480,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
@ -19880,7 +19900,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"
@ -425,7 +424,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"
@ -744,7 +742,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"
@ -1263,7 +1260,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"
@ -1686,7 +1682,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"
@ -1974,7 +1969,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"
@ -2214,7 +2208,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"
@ -2631,7 +2624,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"
@ -2887,7 +2879,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"
@ -3214,7 +3205,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"
@ -3528,7 +3518,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"
@ -4089,7 +4078,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"
@ -4469,7 +4457,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"
@ -4822,7 +4809,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"
@ -5135,7 +5121,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"
@ -5422,7 +5407,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"
@ -5663,7 +5647,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"
@ -6016,7 +5999,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"
@ -6325,7 +6307,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"
@ -7172,7 +7153,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

@ -130,7 +130,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",
@ -150,7 +150,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",