mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
refactor: menu token rename (#42848)
* refactor: menu token rename * chore: update snapshot * chore: UPDATE TEST CASE * fix: fix gap as 4px * fix: popup transform origin
This commit is contained in:
MadCcc
GitHub
parent
fca21af950
commit
cdf9b4660f
@ -7,7 +7,7 @@ import Menu from '../../menu';
|
||||
const { Header } = Layout;
|
||||
|
||||
describe('Layout.Token', () => {
|
||||
it('theme should work', () => {
|
||||
it('legacy theme should work', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
@ -16,6 +16,7 @@ describe('Layout.Token', () => {
|
||||
colorBgHeader: '#FF0000',
|
||||
},
|
||||
Menu: {
|
||||
// keep this deprecated one
|
||||
colorItemBg: '#00FF00',
|
||||
},
|
||||
},
|
||||
@ -38,6 +39,44 @@ describe('Layout.Token', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('.ant-layout-header')).toHaveStyle({
|
||||
backgroundColor: '#FF0000',
|
||||
});
|
||||
expect(container.querySelector('.ant-menu')).toHaveStyle({
|
||||
backgroundColor: '#00FF00',
|
||||
});
|
||||
});
|
||||
it('theme should work', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Layout: {
|
||||
colorBgHeader: '#FF0000',
|
||||
},
|
||||
Menu: {
|
||||
itemBg: '#00FF00',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Header>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['2']}
|
||||
items={new Array(15).fill(null).map((_, index) => {
|
||||
const key = index + 1;
|
||||
return {
|
||||
key,
|
||||
label: `nav ${key}`,
|
||||
};
|
||||
})}
|
||||
/>
|
||||
</Header>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('.ant-layout-header')).toHaveStyle({
|
||||
backgroundColor: '#FF0000',
|
||||
});
|
||||
|
||||
@ -1,5 +1,365 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/menu/demo/component-token.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
|
||||
data-menu-id="rc-menu-uuid-test-mail"
|
||||
role="menuitem"
|
||||
style="opacity: 1; order: 0;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
|
||||
role="menuitem"
|
||||
style="opacity: 1; order: 1;"
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation Two
|
||||
</span>
|
||||
</li>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
|
||||
role="none"
|
||||
style="opacity: 1; order: 2;"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-SubMenu-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation Three - Submenu
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="opacity: 1; order: 3;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://ant.design"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Navigation Four - Link
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
|
||||
role="none"
|
||||
style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-rc-menu-more-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-rc-menu-more"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<ul
|
||||
class="ant-menu ant-menu-sub ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
id="rc-menu-uuid-test-rc-menu-more-popup"
|
||||
role="menu"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>,
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
|
||||
@ -1,5 +1,179 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
style="opacity:1;order:0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
|
||||
role="menuitem"
|
||||
style="opacity:1;order:1"
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation Two
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
|
||||
role="none"
|
||||
style="opacity:1;order:2"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
Navigation Three - Submenu
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="opacity:1;order:3"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://ant.design"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Navigation Four - Link
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
|
||||
role="none"
|
||||
style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>,
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
|
||||
7
components/menu/demo/component-token.md
Executable file
7
components/menu/demo/component-token.md
Executable file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
组件 Token debug。
|
||||
|
||||
## en-US
|
||||
|
||||
Debug Component Token.
|
||||
87
components/menu/demo/component-token.tsx
Normal file
87
components/menu/demo/component-token.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { ConfigProvider, Menu } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: 'Navigation One',
|
||||
key: 'mail',
|
||||
icon: <MailOutlined />,
|
||||
},
|
||||
{
|
||||
label: 'Navigation Two',
|
||||
key: 'app',
|
||||
icon: <AppstoreOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three - Submenu',
|
||||
key: 'SubMenu',
|
||||
icon: <SettingOutlined />,
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
label: 'Item 1',
|
||||
children: [
|
||||
{
|
||||
label: 'Option 1',
|
||||
key: 'setting:1',
|
||||
},
|
||||
{
|
||||
label: 'Option 2',
|
||||
key: 'setting:2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
label: 'Item 2',
|
||||
children: [
|
||||
{
|
||||
label: 'Option 3',
|
||||
key: 'setting:3',
|
||||
},
|
||||
{
|
||||
label: 'Option 4',
|
||||
key: 'setting:4',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
||||
Navigation Four - Link
|
||||
</a>
|
||||
),
|
||||
key: 'alipay',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [current, setCurrent] = useState('mail');
|
||||
|
||||
const onClick: MenuProps['onClick'] = (e) => {
|
||||
console.log('click ', e);
|
||||
setCurrent(e.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Menu: {
|
||||
horizontalItemBorderRadius: 6,
|
||||
horizontalItemHoverBg: '#f5f5f5',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -64,14 +64,14 @@ const App: React.FC = () => {
|
||||
theme={{
|
||||
components: {
|
||||
Menu: {
|
||||
radiusItem: 0,
|
||||
radiusSubMenuItem: 0,
|
||||
colorItemTextHover: '#1890ff',
|
||||
colorItemTextSelected: '#1890ff',
|
||||
colorItemBgSelected: '#e6f7ff',
|
||||
colorActiveBarWidth: 3,
|
||||
itemBorderRadius: 0,
|
||||
subMenuItemBorderRadius: 0,
|
||||
itemHoverColor: '#1890ff',
|
||||
itemSelectedColor: '#1890ff',
|
||||
itemSelectedBg: '#e6f7ff',
|
||||
activeBarWidth: 3,
|
||||
itemMarginInline: 0,
|
||||
colorItemBgHover: 'transparent',
|
||||
itemHoverBg: 'transparent',
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
||||
@ -33,6 +33,7 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
<code src="./demo/switch-mode.tsx">Switch the menu type</code>
|
||||
<code src="./demo/style-debug.tsx" debug>Style debug</code>
|
||||
<code src="./demo/menu-v4.tsx" debug>Menu v4</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
|
||||
<code src="./demo/switch-mode.tsx">切换菜单类型</code>
|
||||
<code src="./demo/style-debug.tsx" debug>Style debug</code>
|
||||
<code src="./demo/menu-v4.tsx" debug>v4 版本 Menu</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -15,46 +15,109 @@ export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
|
||||
// Group
|
||||
/** @deprecated Use `groupTitleColor` instead */
|
||||
colorGroupTitle: string;
|
||||
groupTitleColor: string;
|
||||
|
||||
// radius
|
||||
/** @deprecated Use `itemBorderRadius` instead */
|
||||
radiusItem: number;
|
||||
itemBorderRadius: number;
|
||||
|
||||
/** @deprecated Use `subMenuItemBorderRadius` instead */
|
||||
radiusSubMenuItem: number;
|
||||
subMenuItemBorderRadius: number;
|
||||
|
||||
// Item Text
|
||||
// > Default
|
||||
/** @deprecated Use `itemColor` instead */
|
||||
colorItemText: string;
|
||||
itemColor: string;
|
||||
|
||||
/** @deprecated Use `itemHoverColor` instead */
|
||||
colorItemTextHover: string;
|
||||
itemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemHoverColor` instead */
|
||||
colorItemTextHoverHorizontal: string;
|
||||
horizontalItemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `itemSelectedColor` instead */
|
||||
colorItemTextSelected: string;
|
||||
itemSelectedColor: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemSelectedColor` instead */
|
||||
colorItemTextSelectedHorizontal: string;
|
||||
horizontalItemSelectedColor: string;
|
||||
|
||||
// > Disabled
|
||||
/** @deprecated Use `itemDisabledColor` instead */
|
||||
colorItemTextDisabled: string;
|
||||
itemDisabledColor: string;
|
||||
|
||||
// > Danger
|
||||
/** @deprecated Use `dangerItemColor` instead */
|
||||
colorDangerItemText: string;
|
||||
dangerItemColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemHoverColor` instead */
|
||||
colorDangerItemTextHover: string;
|
||||
dangerItemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemSelectedColor` instead */
|
||||
colorDangerItemTextSelected: string;
|
||||
dangerItemSelectedColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemActiveBg` instead */
|
||||
colorDangerItemBgActive: string;
|
||||
dangerItemActiveBg: string;
|
||||
|
||||
/** @deprecated Use `dangerItemSelectedBg` instead */
|
||||
colorDangerItemBgSelected: string;
|
||||
dangerItemSelectedBg: string;
|
||||
|
||||
// Item Bg
|
||||
/** @deprecated Use `itemBg` instead */
|
||||
colorItemBg: string;
|
||||
itemBg: string;
|
||||
|
||||
/** @deprecated Use `itemHoverBg` instead */
|
||||
colorItemBgHover: string;
|
||||
itemHoverBg: string;
|
||||
|
||||
/** @deprecated Use `subMenuItemBg` instead */
|
||||
colorSubItemBg: string;
|
||||
subMenuItemBg: string;
|
||||
|
||||
// > Default
|
||||
/** @deprecated Use `itemActiveBg` instead */
|
||||
colorItemBgActive: string;
|
||||
itemActiveBg: string;
|
||||
|
||||
/** @deprecated Use `itemSelectedBg` instead */
|
||||
colorItemBgSelected: string;
|
||||
itemSelectedBg: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemSelectedBg` instead */
|
||||
colorItemBgSelectedHorizontal: string;
|
||||
horizontalItemSelectedBg: string;
|
||||
|
||||
// Ink Bar
|
||||
/** @deprecated Use `activeBarWidth` instead */
|
||||
colorActiveBarWidth: number;
|
||||
activeBarWidth: number;
|
||||
|
||||
/** @deprecated Use `activeBarHeight` instead */
|
||||
colorActiveBarHeight: number;
|
||||
activeBarHeight: number;
|
||||
|
||||
/** @deprecated Use `activeBarBorderWidth` instead */
|
||||
colorActiveBarBorderSize: number;
|
||||
activeBarBorderWidth: number;
|
||||
|
||||
itemMarginInline: number;
|
||||
horizontalItemHoverBg: string;
|
||||
horizontalItemBorderRadius: number;
|
||||
}
|
||||
|
||||
export interface MenuToken extends FullToken<'Menu'> {
|
||||
@ -212,7 +275,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
lineWidth,
|
||||
zIndexPopup,
|
||||
borderRadiusLG,
|
||||
radiusSubMenuItem,
|
||||
subMenuItemBorderRadius,
|
||||
menuArrowSize,
|
||||
menuArrowOffset,
|
||||
lineType,
|
||||
@ -265,7 +328,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: {
|
||||
borderRadius: token.radiusItem,
|
||||
borderRadius: token.itemBorderRadius,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-group-title`]: {
|
||||
@ -396,6 +459,13 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
transformOrigin: '0 100%',
|
||||
},
|
||||
|
||||
[`
|
||||
&-placement-bottomLeft,
|
||||
&-placement-rightTop,
|
||||
`]: {
|
||||
transformOrigin: '0 0',
|
||||
},
|
||||
|
||||
[`
|
||||
&-placement-leftTop,
|
||||
&-placement-leftBottom
|
||||
@ -431,7 +501,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
...genSubMenuArrowStyle(token),
|
||||
|
||||
[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
||||
borderRadius: radiusSubMenuItem,
|
||||
borderRadius: subMenuItemBorderRadius,
|
||||
},
|
||||
|
||||
[`${componentCls}-submenu-title::after`]: {
|
||||
@ -519,33 +589,33 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
const menuDarkToken = mergeToken<MenuToken>(
|
||||
menuToken,
|
||||
{
|
||||
colorItemText: colorTextDark,
|
||||
colorItemTextHover: colorTextLightSolid,
|
||||
colorGroupTitle: colorTextDark,
|
||||
colorItemTextSelected: colorTextLightSolid,
|
||||
colorItemBg: '#001529',
|
||||
colorSubItemBg: '#000c17',
|
||||
colorItemBgActive: 'transparent',
|
||||
colorItemBgSelected: colorPrimary,
|
||||
colorActiveBarWidth: 0,
|
||||
colorActiveBarHeight: 0,
|
||||
colorActiveBarBorderSize: 0,
|
||||
itemColor: colorTextDark,
|
||||
itemHoverColor: colorTextLightSolid,
|
||||
groupTitleColor: colorTextDark,
|
||||
itemSelectedColor: colorTextLightSolid,
|
||||
itemBg: '#001529',
|
||||
subMenuItemBg: '#000c17',
|
||||
itemActiveBg: 'transparent',
|
||||
itemSelectedBg: colorPrimary,
|
||||
activeBarWidth: 0,
|
||||
activeBarHeight: 0,
|
||||
activeBarBorderWidth: 0,
|
||||
|
||||
// Disabled
|
||||
colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
||||
itemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
||||
|
||||
// Danger
|
||||
colorDangerItemText: colorError,
|
||||
colorDangerItemTextHover: colorErrorHover,
|
||||
colorDangerItemTextSelected: colorTextLightSolid,
|
||||
colorDangerItemBgActive: colorError,
|
||||
colorDangerItemBgSelected: colorError,
|
||||
dangerItemColor: colorError,
|
||||
dangerItemHoverColor: colorErrorHover,
|
||||
dangerItemSelectedColor: colorTextLightSolid,
|
||||
dangerItemActiveBg: colorError,
|
||||
dangerItemSelectedBg: colorError,
|
||||
|
||||
menuSubMenuBg: '#001529',
|
||||
|
||||
// Horizontal
|
||||
colorItemTextSelectedHorizontal: colorTextLightSolid,
|
||||
colorItemBgSelectedHorizontal: colorPrimary,
|
||||
horizontalItemSelectedColor: colorTextLightSolid,
|
||||
horizontalItemSelectedBg: colorPrimary,
|
||||
},
|
||||
{
|
||||
...overrideComponentToken,
|
||||
@ -598,36 +668,88 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
dropdownWidth: 160,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
radiusItem: token.borderRadiusLG,
|
||||
itemBorderRadius: token.borderRadiusLG,
|
||||
radiusSubMenuItem: token.borderRadiusSM,
|
||||
subMenuItemBorderRadius: token.borderRadiusSM,
|
||||
colorItemText: colorText,
|
||||
itemColor: colorText,
|
||||
colorItemTextHover: colorText,
|
||||
itemHoverColor: colorText,
|
||||
colorItemTextHoverHorizontal: colorPrimary,
|
||||
horizontalItemHoverColor: colorPrimary,
|
||||
colorGroupTitle: colorTextDescription,
|
||||
groupTitleColor: colorTextDescription,
|
||||
colorItemTextSelected: colorPrimary,
|
||||
itemSelectedColor: colorPrimary,
|
||||
colorItemTextSelectedHorizontal: colorPrimary,
|
||||
horizontalItemSelectedColor: colorPrimary,
|
||||
colorItemBg: colorBgContainer,
|
||||
itemBg: colorBgContainer,
|
||||
colorItemBgHover: colorBgTextHover,
|
||||
itemHoverBg: colorBgTextHover,
|
||||
colorItemBgActive: colorFillContent,
|
||||
itemActiveBg: colorFillContent,
|
||||
colorSubItemBg: colorFillAlter,
|
||||
subMenuItemBg: colorFillAlter,
|
||||
colorItemBgSelected: controlItemBgActive,
|
||||
itemSelectedBg: controlItemBgActive,
|
||||
colorItemBgSelectedHorizontal: 'transparent',
|
||||
horizontalItemSelectedBg: 'transparent',
|
||||
colorActiveBarWidth: 0,
|
||||
activeBarWidth: 0,
|
||||
colorActiveBarHeight: lineWidthBold,
|
||||
activeBarHeight: lineWidthBold,
|
||||
colorActiveBarBorderSize: lineWidth,
|
||||
activeBarBorderWidth: lineWidth,
|
||||
|
||||
// Disabled
|
||||
colorItemTextDisabled: colorTextDisabled,
|
||||
itemDisabledColor: colorTextDisabled,
|
||||
|
||||
// Danger
|
||||
colorDangerItemText: colorError,
|
||||
dangerItemColor: colorError,
|
||||
colorDangerItemTextHover: colorError,
|
||||
dangerItemHoverColor: colorError,
|
||||
colorDangerItemTextSelected: colorError,
|
||||
dangerItemSelectedColor: colorError,
|
||||
colorDangerItemBgActive: colorErrorBg,
|
||||
dangerItemActiveBg: colorErrorBg,
|
||||
colorDangerItemBgSelected: colorErrorBg,
|
||||
dangerItemSelectedBg: colorErrorBg,
|
||||
|
||||
itemMarginInline: token.marginXXS,
|
||||
|
||||
horizontalItemBorderRadius: 0,
|
||||
horizontalItemHoverBg: 'transparent',
|
||||
};
|
||||
},
|
||||
{
|
||||
deprecatedTokens: [
|
||||
['colorGroupTitle', 'groupTitleColor'],
|
||||
['radiusItem', 'itemBorderRadius'],
|
||||
['radiusSubMenuItem', 'subMenuItemBorderRadius'],
|
||||
['colorItemText', 'itemColor'],
|
||||
['colorItemTextHover', 'itemHoverColor'],
|
||||
['colorItemTextHoverHorizontal', 'horizontalItemHoverColor'],
|
||||
['colorItemTextSelected', 'itemSelectedColor'],
|
||||
['colorItemTextSelectedHorizontal', 'horizontalItemSelectedColor'],
|
||||
['colorItemTextDisabled', 'itemDisabledColor'],
|
||||
['colorDangerItemText', 'dangerItemColor'],
|
||||
['colorDangerItemTextHover', 'dangerItemHoverColor'],
|
||||
['colorDangerItemTextSelected', 'dangerItemSelectedColor'],
|
||||
['colorDangerItemBgActive', 'dangerItemActiveBg'],
|
||||
['colorDangerItemBgSelected', 'dangerItemSelectedBg'],
|
||||
['colorItemBg', 'itemBg'],
|
||||
['colorItemBgHover', 'itemHoverBg'],
|
||||
['colorSubItemBg', 'subMenuItemBg'],
|
||||
['colorItemBgActive', 'itemActiveBg'],
|
||||
['colorItemBgSelectedHorizontal', 'horizontalItemSelectedBg'],
|
||||
['colorActiveBarWidth', 'activeBarWidth'],
|
||||
['colorActiveBarHeight', 'activeBarHeight'],
|
||||
['colorActiveBarBorderSize', 'activeBarBorderWidth'],
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
return useOriginHook(prefixCls);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { genFocusOutline } from '../../style';
|
||||
import type { MenuToken } from '.';
|
||||
import { genFocusOutline } from '../../style';
|
||||
|
||||
const accessibilityFocus = (token: MenuToken) => ({
|
||||
...genFocusOutline(token),
|
||||
@ -9,46 +9,48 @@ const accessibilityFocus = (token: MenuToken) => ({
|
||||
const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation => {
|
||||
const {
|
||||
componentCls,
|
||||
colorItemText,
|
||||
colorItemTextSelected,
|
||||
colorGroupTitle,
|
||||
colorItemBg,
|
||||
colorSubItemBg,
|
||||
colorItemBgSelected,
|
||||
colorActiveBarHeight,
|
||||
colorActiveBarWidth,
|
||||
colorActiveBarBorderSize,
|
||||
itemColor,
|
||||
itemSelectedColor,
|
||||
groupTitleColor,
|
||||
itemBg,
|
||||
subMenuItemBg,
|
||||
itemSelectedBg,
|
||||
activeBarHeight,
|
||||
activeBarWidth,
|
||||
activeBarBorderWidth,
|
||||
motionDurationSlow,
|
||||
motionEaseInOut,
|
||||
motionEaseOut,
|
||||
menuItemPaddingInline,
|
||||
motionDurationMid,
|
||||
colorItemTextHover,
|
||||
itemHoverColor,
|
||||
lineType,
|
||||
colorSplit,
|
||||
|
||||
// Disabled
|
||||
colorItemTextDisabled,
|
||||
itemDisabledColor,
|
||||
|
||||
// Danger
|
||||
colorDangerItemText,
|
||||
colorDangerItemTextHover,
|
||||
colorDangerItemTextSelected,
|
||||
colorDangerItemBgActive,
|
||||
colorDangerItemBgSelected,
|
||||
dangerItemColor,
|
||||
dangerItemHoverColor,
|
||||
dangerItemSelectedColor,
|
||||
dangerItemActiveBg,
|
||||
dangerItemSelectedBg,
|
||||
|
||||
colorItemBgHover,
|
||||
itemHoverBg,
|
||||
menuSubMenuBg,
|
||||
|
||||
// Horizontal
|
||||
colorItemTextSelectedHorizontal,
|
||||
colorItemBgSelectedHorizontal,
|
||||
horizontalItemSelectedColor,
|
||||
horizontalItemSelectedBg,
|
||||
horizontalItemBorderRadius,
|
||||
horizontalItemHoverBg,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-${themeSuffix}, ${componentCls}-${themeSuffix} > ${componentCls}`]: {
|
||||
color: colorItemText,
|
||||
background: colorItemBg,
|
||||
color: itemColor,
|
||||
background: itemBg,
|
||||
|
||||
[`&${componentCls}-root:focus-visible`]: {
|
||||
...accessibilityFocus(token),
|
||||
@ -56,61 +58,61 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
|
||||
// ======================== Item ========================
|
||||
[`${componentCls}-item-group-title`]: {
|
||||
color: colorGroupTitle,
|
||||
color: groupTitleColor,
|
||||
},
|
||||
|
||||
[`${componentCls}-submenu-selected`]: {
|
||||
[`> ${componentCls}-submenu-title`]: {
|
||||
color: colorItemTextSelected,
|
||||
color: itemSelectedColor,
|
||||
},
|
||||
},
|
||||
|
||||
// Disabled
|
||||
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
||||
color: `${colorItemTextDisabled} !important`,
|
||||
color: `${itemDisabledColor} !important`,
|
||||
},
|
||||
|
||||
// Hover
|
||||
[`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: {
|
||||
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
||||
color: colorItemTextHover,
|
||||
color: itemHoverColor,
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-horizontal)`]: {
|
||||
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
|
||||
'&:hover': {
|
||||
backgroundColor: colorItemBgHover,
|
||||
backgroundColor: itemHoverBg,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
backgroundColor: colorItemBgSelected,
|
||||
backgroundColor: itemSelectedBg,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-submenu-title`]: {
|
||||
'&:hover': {
|
||||
backgroundColor: colorItemBgHover,
|
||||
backgroundColor: itemHoverBg,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
backgroundColor: colorItemBgSelected,
|
||||
backgroundColor: itemSelectedBg,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Danger - only Item has
|
||||
[`${componentCls}-item-danger`]: {
|
||||
color: colorDangerItemText,
|
||||
color: dangerItemColor,
|
||||
|
||||
[`&${componentCls}-item:hover`]: {
|
||||
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
||||
color: colorDangerItemTextHover,
|
||||
color: dangerItemHoverColor,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-item:active`]: {
|
||||
background: colorDangerItemBgActive,
|
||||
background: dangerItemActiveBg,
|
||||
},
|
||||
},
|
||||
|
||||
@ -121,11 +123,11 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
},
|
||||
|
||||
[`${componentCls}-item-selected`]: {
|
||||
color: colorItemTextSelected,
|
||||
color: itemSelectedColor,
|
||||
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
color: colorDangerItemTextSelected,
|
||||
color: dangerItemSelectedColor,
|
||||
},
|
||||
|
||||
[`a, a:hover`]: {
|
||||
@ -134,11 +136,11 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
},
|
||||
|
||||
[`& ${componentCls}-item-selected`]: {
|
||||
backgroundColor: colorItemBgSelected,
|
||||
backgroundColor: itemSelectedBg,
|
||||
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
backgroundColor: colorDangerItemBgSelected,
|
||||
backgroundColor: dangerItemSelectedBg,
|
||||
},
|
||||
},
|
||||
|
||||
@ -153,7 +155,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
},
|
||||
|
||||
[`&${componentCls}-popup > ${componentCls}`]: {
|
||||
backgroundColor: colorItemBg,
|
||||
backgroundColor: itemBg,
|
||||
},
|
||||
|
||||
// ====================== Horizontal ======================
|
||||
@ -165,32 +167,33 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
: {}),
|
||||
|
||||
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
|
||||
top: colorActiveBarBorderSize,
|
||||
marginTop: -colorActiveBarBorderSize,
|
||||
top: activeBarBorderWidth,
|
||||
marginTop: -activeBarBorderWidth,
|
||||
marginBottom: 0,
|
||||
borderRadius: 0,
|
||||
borderRadius: horizontalItemBorderRadius,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
insetInline: menuItemPaddingInline,
|
||||
bottom: 0,
|
||||
borderBottom: `${colorActiveBarHeight}px solid transparent`,
|
||||
borderBottom: `${activeBarHeight}px solid transparent`,
|
||||
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
[`&:hover, &-active, &-open`]: {
|
||||
background: horizontalItemHoverBg,
|
||||
'&::after': {
|
||||
borderBottomWidth: colorActiveBarHeight,
|
||||
borderBottomColor: colorItemTextSelectedHorizontal,
|
||||
borderBottomWidth: activeBarHeight,
|
||||
borderBottomColor: horizontalItemSelectedColor,
|
||||
},
|
||||
},
|
||||
[`&-selected`]: {
|
||||
color: colorItemTextSelectedHorizontal,
|
||||
backgroundColor: colorItemBgSelectedHorizontal,
|
||||
color: horizontalItemSelectedColor,
|
||||
backgroundColor: horizontalItemSelectedBg,
|
||||
'&::after': {
|
||||
borderBottomWidth: colorActiveBarHeight,
|
||||
borderBottomColor: colorItemTextSelectedHorizontal,
|
||||
borderBottomWidth: activeBarHeight,
|
||||
borderBottomColor: horizontalItemSelectedColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -200,7 +203,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
//
|
||||
[`&${componentCls}-root`]: {
|
||||
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
|
||||
borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}`,
|
||||
borderInlineEnd: `${activeBarBorderWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -208,14 +211,14 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
[`&${componentCls}-inline`]: {
|
||||
// Sub
|
||||
[`${componentCls}-sub${componentCls}-inline`]: {
|
||||
background: colorSubItemBg,
|
||||
background: subMenuItemBg,
|
||||
},
|
||||
|
||||
// Item
|
||||
[`${componentCls}-item, ${componentCls}-submenu-title`]:
|
||||
colorActiveBarBorderSize && colorActiveBarWidth
|
||||
activeBarBorderWidth && activeBarWidth
|
||||
? {
|
||||
width: `calc(100% + ${colorActiveBarBorderSize}px)`,
|
||||
width: `calc(100% + ${activeBarBorderWidth}px)`,
|
||||
}
|
||||
: {},
|
||||
|
||||
@ -226,7 +229,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
position: 'absolute',
|
||||
insetBlock: 0,
|
||||
insetInlineEnd: 0,
|
||||
borderInlineEnd: `${colorActiveBarWidth}px solid ${colorItemTextSelected}`,
|
||||
borderInlineEnd: `${activeBarWidth}px solid ${itemSelectedColor}`,
|
||||
transform: 'scaleY(0.0001)',
|
||||
opacity: 0,
|
||||
transition: [
|
||||
@ -239,7 +242,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
'&::after': {
|
||||
borderInlineEndColor: colorDangerItemTextSelected,
|
||||
borderInlineEndColor: dangerItemSelectedColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { textEllipsis } from '../../style';
|
||||
import type { MenuToken } from '.';
|
||||
import { textEllipsis } from '../../style';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
|
||||
@ -19,11 +19,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
|
||||
return {
|
||||
[`${componentCls}-item`]: {
|
||||
position: 'relative',
|
||||
|
||||
// https://github.com/ant-design/ant-design/blob/5e52057671f9781ad2b957b0ff9adfcd1eb1eb88/components/menu/style/index.less#L487-L489
|
||||
[`&:not(:last-child)`]: {
|
||||
marginBottom: marginXS,
|
||||
},
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
||||
@ -32,17 +28,11 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
|
||||
paddingInline: padding,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
marginInline: itemMarginInline,
|
||||
marginBlock: marginXXS,
|
||||
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||
},
|
||||
|
||||
// disable margin collapsed
|
||||
[`${componentCls}-submenu`]: {
|
||||
paddingBottom: 0.02,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item,
|
||||
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
||||
height: menuItemHeight,
|
||||
|
||||
@ -80,13 +80,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
|
||||
useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
|
||||
const { token: proxyToken, flush } = statisticToken(token);
|
||||
|
||||
const customComponentToken = token[component] as ComponentToken<ComponentName>;
|
||||
const defaultComponentToken =
|
||||
typeof getDefaultToken === 'function'
|
||||
? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
|
||||
: getDefaultToken;
|
||||
const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
|
||||
|
||||
const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
|
||||
if (options?.deprecatedTokens) {
|
||||
const { deprecatedTokens } = options;
|
||||
deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
|
||||
@ -99,12 +93,18 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
|
||||
);
|
||||
}
|
||||
|
||||
mergedComponentToken[newTokenKey] =
|
||||
customComponentToken?.[newTokenKey] ||
|
||||
customComponentToken?.[oldTokenKey] ||
|
||||
defaultComponentToken[newTokenKey];
|
||||
// Should wrap with `if` clause, or there will be `undefined` in object.
|
||||
if (customComponentToken?.[oldTokenKey] || customComponentToken?.[newTokenKey]) {
|
||||
customComponentToken[newTokenKey] ??= customComponentToken?.[oldTokenKey];
|
||||
}
|
||||
});
|
||||
}
|
||||
const defaultComponentToken =
|
||||
typeof getDefaultToken === 'function'
|
||||
? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
|
||||
: getDefaultToken;
|
||||
|
||||
const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
|
||||
|
||||
const componentCls = `.${prefixCls}`;
|
||||
const mergedToken = mergeToken<
|
||||
@ -125,7 +125,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
|
||||
prefixCls,
|
||||
rootPrefixCls,
|
||||
iconPrefixCls,
|
||||
overrideComponentToken: token[component],
|
||||
overrideComponentToken: customComponentToken as any,
|
||||
});
|
||||
flush(component, mergedComponentToken);
|
||||
return [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user