mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
feat: Add ability to overwrite Menu theme at Menu.SubMenu level. (#33971)
* Add theme support to Menu.SubMenu
* Tidy up docs
* Tidy up docs
* Update components/menu/index.en-US.md
* Update components/menu/index.en-US.md
Co-authored-by: Amumu <yoyo837@hotmail.com>
* Add Chinese lang docs
* Extend menu theme demo to additionally demonstrate Sub-menu theming
* Add submenu theme demo
* Revert "Extend menu theme demo to additionally demonstrate Sub-menu theming"
This reverts commit 642a2b5b72.
* Add tests
* Correct typo
* Make demo vertical so absolutely positioned popover doesn't overflow
* Make demo functional component
* Update components/menu/index.en-US.md
Co-authored-by: afc163 <afc163@gmail.com>
* Update components/menu/index.zh-CN.md
Co-authored-by: Amumu <yoyo837@hotmail.com>
* Update components/menu/demo/submenu-theme.md
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
David
GitHub
parent
b53d12db65
commit
2843bd32dd
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import MenuContext from './MenuContext';
|
||||
import MenuContext, { MenuTheme } from './MenuContext';
|
||||
import { isValidElement, cloneElement } from '../_util/reactNode';
|
||||
|
||||
interface TitleEventEntity {
|
||||
@ -23,10 +23,11 @@ export interface SubMenuProps {
|
||||
popupOffset?: [number, number];
|
||||
popupClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
theme?: MenuTheme;
|
||||
}
|
||||
|
||||
function SubMenu(props: SubMenuProps) {
|
||||
const { popupClassName, icon, title } = props;
|
||||
const { popupClassName, icon, title, theme } = props;
|
||||
const context = React.useContext(MenuContext);
|
||||
const { prefixCls, inlineCollapsed, antdMenuTheme } = context;
|
||||
|
||||
@ -71,7 +72,11 @@ function SubMenu(props: SubMenuProps) {
|
||||
<RcSubMenu
|
||||
{...omit(props, ['icon'])}
|
||||
title={titleNode}
|
||||
popupClassName={classNames(prefixCls, `${prefixCls}-${antdMenuTheme}`, popupClassName)}
|
||||
popupClassName={classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${theme || antdMenuTheme}`,
|
||||
popupClassName,
|
||||
)}
|
||||
/>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
|
||||
@ -287,6 +287,32 @@ 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 wrapper = mount(
|
||||
<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();
|
||||
wrapper.update();
|
||||
});
|
||||
|
||||
expect(wrapper.find('ul.ant-menu-root').hasClass('ant-menu-dark')).toBeTruthy();
|
||||
expect(wrapper.find('div.ant-menu-submenu-popup').hasClass('ant-menu-light')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 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
|
||||
|
||||
65
components/menu/demo/submenu-theme.md
Executable file
65
components/menu/demo/submenu-theme.md
Executable file
@ -0,0 +1,65 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 子菜单主题
|
||||
en-US: Sub-menu theme
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
内建了两套主题 `light` 和 `dark`，默认 `light`。
|
||||
|
||||
## en-US
|
||||
|
||||
The Sub-menu will inherit the theme of `Menu`, but you can override this at the `SubMenu` level via the `theme` prop.
|
||||
|
||||
```jsx
|
||||
import { Menu, Switch } from 'antd';
|
||||
import { MailOutlined } from '@ant-design/icons';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
const SubMenuTheme = () => {
|
||||
const [theme, setTheme] = React.useState('light');
|
||||
const [current, setCurrent] = React.useState('1');
|
||||
|
||||
const changeTheme = value => {
|
||||
setTheme(value ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
const handleClick = e => {
|
||||
setCurrent(e.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Switch
|
||||
checked={theme === 'dark'}
|
||||
onChange={changeTheme}
|
||||
checkedChildren="Dark"
|
||||
unCheckedChildren="Light"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Menu
|
||||
onClick={handleClick}
|
||||
style={{ width: 256 }}
|
||||
defaultOpenKeys={['sub1']}
|
||||
selectedKeys={[current]}
|
||||
mode="vertical"
|
||||
theme="dark"
|
||||
>
|
||||
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" theme={theme}>
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<SubMenuTheme />, mountNode);
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 5
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 切换菜单类型
|
||||
en-US: Switch the menu type
|
||||
|
||||
@ -90,7 +90,7 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
### Menu.SubMenu
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| children | Sub-menus or sub-menu items | Array<MenuItem \| SubMenu> | - | |
|
||||
| disabled | Whether sub-menu is disabled | boolean | false | |
|
||||
| icon | Icon of sub menu | ReactNode | - | 4.2.0 |
|
||||
@ -98,6 +98,7 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | |
|
||||
| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - | |
|
||||
| title | Title of sub menu | ReactNode | - | |
|
||||
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | 4.19.0 |
|
||||
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
|
||||
|
||||
### Menu.ItemGroup
|
||||
|
||||
@ -91,7 +91,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
### Menu.SubMenu
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| children | 子菜单的菜单项 | Array<MenuItem \| SubMenu> | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
|
||||
@ -100,6 +100,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
| popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - | |
|
||||
| title | 子菜单项值 | ReactNode | - | |
|
||||
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
||||
| theme | 设置子菜单的主题，默认从 Menu 上继承 | | `light` \| `dark` | - | 4.19.0 |
|
||||
|
||||
### Menu.ItemGroup
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user