mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
feat: menu theme implemented by design token (#36738)
* feat: menu theme implemented by design token * test: fix test * fix: lint * fix: menu motion * 偷偷加了几个token Co-authored-by: 期贤 <qixian.cs@antgroup.com>
This commit is contained in:
MadCcc
GitHub
parent
79760145cb
commit
d7c2f5f5d3
@ -137,7 +137,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -1827,7 +1827,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -17437,7 +17437,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
|
||||
exports[`ConfigProvider components Menu configProvider 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="config-menu config-menu-root config-menu-inline config-menu-light"
|
||||
class="config-menu config-menu-root config-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17506,7 +17506,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu configProvider componentDisabled 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="config-menu config-menu-root config-menu-inline config-menu-light"
|
||||
class="config-menu config-menu-root config-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17575,7 +17575,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu configProvider componentSize large 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="config-menu config-menu-root config-menu-inline config-menu-light"
|
||||
class="config-menu config-menu-root config-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17644,7 +17644,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu configProvider componentSize middle 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="config-menu config-menu-root config-menu-inline config-menu-light"
|
||||
class="config-menu config-menu-root config-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17713,7 +17713,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17782,7 +17782,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu normal 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17851,7 +17851,7 @@ Array [
|
||||
exports[`ConfigProvider components Menu prefixCls 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="prefix-Menu prefix-Menu-root prefix-Menu-inline prefix-Menu-light"
|
||||
class="prefix-Menu prefix-Menu-root prefix-Menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -26304,7 +26304,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
|
||||
class="config-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical config-dropdown-menu-light"
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -26604,7 +26604,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
|
||||
class="config-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical config-dropdown-menu-light"
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -26906,7 +26906,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
|
||||
class="config-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical config-dropdown-menu-light"
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -27206,7 +27206,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
|
||||
class="config-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical config-dropdown-menu-light"
|
||||
class="config-dropdown-menu config-dropdown-menu-root config-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -27506,7 +27506,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -27806,7 +27806,7 @@ exports[`ConfigProvider components Table normal 1`] = `
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -28106,7 +28106,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
|
||||
class="prefix-Table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -19,7 +19,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -232,7 +232,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -445,7 +445,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -659,7 +659,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -872,7 +872,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1085,7 +1085,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1303,7 +1303,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1516,7 +1516,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1729,7 +1729,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1943,7 +1943,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2156,7 +2156,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2369,7 +2369,7 @@ Array [
|
||||
class="ant-dropdown-arrow"
|
||||
/>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2613,7 +2613,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2900,7 +2900,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3131,7 +3131,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3413,7 +3413,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3697,7 +3697,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4007,7 +4007,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4292,7 +4292,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4576,7 +4576,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4802,7 +4802,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5070,7 +5070,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5208,7 +5208,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5323,7 +5323,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5437,7 +5437,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5555,7 +5555,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5701,7 +5701,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5933,7 +5933,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6048,7 +6048,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6190,7 +6190,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6697,7 +6697,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -6908,7 +6908,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7123,7 +7123,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7338,7 +7338,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7562,7 +7562,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7777,7 +7777,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7992,7 +7992,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -8207,7 +8207,7 @@ exports[`renders ./components/dropdown/demo/render-panel.md extend context corre
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -8525,7 +8525,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -8751,7 +8751,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -8878,7 +8878,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -8997,7 +8997,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -9262,7 +9262,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -519,7 +519,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -805,7 +805,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -89,7 +89,7 @@ export type { ListProps } from './list';
|
||||
export { default as Mentions } from './mentions';
|
||||
export type { MentionProps } from './mentions';
|
||||
export { default as Menu } from './menu';
|
||||
export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps } from './menu';
|
||||
export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps, MenuRef } from './menu';
|
||||
export { default as message } from './message';
|
||||
export type { ArgsProps as MessageArgsProps } from './message';
|
||||
export { default as Modal } from './modal';
|
||||
|
||||
@ -138,7 +138,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md extend context corre
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -426,7 +426,7 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -571,7 +571,7 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -732,7 +732,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md extend context correctl
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1591,7 +1591,7 @@ exports[`renders ./components/layout/demo/responsive.md extend context correctly
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1948,7 +1948,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2101,7 +2101,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -2256,7 +2256,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -2666,7 +2666,7 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3219,7 +3219,7 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3639,7 +3639,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3784,7 +3784,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3926,7 +3926,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height:100%"
|
||||
@ -3974,7 +3974,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4304,7 +4304,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4493,7 +4493,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4940,7 +4940,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5085,7 +5085,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5179,7 +5179,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height:100%;border-right:0"
|
||||
@ -5227,7 +5227,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5557,7 +5557,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5746,7 +5746,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
|
||||
@ -138,7 +138,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -293,7 +293,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -455,7 +455,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -961,7 +961,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1141,7 +1141,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1422,7 +1422,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1723,7 +1723,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1866,7 +1866,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height:100%"
|
||||
@ -2083,7 +2083,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2178,7 +2178,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height:100%;border-right:0"
|
||||
|
||||
@ -6,7 +6,6 @@ export type MenuTheme = 'light' | 'dark';
|
||||
export interface MenuContextProps {
|
||||
prefixCls: string;
|
||||
inlineCollapsed: boolean;
|
||||
antdMenuTheme?: MenuTheme;
|
||||
direction?: DirectionType;
|
||||
firstLevel: boolean;
|
||||
/** @private Internal Usage. Safe to remove */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import type { MenuProps } from '.';
|
||||
import type { MenuProps } from './menu';
|
||||
|
||||
// Used for Dropdown only
|
||||
export interface OverrideContextProps {
|
||||
|
||||
@ -24,13 +24,14 @@ export interface SubMenuProps {
|
||||
popupOffset?: [number, number];
|
||||
popupClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
// FIXME: not implemented in v5 yet
|
||||
theme?: MenuTheme;
|
||||
}
|
||||
|
||||
function SubMenu(props: SubMenuProps) {
|
||||
const { popupClassName, icon, title, theme } = props;
|
||||
const { popupClassName, icon, title } = props;
|
||||
const context = React.useContext(MenuContext);
|
||||
const { prefixCls, inlineCollapsed, antdMenuTheme } = context;
|
||||
const { prefixCls, inlineCollapsed } = context;
|
||||
|
||||
const parentPath = useFullPath();
|
||||
|
||||
@ -73,11 +74,7 @@ function SubMenu(props: SubMenuProps) {
|
||||
<RcSubMenu
|
||||
{...omit(props, ['icon'])}
|
||||
title={titleNode}
|
||||
popupClassName={classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${theme || antdMenuTheme}`,
|
||||
popupClassName,
|
||||
)}
|
||||
popupClassName={classNames(prefixCls, popupClassName)}
|
||||
/>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`renders ./components/menu/demo/deprecated.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -140,7 +140,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -272,7 +272,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/horizontal.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -502,7 +502,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -678,7 +678,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/inline.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -726,7 +726,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -1112,7 +1112,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -1210,7 +1210,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -1335,7 +1335,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -1785,7 +1785,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1991,7 +1991,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -2321,7 +2321,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -2419,7 +2419,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -2756,7 +2756,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
|
||||
exports[`renders ./components/menu/demo/sider-current.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -2804,7 +2804,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3134,7 +3134,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3232,7 +3232,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3357,7 +3357,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3797,7 +3797,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-inline-collapsed"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3844,7 +3844,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3945,7 +3945,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -3999,7 +3999,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4090,7 +4090,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -4138,7 +4138,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4470,7 +4470,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -4624,7 +4624,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4722,7 +4722,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -4899,7 +4899,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5022,7 +5022,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5499,7 +5499,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -5547,7 +5547,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5877,7 +5877,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -5975,7 +5975,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6100,7 +6100,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6523,7 +6523,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/vertical.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -6570,7 +6570,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6782,7 +6782,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6877,7 +6877,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -6999,7 +6999,7 @@ Array [
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||
class="ant-menu-submenu ant-menu-submenu-popup ant-menu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`renders ./components/menu/demo/deprecated.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -128,7 +128,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
|
||||
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -302,7 +302,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -550,7 +550,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -794,7 +794,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -1004,7 +1004,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-inline-collapsed"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1143,7 +1143,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -1257,7 +1257,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -1523,7 +1523,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
@ -1716,7 +1716,7 @@ Array [
|
||||
exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="width:256px"
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -165,7 +165,7 @@ Array [
|
||||
exports[`Menu all types must be available in the "items" syntax 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -326,9 +326,8 @@ Array [
|
||||
exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light ant-menu-rtl"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical"
|
||||
data-menu-list="true"
|
||||
dir="rtl"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -384,7 +383,7 @@ Array [
|
||||
exports[`Menu should controlled collapse work 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
class="ant-menu ant-menu-root ant-menu-inline"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -432,7 +431,7 @@ Array [
|
||||
exports[`Menu should controlled collapse work 2`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light ant-menu-inline-collapsed"
|
||||
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-inline-collapsed"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -319,31 +319,6 @@ describe('Menu', () => {
|
||||
);
|
||||
});
|
||||
|
||||
describe('allows the overriding of theme at the popup submenu level', () => {
|
||||
const menuModesWithPopupSubMenu = ['horizontal', 'vertical'];
|
||||
|
||||
menuModesWithPopupSubMenu.forEach(menuMode => {
|
||||
it(`when menu is mode ${menuMode}`, () => {
|
||||
const { container } = render(
|
||||
<Menu mode={menuMode} openKeys={['1']} theme="dark">
|
||||
<SubMenu key="1" title="submenu1" theme="light">
|
||||
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
||||
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
expect(container.querySelector('ul.ant-menu-root')).toHaveClass('ant-menu-dark');
|
||||
expect(container.querySelector('div.ant-menu-submenu-popup')).toHaveClass('ant-menu-light');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pulls/4677
|
||||
// https://github.com/ant-design/ant-design/issues/4692
|
||||
// TypeError: Cannot read property 'indexOf' of undefined
|
||||
|
||||
@ -1,217 +1,96 @@
|
||||
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
||||
import classNames from 'classnames';
|
||||
import type { MenuProps as RcMenuProps, MenuRef } from 'rc-menu';
|
||||
import RcMenu, { ItemGroup } from 'rc-menu';
|
||||
import useEvent from 'rc-util/lib/hooks/useEvent';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import { ItemGroup } from 'rc-menu';
|
||||
import type { MenuRef as RcMenuRef } from 'rc-menu';
|
||||
import * as React from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { MenuProps } from './menu';
|
||||
import InternalMenu from './menu';
|
||||
import type { SiderContextProps } from '../layout/Sider';
|
||||
import { SiderContext } from '../layout/Sider';
|
||||
import initCollapseMotion from '../_util/motion';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import warning from '../_util/warning';
|
||||
import type { ItemType } from './hooks/useItems';
|
||||
import useItems from './hooks/useItems';
|
||||
import MenuContext, { MenuTheme } from './MenuContext';
|
||||
import { MenuTheme } from './MenuContext';
|
||||
import MenuDivider from './MenuDivider';
|
||||
import Item, { MenuItemProps } from './MenuItem';
|
||||
import OverrideContext from './OverrideContext';
|
||||
import SubMenu, { SubMenuProps } from './SubMenu';
|
||||
|
||||
import useStyle from './style';
|
||||
import { ConfigProvider } from '..';
|
||||
import type { ComponentToken } from './style';
|
||||
import { useToken } from '../theme';
|
||||
|
||||
export { MenuItemGroupProps } from 'rc-menu';
|
||||
export { MenuDividerProps } from './MenuDivider';
|
||||
export { MenuTheme, SubMenuProps, MenuItemProps };
|
||||
export { MenuTheme, SubMenuProps, MenuItemProps, MenuProps };
|
||||
|
||||
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
|
||||
|
||||
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
|
||||
theme?: MenuTheme;
|
||||
inlineIndent?: number;
|
||||
export type MenuRef = {
|
||||
menu: RcMenuRef | null;
|
||||
focus: (options?: FocusOptions) => void;
|
||||
};
|
||||
|
||||
// >>>>> Private
|
||||
/**
|
||||
* @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
|
||||
* for removing.
|
||||
*/
|
||||
_internalDisableMenuItemTitleTooltip?: boolean;
|
||||
|
||||
items?: ItemType[];
|
||||
interface CompoundedComponent
|
||||
extends React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuRef>> {
|
||||
Divider: typeof MenuDivider;
|
||||
Item: typeof Item;
|
||||
SubMenu: typeof SubMenu;
|
||||
ItemGroup: typeof ItemGroup;
|
||||
}
|
||||
|
||||
type InternalMenuProps = MenuProps &
|
||||
SiderContextProps & {
|
||||
collapsedWidth?: string | number;
|
||||
};
|
||||
const ThemedMenu = forwardRef<MenuRef, MenuProps>(({ theme = 'light', ...rest }, ref) => {
|
||||
const menuRef = useRef<RcMenuRef>(null);
|
||||
const [, token] = useToken();
|
||||
|
||||
const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
|
||||
const override = React.useContext(OverrideContext);
|
||||
const overrideObj = override || {};
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: options => {
|
||||
menuRef.current?.focus(options);
|
||||
},
|
||||
menu: menuRef.current,
|
||||
}));
|
||||
|
||||
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
|
||||
const { colorTextLightSolid, colorTextSecondary, colorPrimary, colorError, colorErrorHover } =
|
||||
token;
|
||||
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const darkThemeToken = useMemo<Partial<ComponentToken>>(() => {
|
||||
if (theme === 'dark') {
|
||||
return {
|
||||
colorItemText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
|
||||
colorItemTextHover: colorTextLightSolid,
|
||||
colorGroupTitle: colorTextSecondary,
|
||||
colorItemTextSelected: colorTextLightSolid,
|
||||
colorItemBg: '#001529',
|
||||
colorSubItemBg: '#000c17',
|
||||
colorItemBgActive: 'transparent',
|
||||
colorItemBgSelected: colorPrimary,
|
||||
colorActiveBarWidth: 0,
|
||||
colorActiveBarHeight: 0,
|
||||
colorActiveBarBorderSize: 0,
|
||||
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
theme = 'light',
|
||||
expandIcon,
|
||||
_internalDisableMenuItemTitleTooltip,
|
||||
inlineCollapsed,
|
||||
siderCollapsed,
|
||||
items,
|
||||
children,
|
||||
rootClassName,
|
||||
mode,
|
||||
selectable,
|
||||
onClick,
|
||||
...restProps
|
||||
} = props;
|
||||
// Disabled
|
||||
colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
||||
|
||||
const passedProps = omit(restProps, ['collapsedWidth']);
|
||||
|
||||
// ========================= Items ===========================
|
||||
const mergedChildren = useItems(items) || children;
|
||||
|
||||
// ======================== Warning ==========================
|
||||
warning(
|
||||
!('inlineCollapsed' in props && mode !== 'inline'),
|
||||
'Menu',
|
||||
'`inlineCollapsed` should only be used when `mode` is inline.',
|
||||
);
|
||||
|
||||
warning(
|
||||
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
|
||||
'Menu',
|
||||
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
||||
);
|
||||
|
||||
warning(
|
||||
'items' in props && !children,
|
||||
'Menu',
|
||||
'`children` will be removed in next major version. Please use `items` instead.',
|
||||
);
|
||||
|
||||
overrideObj.validator?.({ mode });
|
||||
|
||||
// ========================== Click ==========================
|
||||
// Tell dropdown that item clicked
|
||||
const onItemClick = useEvent<Required<MenuProps>['onClick']>((...args) => {
|
||||
onClick?.(...args);
|
||||
overrideObj.onClick?.();
|
||||
});
|
||||
|
||||
// ========================== Mode ===========================
|
||||
const mergedMode = overrideObj.mode || mode;
|
||||
|
||||
// ======================= Selectable ========================
|
||||
const mergedSelectable = selectable ?? overrideObj.selectable;
|
||||
|
||||
// ======================== Collapsed ========================
|
||||
// Inline Collapsed
|
||||
const mergedInlineCollapsed = React.useMemo(() => {
|
||||
if (siderCollapsed !== undefined) {
|
||||
return siderCollapsed;
|
||||
// Danger
|
||||
colorDangerItemText: colorError,
|
||||
colorDangerItemTextHover: colorErrorHover,
|
||||
colorDangerItemTextSelected: colorTextLightSolid,
|
||||
colorDangerItemBgActive: colorError,
|
||||
colorDangerItemBgSelected: colorError,
|
||||
};
|
||||
}
|
||||
return inlineCollapsed;
|
||||
}, [inlineCollapsed, siderCollapsed]);
|
||||
return {};
|
||||
}, [theme]);
|
||||
|
||||
const defaultMotions = {
|
||||
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
|
||||
inline: initCollapseMotion(rootPrefixCls),
|
||||
other: { motionName: `${rootPrefixCls}-zoom-big` },
|
||||
};
|
||||
|
||||
const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, !override);
|
||||
const menuClassName = classNames(`${prefixCls}-${theme}`, className);
|
||||
|
||||
// ====================== Expand Icon ========================
|
||||
let mergedExpandIcon: MenuProps[`expandIcon`];
|
||||
if (typeof expandIcon === 'function') {
|
||||
mergedExpandIcon = expandIcon;
|
||||
} else {
|
||||
mergedExpandIcon = cloneElement(expandIcon || overrideObj.expandIcon, {
|
||||
className: `${prefixCls}-submenu-expand-icon`,
|
||||
});
|
||||
}
|
||||
|
||||
// ======================== Context ==========================
|
||||
const contextValue = React.useMemo(
|
||||
() => ({
|
||||
prefixCls,
|
||||
inlineCollapsed: mergedInlineCollapsed || false,
|
||||
antdMenuTheme: theme,
|
||||
direction,
|
||||
firstLevel: true,
|
||||
disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
|
||||
}),
|
||||
[prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip],
|
||||
);
|
||||
|
||||
// ========================= Render ==========================
|
||||
return wrapSSR(
|
||||
<OverrideContext.Provider value={null}>
|
||||
<MenuContext.Provider value={contextValue}>
|
||||
<RcMenu
|
||||
getPopupContainer={getPopupContainer}
|
||||
overflowedIndicator={<EllipsisOutlined />}
|
||||
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
|
||||
mode={mergedMode}
|
||||
selectable={mergedSelectable}
|
||||
onClick={onItemClick}
|
||||
{...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>,
|
||||
return (
|
||||
<ConfigProvider theme={{ override: { Menu: darkThemeToken } }}>
|
||||
<SiderContext.Consumer>
|
||||
{(context: SiderContextProps) => <InternalMenu ref={menuRef} {...rest} {...context} />}
|
||||
</SiderContext.Consumer>
|
||||
</ConfigProvider>
|
||||
);
|
||||
});
|
||||
|
||||
// We should keep this as ref-able
|
||||
class Menu extends React.Component<MenuProps, {}> {
|
||||
static Divider = MenuDivider;
|
||||
const Menu: CompoundedComponent = ThemedMenu as CompoundedComponent;
|
||||
|
||||
static Item = Item;
|
||||
|
||||
static SubMenu = SubMenu;
|
||||
|
||||
static ItemGroup = ItemGroup;
|
||||
|
||||
menu: MenuRef | null;
|
||||
|
||||
focus = (options?: FocusOptions) => {
|
||||
this.menu?.focus(options);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SiderContext.Consumer>
|
||||
{(context: SiderContextProps) => (
|
||||
<InternalMenu
|
||||
ref={node => {
|
||||
this.menu = node;
|
||||
}}
|
||||
{...this.props}
|
||||
{...context}
|
||||
/>
|
||||
)}
|
||||
</SiderContext.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
Menu.Divider = MenuDivider;
|
||||
Menu.Item = Item;
|
||||
Menu.SubMenu = SubMenu;
|
||||
Menu.ItemGroup = ItemGroup;
|
||||
|
||||
export default Menu;
|
||||
|
||||
168
components/menu/menu.tsx
Normal file
168
components/menu/menu.tsx
Normal file
@ -0,0 +1,168 @@
|
||||
import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
|
||||
import RcMenu from 'rc-menu';
|
||||
import * as React from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import useEvent from 'rc-util/lib/hooks/useEvent';
|
||||
import classNames from 'classnames';
|
||||
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
||||
import warning from '../_util/warning';
|
||||
import initCollapseMotion from '../_util/motion';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import type { SiderContextProps } from '../layout/Sider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
import OverrideContext from './OverrideContext';
|
||||
import useItems from './hooks/useItems';
|
||||
import type { ItemType } from './hooks/useItems';
|
||||
import MenuContext from './MenuContext';
|
||||
import type { MenuTheme } from './MenuContext';
|
||||
|
||||
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
|
||||
theme?: MenuTheme;
|
||||
inlineIndent?: number;
|
||||
|
||||
// >>>>> Private
|
||||
/**
|
||||
* @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
|
||||
* for removing.
|
||||
*/
|
||||
_internalDisableMenuItemTitleTooltip?: boolean;
|
||||
|
||||
items?: ItemType[];
|
||||
}
|
||||
|
||||
type InternalMenuProps = Omit<MenuProps, 'theme'> &
|
||||
SiderContextProps & {
|
||||
collapsedWidth?: string | number;
|
||||
};
|
||||
|
||||
const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
|
||||
const override = React.useContext(OverrideContext);
|
||||
const overrideObj = override || {};
|
||||
|
||||
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
|
||||
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
expandIcon,
|
||||
_internalDisableMenuItemTitleTooltip,
|
||||
inlineCollapsed,
|
||||
siderCollapsed,
|
||||
items,
|
||||
children,
|
||||
rootClassName,
|
||||
mode,
|
||||
selectable,
|
||||
onClick,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const passedProps = omit(restProps, ['collapsedWidth']);
|
||||
|
||||
// ========================= Items ===========================
|
||||
const mergedChildren = useItems(items) || children;
|
||||
|
||||
// ======================== Warning ==========================
|
||||
warning(
|
||||
!('inlineCollapsed' in props && mode !== 'inline'),
|
||||
'Menu',
|
||||
'`inlineCollapsed` should only be used when `mode` is inline.',
|
||||
);
|
||||
|
||||
warning(
|
||||
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
|
||||
'Menu',
|
||||
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
||||
);
|
||||
|
||||
warning(
|
||||
'items' in props && !children,
|
||||
'Menu',
|
||||
'`children` will be removed in next major version. Please use `items` instead.',
|
||||
);
|
||||
|
||||
overrideObj.validator?.({ mode });
|
||||
|
||||
// ========================== Click ==========================
|
||||
// Tell dropdown that item clicked
|
||||
const onItemClick = useEvent<Required<MenuProps>['onClick']>((...args) => {
|
||||
onClick?.(...args);
|
||||
overrideObj.onClick?.();
|
||||
});
|
||||
|
||||
// ========================== Mode ===========================
|
||||
const mergedMode = overrideObj.mode || mode;
|
||||
|
||||
// ======================= Selectable ========================
|
||||
const mergedSelectable = selectable ?? overrideObj.selectable;
|
||||
|
||||
// ======================== Collapsed ========================
|
||||
// Inline Collapsed
|
||||
const mergedInlineCollapsed = React.useMemo(() => {
|
||||
if (siderCollapsed !== undefined) {
|
||||
return siderCollapsed;
|
||||
}
|
||||
return inlineCollapsed;
|
||||
}, [inlineCollapsed, siderCollapsed]);
|
||||
|
||||
const defaultMotions = {
|
||||
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
|
||||
inline: initCollapseMotion(rootPrefixCls),
|
||||
other: { motionName: `${rootPrefixCls}-zoom-big` },
|
||||
};
|
||||
|
||||
const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, !override);
|
||||
|
||||
// ====================== Expand Icon ========================
|
||||
let mergedExpandIcon: MenuProps[`expandIcon`];
|
||||
if (typeof expandIcon === 'function') {
|
||||
mergedExpandIcon = expandIcon;
|
||||
} else {
|
||||
mergedExpandIcon = cloneElement(expandIcon || overrideObj.expandIcon, {
|
||||
className: `${prefixCls}-submenu-expand-icon`,
|
||||
});
|
||||
}
|
||||
|
||||
// ======================== Context ==========================
|
||||
const contextValue = React.useMemo(
|
||||
() => ({
|
||||
prefixCls,
|
||||
inlineCollapsed: mergedInlineCollapsed || false,
|
||||
direction,
|
||||
firstLevel: true,
|
||||
disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
|
||||
}),
|
||||
[prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip],
|
||||
);
|
||||
|
||||
// ========================= Render ==========================
|
||||
return wrapSSR(
|
||||
<OverrideContext.Provider value={null}>
|
||||
<MenuContext.Provider value={contextValue}>
|
||||
<RcMenu
|
||||
getPopupContainer={getPopupContainer}
|
||||
overflowedIndicator={<EllipsisOutlined />}
|
||||
mode={mergedMode}
|
||||
selectable={mergedSelectable}
|
||||
onClick={onItemClick}
|
||||
{...passedProps}
|
||||
inlineCollapsed={mergedInlineCollapsed}
|
||||
prefixCls={prefixCls}
|
||||
direction={direction}
|
||||
defaultMotions={defaultMotions}
|
||||
expandIcon={mergedExpandIcon}
|
||||
ref={ref}
|
||||
rootClassName={classNames(rootClassName, hashId)}
|
||||
>
|
||||
{mergedChildren}
|
||||
</RcMenu>
|
||||
</MenuContext.Provider>
|
||||
</OverrideContext.Provider>,
|
||||
);
|
||||
});
|
||||
|
||||
export default InternalMenu;
|
||||
@ -1,7 +1,7 @@
|
||||
import type { MenuThemeToken } from '.';
|
||||
import type { MenuToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme';
|
||||
|
||||
const getHorizontalStyle: GenerateStyle<MenuThemeToken> = token => {
|
||||
const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
motionDurationSlow,
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { genCollapseMotion } from '../../style/motion';
|
||||
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
|
||||
import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme';
|
||||
import getHorizontalStyle from './horizontal';
|
||||
@ -12,6 +11,44 @@ import { clearFix, resetComponent, resetIcon } from '../../style';
|
||||
export interface ComponentToken {
|
||||
dropdownWidth: number;
|
||||
zIndexPopup: number;
|
||||
|
||||
// Group
|
||||
colorGroupTitle: string;
|
||||
|
||||
// radius
|
||||
radiusItem: number;
|
||||
|
||||
// Item Text
|
||||
// > Default
|
||||
colorItemText: string;
|
||||
colorItemTextHover: string;
|
||||
colorItemTextSelected: string;
|
||||
|
||||
// > Disabled
|
||||
colorItemTextDisabled: string;
|
||||
|
||||
// > Danger
|
||||
colorDangerItemText: string;
|
||||
colorDangerItemTextHover: string;
|
||||
colorDangerItemTextSelected: string;
|
||||
|
||||
// Item Bg
|
||||
colorItemBg: string;
|
||||
colorSubItemBg: string;
|
||||
|
||||
// > Default
|
||||
colorItemBgActive: string;
|
||||
colorItemBgSelected: string;
|
||||
colorItemBgSelectedHorizontal: string;
|
||||
|
||||
// > Danger
|
||||
colorDangerItemBgActive: string;
|
||||
colorDangerItemBgSelected: string;
|
||||
|
||||
// Ink Bar
|
||||
colorActiveBarWidth: number;
|
||||
colorActiveBarHeight: number;
|
||||
colorActiveBarBorderSize: number;
|
||||
}
|
||||
|
||||
export interface MenuToken extends FullToken<'Menu'> {
|
||||
@ -23,42 +60,6 @@ export interface MenuToken extends FullToken<'Menu'> {
|
||||
menuPanelMaskInset: number;
|
||||
}
|
||||
|
||||
export interface MenuThemeToken extends MenuToken {
|
||||
// Group
|
||||
themeColorTextSecondary: string;
|
||||
|
||||
// Item Text
|
||||
// > Default
|
||||
themeColorText: string;
|
||||
themeColorTextHover: string;
|
||||
themeColorTextSelect: string;
|
||||
|
||||
// > Disabled
|
||||
themeColorDisabledText: string;
|
||||
|
||||
// > Danger
|
||||
themeColorDangerText: string;
|
||||
themeColorDangerTextHover: string;
|
||||
themeColorDangerTextSelect: string;
|
||||
|
||||
// Item Bg
|
||||
themeColorBg: string;
|
||||
themeColorBgSecondary: string;
|
||||
|
||||
// > Default
|
||||
themeColorBgActive: string;
|
||||
themeColorBgSelect: string;
|
||||
|
||||
// > Danger
|
||||
themeColorDangerBgActive: string;
|
||||
themeColorDangerBgSelect: string;
|
||||
|
||||
// Ink Bar
|
||||
themeInkBarWidth: number;
|
||||
themeInkBarHeight: number;
|
||||
themeInkBorderSize: number;
|
||||
}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
const {
|
||||
@ -131,6 +132,9 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
flex: 'none',
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item,${componentCls}-submenu,`]: {
|
||||
borderRadius: token.radiusItem,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-group-title`]: {
|
||||
padding: `${paddingXS}px ${padding}px`,
|
||||
@ -393,23 +397,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
return [];
|
||||
}
|
||||
|
||||
const {
|
||||
colorPrimary,
|
||||
colorError,
|
||||
colorTextDisabled,
|
||||
colorErrorHover,
|
||||
colorErrorBg,
|
||||
colorText,
|
||||
colorTextLightSolid,
|
||||
colorTextSecondary,
|
||||
colorBgContainer,
|
||||
colorFillAlter,
|
||||
controlHeightLG,
|
||||
fontSize,
|
||||
controlItemBgActive,
|
||||
lineWidth,
|
||||
lineWidthBold,
|
||||
} = token;
|
||||
const { controlHeightLG, fontSize } = token;
|
||||
|
||||
const menuArrowSize = (fontSize / 7) * 5;
|
||||
|
||||
@ -423,80 +411,73 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align
|
||||
});
|
||||
|
||||
// Theme Token
|
||||
const menuLightToken = mergeToken<MenuThemeToken>(menuToken, {
|
||||
themeColorText: colorText,
|
||||
themeColorTextHover: colorPrimary,
|
||||
themeColorTextSecondary: colorTextSecondary,
|
||||
themeColorTextSelect: colorPrimary,
|
||||
themeColorBg: colorBgContainer,
|
||||
themeColorBgSecondary: colorFillAlter,
|
||||
themeColorBgActive: controlItemBgActive,
|
||||
themeColorBgSelect: controlItemBgActive,
|
||||
themeInkBarWidth: lineWidthBold + lineWidth,
|
||||
themeInkBarHeight: lineWidthBold,
|
||||
themeInkBorderSize: lineWidth,
|
||||
|
||||
// Disabled
|
||||
themeColorDisabledText: colorTextDisabled,
|
||||
|
||||
// Danger
|
||||
themeColorDangerText: colorError,
|
||||
themeColorDangerTextHover: colorError,
|
||||
themeColorDangerTextSelect: colorError,
|
||||
themeColorDangerBgActive: colorErrorBg,
|
||||
themeColorDangerBgSelect: colorErrorBg,
|
||||
});
|
||||
|
||||
const menuDarkToken = mergeToken<MenuThemeToken>(menuToken, {
|
||||
themeColorText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
|
||||
themeColorTextHover: colorTextLightSolid,
|
||||
themeColorTextSecondary: colorTextSecondary,
|
||||
themeColorTextSelect: colorTextLightSolid,
|
||||
themeColorBg: '#001529',
|
||||
themeColorBgSecondary: '#000c17',
|
||||
themeColorBgActive: 'transparent',
|
||||
themeColorBgSelect: colorPrimary,
|
||||
themeInkBarWidth: 0,
|
||||
themeInkBarHeight: 0,
|
||||
themeInkBorderSize: 0,
|
||||
|
||||
// Disabled
|
||||
themeColorDisabledText: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
||||
|
||||
// Danger
|
||||
themeColorDangerText: colorError,
|
||||
themeColorDangerTextHover: colorErrorHover,
|
||||
themeColorDangerTextSelect: colorTextLightSolid,
|
||||
themeColorDangerBgActive: colorError,
|
||||
themeColorDangerBgSelect: colorError,
|
||||
});
|
||||
|
||||
return [
|
||||
// Basic
|
||||
getBaseStyle(menuToken),
|
||||
|
||||
// Horizontal
|
||||
getHorizontalStyle(menuLightToken), // Hard code for some light style
|
||||
getHorizontalStyle(menuToken), // Hard code for some light style
|
||||
|
||||
// Vertical
|
||||
getVerticalStyle(menuLightToken), // Hard code for some light style
|
||||
getVerticalStyle(menuToken), // Hard code for some light style
|
||||
|
||||
// Theme
|
||||
getThemeStyle(menuLightToken, 'light'),
|
||||
getThemeStyle(menuDarkToken, 'dark'),
|
||||
getThemeStyle(menuToken),
|
||||
|
||||
// RTL
|
||||
getRTLStyle(menuToken),
|
||||
|
||||
// Motion
|
||||
genCollapseMotion(menuToken),
|
||||
|
||||
initSlideMotion(menuToken, 'slide-up'),
|
||||
initSlideMotion(menuToken, 'slide-down'),
|
||||
initZoomMotion(menuToken, 'zoom-big'),
|
||||
];
|
||||
},
|
||||
token => ({
|
||||
dropdownWidth: 160,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
}),
|
||||
token => {
|
||||
const {
|
||||
colorPrimary,
|
||||
colorError,
|
||||
colorTextDisabled,
|
||||
colorErrorBg,
|
||||
colorText,
|
||||
colorTextSecondary,
|
||||
colorBgContainer,
|
||||
colorFillAlter,
|
||||
controlItemBgActive,
|
||||
lineWidth,
|
||||
lineWidthBold,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
dropdownWidth: 160,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
radiusItem: 0,
|
||||
colorItemText: colorText,
|
||||
colorItemTextHover: colorPrimary,
|
||||
colorGroupTitle: colorTextSecondary,
|
||||
colorItemTextSelected: colorPrimary,
|
||||
colorItemBg: colorBgContainer,
|
||||
colorSubItemBg: colorFillAlter,
|
||||
colorItemBgActive: controlItemBgActive,
|
||||
colorItemBgSelected: controlItemBgActive,
|
||||
colorItemBgSelectedHorizontal: 'transparent',
|
||||
colorActiveBarWidth: lineWidthBold + lineWidth,
|
||||
colorActiveBarHeight: lineWidthBold,
|
||||
colorActiveBarBorderSize: lineWidth,
|
||||
|
||||
// Disabled
|
||||
colorItemTextDisabled: colorTextDisabled,
|
||||
|
||||
// Danger
|
||||
colorDangerItemText: colorError,
|
||||
colorDangerItemTextHover: colorError,
|
||||
colorDangerItemTextSelected: colorError,
|
||||
colorDangerItemBgActive: colorErrorBg,
|
||||
colorDangerItemBgSelected: colorErrorBg,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return useOriginHook(prefixCls);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import type { MenuThemeToken, MenuToken } from '.';
|
||||
import type { MenuToken } from '.';
|
||||
|
||||
const accessibilityFocus = (token: MenuToken) => {
|
||||
const { controlOutlineWidth, colorPrimaryHover } = token;
|
||||
@ -9,43 +9,44 @@ const accessibilityFocus = (token: MenuToken) => {
|
||||
};
|
||||
};
|
||||
|
||||
const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpolation => {
|
||||
const getThemeStyle = (token: MenuToken): CSSInterpolation => {
|
||||
const {
|
||||
componentCls,
|
||||
themeColorText,
|
||||
themeColorTextSelect,
|
||||
themeColorTextSecondary,
|
||||
themeColorBg,
|
||||
themeColorBgSecondary,
|
||||
themeColorBgActive,
|
||||
themeColorBgSelect,
|
||||
themeInkBarHeight,
|
||||
themeInkBarWidth,
|
||||
themeInkBorderSize,
|
||||
colorItemText,
|
||||
colorItemTextSelected,
|
||||
colorGroupTitle,
|
||||
colorItemBg,
|
||||
colorSubItemBg,
|
||||
colorItemBgActive,
|
||||
colorItemBgSelectedHorizontal,
|
||||
colorItemBgSelected,
|
||||
colorActiveBarHeight,
|
||||
colorActiveBarWidth,
|
||||
colorActiveBarBorderSize,
|
||||
motionDurationSlow,
|
||||
motionEaseInOut,
|
||||
motionEaseOut,
|
||||
menuItemPaddingInline,
|
||||
motionDurationFast,
|
||||
themeColorTextHover,
|
||||
colorItemTextHover,
|
||||
lineType,
|
||||
colorBorderSecondary,
|
||||
|
||||
// Disabled
|
||||
themeColorDisabledText,
|
||||
colorItemTextDisabled,
|
||||
|
||||
// Danger
|
||||
themeColorDangerText,
|
||||
themeColorDangerTextHover,
|
||||
themeColorDangerTextSelect,
|
||||
themeColorDangerBgActive,
|
||||
themeColorDangerBgSelect,
|
||||
colorDangerItemText,
|
||||
colorDangerItemTextHover,
|
||||
colorDangerItemTextSelected,
|
||||
colorDangerItemBgActive,
|
||||
colorDangerItemBgSelected,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-${themeSuffix}`]: {
|
||||
color: themeColorText,
|
||||
background: themeColorBg,
|
||||
[componentCls]: {
|
||||
color: colorItemText,
|
||||
background: colorItemBg,
|
||||
|
||||
[`&${componentCls}-root:focus-visible`]: {
|
||||
...accessibilityFocus(token),
|
||||
@ -53,44 +54,44 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
|
||||
// ======================== Item ========================
|
||||
[`${componentCls}-item-group-title`]: {
|
||||
color: themeColorTextSecondary,
|
||||
color: colorGroupTitle,
|
||||
},
|
||||
|
||||
[`${componentCls}-submenu-selected`]: {
|
||||
[`> ${componentCls}-submenu-title`]: {
|
||||
color: themeColorTextSelect,
|
||||
color: colorItemTextSelected,
|
||||
},
|
||||
},
|
||||
|
||||
// Disabled
|
||||
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
||||
color: `${themeColorDisabledText} !important`,
|
||||
color: `${colorItemTextDisabled} !important`,
|
||||
},
|
||||
|
||||
// Hover
|
||||
[`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: {
|
||||
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
||||
color: themeColorTextHover,
|
||||
color: colorItemTextHover,
|
||||
},
|
||||
},
|
||||
|
||||
// Active
|
||||
[`${componentCls}-item:active, ${componentCls}-submenu-title:active`]: {
|
||||
background: themeColorBgActive,
|
||||
background: colorItemBgActive,
|
||||
},
|
||||
|
||||
// Danger - only Item has
|
||||
[`${componentCls}-item-danger`]: {
|
||||
color: themeColorDangerText,
|
||||
color: colorDangerItemText,
|
||||
|
||||
[`&${componentCls}-item:hover`]: {
|
||||
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
||||
color: themeColorDangerTextHover,
|
||||
color: colorDangerItemTextHover,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-item:active`]: {
|
||||
background: themeColorDangerBgActive,
|
||||
background: colorDangerItemBgActive,
|
||||
},
|
||||
},
|
||||
|
||||
@ -101,11 +102,11 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
},
|
||||
|
||||
[`${componentCls}-item-selected`]: {
|
||||
color: themeColorTextSelect,
|
||||
color: colorItemTextSelected,
|
||||
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
color: themeColorDangerTextSelect,
|
||||
color: colorDangerItemTextSelected,
|
||||
},
|
||||
|
||||
[`a, a:hover`]: {
|
||||
@ -114,11 +115,11 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-horizontal) ${componentCls}-item-selected`]: {
|
||||
backgroundColor: themeColorBgSelect,
|
||||
backgroundColor: colorItemBgSelected,
|
||||
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
backgroundColor: themeColorDangerBgSelect,
|
||||
backgroundColor: colorDangerItemBgSelected,
|
||||
},
|
||||
},
|
||||
|
||||
@ -129,34 +130,43 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
},
|
||||
|
||||
[`&${componentCls}-submenu > ${componentCls}`]: {
|
||||
backgroundColor: themeColorBg,
|
||||
backgroundColor: colorItemBg,
|
||||
},
|
||||
|
||||
[`&${componentCls}-popup > ${componentCls}`]: {
|
||||
backgroundColor: themeColorBg,
|
||||
backgroundColor: colorItemBg,
|
||||
},
|
||||
|
||||
// ====================== Horizontal ======================
|
||||
[`&${componentCls}-horizontal`]: {
|
||||
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
|
||||
top: themeInkBorderSize,
|
||||
marginTop: -themeInkBorderSize,
|
||||
top: colorActiveBarBorderSize,
|
||||
marginTop: -colorActiveBarBorderSize,
|
||||
marginBottom: 0,
|
||||
borderRadius: token.radiusItem,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
insetInline: menuItemPaddingInline,
|
||||
bottom: 0,
|
||||
borderBottom: `${themeInkBarHeight}px solid transparent`,
|
||||
borderBottom: `${colorActiveBarHeight}px solid transparent`,
|
||||
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
[`&:hover, &-active, &-open, &-selected`]: {
|
||||
color: themeColorTextSelect,
|
||||
|
||||
[`&:hover, &-active, &-open`]: {
|
||||
color: colorItemTextSelected,
|
||||
'&::after': {
|
||||
borderBottomColor: themeColorTextSelect,
|
||||
borderWidth: `${colorActiveBarHeight}px`,
|
||||
borderBottomColor: colorItemTextSelected,
|
||||
},
|
||||
},
|
||||
[`&-selected`]: {
|
||||
color: colorItemTextSelected,
|
||||
backgroundColor: colorItemBgSelectedHorizontal,
|
||||
'&::after': {
|
||||
borderWidth: `${colorActiveBarHeight}px`,
|
||||
borderBottomColor: colorItemTextSelected,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -166,7 +176,7 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
//
|
||||
[`&${componentCls}-root`]: {
|
||||
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
|
||||
borderInlineEnd: `${themeInkBorderSize}px ${lineType} ${colorBorderSecondary}`,
|
||||
borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorBorderSecondary}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -174,13 +184,13 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
[`&${componentCls}-inline`]: {
|
||||
// Sub
|
||||
[`${componentCls}-sub${componentCls}-inline`]: {
|
||||
background: themeColorBgSecondary,
|
||||
background: colorSubItemBg,
|
||||
},
|
||||
|
||||
// Item
|
||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: themeInkBorderSize
|
||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize
|
||||
? {
|
||||
width: `calc(100% + ${themeInkBorderSize}px)`,
|
||||
width: `calc(100% + ${colorActiveBarBorderSize}px)`,
|
||||
}
|
||||
: {},
|
||||
|
||||
@ -191,7 +201,7 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
position: 'absolute',
|
||||
insetBlock: 0,
|
||||
insetInlineEnd: 0,
|
||||
borderInlineEnd: `${themeInkBarWidth}px solid ${themeColorTextSelect}`,
|
||||
borderInlineEnd: `${colorActiveBarWidth}px solid ${colorItemTextSelected}`,
|
||||
transform: 'scaleY(0.0001)',
|
||||
opacity: 0,
|
||||
transition: [
|
||||
@ -204,7 +214,7 @@ const getThemeStyle = (token: MenuThemeToken, themeSuffix: string): CSSInterpola
|
||||
// Danger
|
||||
[`&${componentCls}-item-danger`]: {
|
||||
'&::after': {
|
||||
borderInlineEndColor: themeColorDangerTextSelect,
|
||||
borderInlineEndColor: colorDangerItemTextSelected,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { MenuThemeToken } from '.';
|
||||
import type { MenuToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme';
|
||||
|
||||
const getVerticalInlineStyle: GenerateStyle<MenuThemeToken, CSSObject> = token => {
|
||||
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
|
||||
const { componentCls, menuItemHeight, marginXS, padding, marginXXS, menuArrowSize, fontSize } =
|
||||
token;
|
||||
|
||||
@ -44,7 +44,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuThemeToken, CSSObject> = token =
|
||||
};
|
||||
};
|
||||
|
||||
const getVerticalStyle: GenerateStyle<MenuThemeToken> = token => {
|
||||
const getVerticalStyle: GenerateStyle<MenuToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
|
||||
@ -557,7 +557,7 @@ exports[`Table.filter renders menu correctly 1`] = `
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -699,7 +699,7 @@ exports[`Table.filter renders radio filter correctly 1`] = `
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -982,7 +982,7 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1119,7 +1119,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1475,7 +1475,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -163,7 +163,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3393,7 +3393,7 @@ Array [
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7682,7 +7682,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -8502,7 +8502,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -12005,7 +12005,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -13419,7 +13419,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -13566,7 +13566,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-table-filter-dropdown-submenu"
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-table-filter-dropdown-submenu"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
@ -13927,7 +13927,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -16472,7 +16472,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -16690,7 +16690,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -16908,7 +16908,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17513,7 +17513,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17731,7 +17731,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -17949,7 +17949,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -18554,7 +18554,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -18772,7 +18772,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -18990,7 +18990,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -20452,7 +20452,7 @@ Array [
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -20841,7 +20841,7 @@ Array [
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-dropdown-menu-without-submenu"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-without-submenu"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -22778,7 +22778,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md extend context
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
@ -3,6 +3,7 @@ import classNames from 'classnames';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import type { FieldDataNode } from 'rc-tree';
|
||||
import * as React from 'react';
|
||||
import type { MenuProps } from '../../../menu';
|
||||
import type { FilterState } from '.';
|
||||
import { flattenKeys } from '.';
|
||||
import Button from '../../../button';
|
||||
@ -11,7 +12,6 @@ import Checkbox from '../../../checkbox';
|
||||
import { ConfigContext } from '../../../config-provider/context';
|
||||
import Dropdown from '../../../dropdown';
|
||||
import Empty from '../../../empty';
|
||||
import type { MenuProps } from '../../../menu';
|
||||
import Menu from '../../../menu';
|
||||
import { OverrideProvider } from '../../../menu/OverrideContext';
|
||||
import Radio from '../../../radio';
|
||||
|
||||
@ -51,7 +51,7 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -423,7 +423,7 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -741,7 +741,7 @@ exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1259,7 +1259,7 @@ exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1681,7 +1681,7 @@ exports[`renders ./components/transfer/demo/custom-item.md extend context correc
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -1968,7 +1968,7 @@ exports[`renders ./components/transfer/demo/custom-item.md extend context correc
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2207,7 +2207,7 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend c
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2623,7 +2623,7 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend c
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -2878,7 +2878,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3204,7 +3204,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -3517,7 +3517,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4077,7 +4077,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4456,7 +4456,7 @@ exports[`renders ./components/transfer/demo/search.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -4808,7 +4808,7 @@ exports[`renders ./components/transfer/demo/search.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5120,7 +5120,7 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5406,7 +5406,7 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5646,7 +5646,7 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -5998,7 +5998,7 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -6306,7 +6306,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
@ -7152,7 +7152,7 @@ Array [
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user