mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
feat: Dropdown support menu and dropdownRender (#37885)
This commit is contained in:
JarvisArt
GitHub
parent
f5b16a2e1d
commit
a41e14dfaf
@ -1,6 +1,7 @@
|
||||
import DownOutlined from '@ant-design/icons/DownOutlined';
|
||||
import * as React from 'react';
|
||||
|
||||
import warning from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { DropdownProps } from '../dropdown/dropdown';
|
||||
import Dropdown from '../dropdown/dropdown';
|
||||
@ -9,30 +10,47 @@ export interface BreadcrumbItemProps {
|
||||
prefixCls?: string;
|
||||
separator?: React.ReactNode;
|
||||
href?: string;
|
||||
overlay?: DropdownProps['overlay'];
|
||||
menu?: DropdownProps['menu'];
|
||||
dropdownProps?: DropdownProps;
|
||||
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: DropdownProps['overlay'];
|
||||
}
|
||||
interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
|
||||
__ANT_BREADCRUMB_ITEM: boolean;
|
||||
}
|
||||
const BreadcrumbItem: BreadcrumbItemInterface = ({
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
children,
|
||||
overlay,
|
||||
dropdownProps,
|
||||
...restProps
|
||||
}) => {
|
||||
const BreadcrumbItem: BreadcrumbItemInterface = props => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
children,
|
||||
menu,
|
||||
overlay,
|
||||
dropdownProps,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
||||
|
||||
// Warning for deprecated usage
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
!('overlay' in props),
|
||||
'Breadcrumb.Item',
|
||||
'`overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
}
|
||||
|
||||
/** If overlay is have Wrap a Dropdown */
|
||||
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
|
||||
if (overlay) {
|
||||
if (menu || overlay) {
|
||||
return (
|
||||
<Dropdown overlay={overlay} placement="bottom" {...dropdownProps}>
|
||||
<Dropdown menu={menu} overlay={overlay} placement="bottom" {...dropdownProps}>
|
||||
<span className={`${prefixCls}-overlay-link`}>
|
||||
{breadcrumbItem}
|
||||
<DownOutlined />
|
||||
|
||||
@ -33,6 +33,19 @@ describe('Breadcrumb', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('overlay deprecation warning', () => {
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={<div>menu</div>}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5015
|
||||
it('should allow Breadcrumb.Item is null or undefined', () => {
|
||||
const { asFragment } = render(
|
||||
|
||||
@ -14,39 +14,35 @@ title:
|
||||
Breadcrumbs support drop down menu.
|
||||
|
||||
```tsx
|
||||
import { Breadcrumb, Menu } from 'antd';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
General
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
Layout
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
Navigation
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
General
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
Layout
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
Navigation
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
@ -54,7 +50,7 @@ const App: React.FC = () => (
|
||||
<Breadcrumb.Item>
|
||||
<a href="">Component</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item overlay={menu}>
|
||||
<Breadcrumb.Item menu={{ items }}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Button</Breadcrumb.Item>
|
||||
|
||||
@ -13,6 +13,39 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
|
||||
### Usage upgrade after 4.24.0
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="After version 4.24.0, we provide a simpler usage <Breadcrumb.Item menu={{ items: [...] }}> with better perfermance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// works when >=4.24.0, recommended ✅
|
||||
const items = [
|
||||
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
|
||||
{ label: 'item 2', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>item 1</Menu.Item>
|
||||
<Menu.Item>item 2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Breadcrumb
|
||||
@ -31,14 +64,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
| className | The additional css class | string | - | |
|
||||
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | The menu props | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
|
||||
@ -14,6 +14,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
### 4.24.0 用法升级
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="在 4.24.0 版本后，我们提供了 <Breadcrumb.Item menu={{ items: [...] }}> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// >=4.24.0 可用，推荐的写法 ✅
|
||||
const items = [
|
||||
{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
|
||||
{ label: '菜单项二', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>菜单项一</Menu.Item>
|
||||
<Menu.Item>菜单项二</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Breadcrumb
|
||||
@ -27,19 +60,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------- | ------------------------ | ---------------------------------- | ------ | ------ |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | -------------- | --------- | ------ | ---- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
|
||||
@ -15,38 +15,33 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||
|
||||
```tsx
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = e => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={onMenuClick}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: '1st item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '2nd item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '3rd item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: '1st item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '2nd item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '3rd item',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Button type="primary">primary</Button>
|
||||
<Button>secondary</Button>
|
||||
<Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
|
||||
<Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -279,19 +279,7 @@ describe('ConfigProvider', () => {
|
||||
testPair('Drawer', props => <Drawer {...props} open getContainer={false} />);
|
||||
|
||||
// Dropdown
|
||||
testPair('Dropdown', props => {
|
||||
const menu = (
|
||||
<Menu {...props}>
|
||||
<Menu.Item {...props}>Bamboo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown.Button {...props} overlay={menu}>
|
||||
Light
|
||||
</Dropdown.Button>
|
||||
);
|
||||
});
|
||||
testPair('Dropdown', props => <Dropdown.Button {...props}>Light</Dropdown.Button>);
|
||||
|
||||
// Form
|
||||
testPair('Form', props => (
|
||||
|
||||
@ -312,21 +312,19 @@ const App: React.FC = () => {
|
||||
|
||||
{/* Dropdown */}
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'a danger item',
|
||||
danger: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'a danger item',
|
||||
danger: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
|
||||
@ -3081,6 +3081,594 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/custom-dropdown.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="dropdown-content"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.antgroup.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
1st menu item
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.aliyun.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.luohanacademy.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
style="margin:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="padding:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Click me!
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/deprecated.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.antgroup.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
1st menu item
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile ant-dropdown-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.aliyun.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="https://www.luohanacademy.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
a danger item
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/dropdown-button.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
@ -157,6 +157,86 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/custom-dropdown.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/deprecated.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
@ -47,3 +47,51 @@ exports[`Dropdown rtl render component should be rendered correctly in RTL direc
|
||||
class="ant-dropdown-trigger ant-dropdown-rtl"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Dropdown should render custom dropdown correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-dropdown-trigger ant-dropdown-open"
|
||||
type="button"
|
||||
>
|
||||
button
|
||||
</button>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
data-menu-id="rc-menu-uuid-test-1"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
foo
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-custom-node"
|
||||
>
|
||||
CUSTOM NODE
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import DropdownButton from '../dropdown-button';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Menu from '../../menu';
|
||||
import type { DropdownProps } from '../dropdown';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
@ -34,15 +33,18 @@ describe('DropdownButton', () => {
|
||||
rtlTest(DropdownButton);
|
||||
|
||||
it('pass appropriate props to Dropdown', () => {
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
const props: DropdownProps = {
|
||||
align: {
|
||||
offset: [10, 20],
|
||||
},
|
||||
overlay: (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
),
|
||||
menu: { items },
|
||||
disabled: false,
|
||||
trigger: ['hover'],
|
||||
open: true,
|
||||
@ -55,27 +57,29 @@ describe('DropdownButton', () => {
|
||||
expect(dropdownProps[key]).toBe(props[key]);
|
||||
});
|
||||
|
||||
rerender(<DropdownButton overlay={<div>123</div>} visible />);
|
||||
rerender(<DropdownButton menu={{ items }} visible />);
|
||||
expect(dropdownProps.open).toBe(true);
|
||||
});
|
||||
|
||||
it("don't pass open to Dropdown if it's not exits", () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
render(<DropdownButton overlay={menu} />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
render(<DropdownButton menu={{ items }} />);
|
||||
expect('open' in dropdownProps).toBe(false);
|
||||
});
|
||||
|
||||
it('should support href like Button', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
const { asFragment } = render(<DropdownButton overlay={menu} href="https://ant.design" />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { asFragment } = render(<DropdownButton menu={{ items }} href="https://ant.design" />);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -84,27 +88,29 @@ describe('DropdownButton', () => {
|
||||
});
|
||||
|
||||
it('should pass mouseEnterDelay and mouseLeaveDelay to Dropdown', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
render(<DropdownButton mouseEnterDelay={1} mouseLeaveDelay={2} overlay={menu} />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
render(<DropdownButton mouseEnterDelay={1} mouseLeaveDelay={2} menu={{ items }} />);
|
||||
expect(dropdownProps.mouseEnterDelay).toBe(1);
|
||||
expect(dropdownProps.mouseLeaveDelay).toBe(2);
|
||||
});
|
||||
|
||||
it('should support overlayClassName and overlayStyle', () => {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { container } = render(
|
||||
<DropdownButton
|
||||
overlayClassName="className"
|
||||
overlayStyle={{ color: 'red' }}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
open
|
||||
/>,
|
||||
);
|
||||
@ -113,7 +119,13 @@ describe('DropdownButton', () => {
|
||||
});
|
||||
|
||||
it('should support loading', () => {
|
||||
const { container } = render(<DropdownButton overlay={<div />} loading />);
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const { container } = render(<DropdownButton menu={{ items }} loading />);
|
||||
|
||||
expect(container.querySelector('.ant-dropdown-button .ant-btn-loading')?.classList).toContain(
|
||||
'ant-btn',
|
||||
|
||||
@ -5,7 +5,6 @@ import type { DropDownProps } from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import Menu from '../../menu';
|
||||
|
||||
let triggerProps: TriggerProps;
|
||||
|
||||
@ -24,14 +23,21 @@ jest.mock('rc-trigger', () => {
|
||||
});
|
||||
|
||||
describe('Dropdown', () => {
|
||||
const items = [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
mountTest(() => (
|
||||
<Dropdown overlay={<Menu />}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<span />
|
||||
</Dropdown>
|
||||
));
|
||||
|
||||
rtlTest(() => (
|
||||
<Dropdown overlay={<Menu />}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<span />
|
||||
</Dropdown>
|
||||
));
|
||||
@ -54,17 +60,46 @@ describe('Dropdown', () => {
|
||||
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render custom dropdown correctly', () => {
|
||||
const { asFragment } = render(
|
||||
<Dropdown
|
||||
open
|
||||
menu={{ items }}
|
||||
dropdownRender={menu => (
|
||||
<div>
|
||||
{menu}
|
||||
<div className="dropdown-custom-node">CUSTOM NODE</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<button type="button">button</button>
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('support Menu expandIcon', async () => {
|
||||
jest.useFakeTimers();
|
||||
const props: DropDownProps = {
|
||||
overlay: (
|
||||
<Menu expandIcon={<span id="customExpandIcon" />}>
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
<Menu.SubMenu title="SubMenu">
|
||||
<Menu.Item key="1">foo</Menu.Item>
|
||||
</Menu.SubMenu>
|
||||
</Menu>
|
||||
),
|
||||
menu: {
|
||||
items: [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'SubMenu',
|
||||
key: 'submenu',
|
||||
children: [
|
||||
{
|
||||
label: 'foo',
|
||||
key: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
expandIcon: <span id="customExpandIcon" />,
|
||||
},
|
||||
open: true,
|
||||
getPopupContainer: node => node,
|
||||
};
|
||||
@ -83,10 +118,10 @@ describe('Dropdown', () => {
|
||||
const error = jest.spyOn(console, 'error');
|
||||
render(
|
||||
<div>
|
||||
<Dropdown overlay={'123' as any} placement="bottomCenter">
|
||||
<Dropdown menu={{ items }} placement="bottomCenter">
|
||||
<button type="button">bottomCenter</button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={'123' as any} placement="topCenter">
|
||||
<Dropdown menu={{ items }} placement="topCenter">
|
||||
<button type="button">topCenter</button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
@ -103,7 +138,7 @@ describe('Dropdown', () => {
|
||||
// zombieJ: when replaced with react test lib, it may be mock fully content
|
||||
it('dropdown should support auto adjust placement', () => {
|
||||
render(
|
||||
<Dropdown overlay={<div>menu</div>} open>
|
||||
<Dropdown menu={{ items }} open>
|
||||
<button type="button">button</button>
|
||||
</Dropdown>,
|
||||
);
|
||||
@ -125,22 +160,20 @@ describe('Dropdown', () => {
|
||||
const { container } = render(
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: 'grp',
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
label: '1',
|
||||
key: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: 'grp',
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
label: '1',
|
||||
key: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
@ -174,7 +207,17 @@ describe('Dropdown', () => {
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const { rerender } = render(
|
||||
<Dropdown visible overlay={<div>menu</div>}>
|
||||
<Dropdown
|
||||
visible
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: <div className="bamboo" />,
|
||||
key: 'bamboo',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
@ -182,13 +225,31 @@ describe('Dropdown', () => {
|
||||
'Warning: [antd: Dropdown] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
|
||||
);
|
||||
rerender(
|
||||
<Dropdown onVisibleChange={() => {}} overlay={<div>menu</div>}>
|
||||
<Dropdown
|
||||
onVisibleChange={() => {}}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: <div className="bamboo" />,
|
||||
key: 'bamboo',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Dropdown] `onVisibleChange` is deprecated which will be removed in next major version, please use `onOpenChange` instead.',
|
||||
);
|
||||
rerender(
|
||||
<Dropdown overlay={<div>menu</div>}>
|
||||
<a />
|
||||
</Dropdown>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 箭头指向
|
||||
en-US: Arrow pointing at the center
|
||||
@ -14,59 +14,56 @@ title:
|
||||
By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
<br />
|
||||
<Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
|
||||
<Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</>
|
||||
|
||||
@ -14,59 +14,56 @@ title:
|
||||
You could display an arrow.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Dropdown overlay={menu} placement="bottomLeft" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow>
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottom" arrow>
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight" arrow>
|
||||
<Dropdown menu={{ items }} placement="bottomRight" arrow>
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
<br />
|
||||
<Dropdown overlay={menu} placement="topLeft" arrow>
|
||||
<Dropdown menu={{ items }} placement="topLeft" arrow>
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top" arrow>
|
||||
<Dropdown menu={{ items }} placement="top" arrow>
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight" arrow>
|
||||
<Dropdown menu={{ items }} placement="topRight" arrow>
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</>
|
||||
|
||||
@ -15,50 +15,47 @@ The most basic dropdown menu.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 8
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 右键菜单
|
||||
en-US: Context Menu
|
||||
@ -14,30 +14,27 @@ title:
|
||||
The default trigger mode is `hover`, you can change it to `contextMenu`.
|
||||
|
||||
```tsx
|
||||
import { Dropdown, Menu } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu} trigger={['contextMenu']}>
|
||||
<Dropdown menu={{ items }} trigger={['contextMenu']}>
|
||||
<div
|
||||
className="site-dropdown-context-menu"
|
||||
style={{
|
||||
|
||||
91
components/dropdown/demo/custom-dropdown.md
Normal file
91
components/dropdown/demo/custom-dropdown.md
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 扩展菜单
|
||||
en-US: Custom dropdown
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `dropdownRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容，请直接使用 Popover 组件。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space, Divider, Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown
|
||||
menu={{ items }}
|
||||
dropdownRender={menu => (
|
||||
<div className="dropdown-content">
|
||||
{menu}
|
||||
<Divider style={{ margin: 0 }} />
|
||||
<Space style={{ padding: 8 }}>
|
||||
<Button type="primary">Click me!</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.dropdown-content {
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
|
||||
0 9px 28px 8px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.dropdown-content .ant-dropdown-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .head-example {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
73
components/dropdown/demo/deprecated.md
Normal file
73
components/dropdown/demo/deprecated.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
order: -1
|
||||
title:
|
||||
zh-CN: 基础用法（废弃的语法糖）
|
||||
en-US: Basic usage (deprecated syntactic sugar)
|
||||
version: < 4.24.0
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的下拉菜单。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic dropdown menu.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
icon: <SmileOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 5
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 带下拉框的按钮
|
||||
en-US: Button with dropdown menu
|
||||
@ -16,7 +16,7 @@ A button is on the left, and a related functional menu is on the right. You can
|
||||
```tsx
|
||||
import { DownOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Menu, message, Space, Tooltip } from 'antd';
|
||||
import { Button, Dropdown, message, Space, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
@ -29,42 +29,42 @@ const handleMenuClick: MenuProps['onClick'] = e => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={handleMenuClick}
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
];
|
||||
|
||||
const menuProps = {
|
||||
items,
|
||||
onClick: handleMenuClick,
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space wrap>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
|
||||
<Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
overlay={menu}
|
||||
menu={menuProps}
|
||||
buttonsRender={([leftButton, rightButton]) => [
|
||||
<Tooltip title="tooltip" key="leftButton">
|
||||
{leftButton}
|
||||
@ -74,7 +74,7 @@ const App: React.FC = () => (
|
||||
>
|
||||
With Tooltip
|
||||
</Dropdown.Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={menuProps}>
|
||||
<Button>
|
||||
<Space>
|
||||
Button
|
||||
@ -82,7 +82,7 @@ const App: React.FC = () => (
|
||||
</Space>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Dropdown.Button danger onClick={handleButtonClick} overlay={menu}>
|
||||
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
|
||||
Danger
|
||||
</Dropdown.Button>
|
||||
</Space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 4
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 触发事件
|
||||
en-US: Click event
|
||||
@ -16,35 +16,30 @@ An event will be triggered when you click menu items, in which you can make diff
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, message, Space } from 'antd';
|
||||
import { Dropdown, message, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onClick: MenuProps['onClick'] = ({ key }) => {
|
||||
message.info(`Click on item ${key}`);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
items={[
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '1st menu item',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '2nd menu item',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items, onClick }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me, Click menu item
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 2
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 其他元素
|
||||
en-US: Other elements
|
||||
@ -15,42 +15,39 @@ Divider and disabled menu item.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item（disabled）',
|
||||
key: '3',
|
||||
disabled: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item（disabled）',
|
||||
key: '3',
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 9
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 加载中状态
|
||||
en-US: Loading
|
||||
@ -15,19 +15,16 @@ A loading indicator can be added to a button by setting the `loading` property o
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: 'Submit and continue',
|
||||
key: '1',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: 'Submit and continue',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loadings, setLoadings] = useState<boolean[]>([]);
|
||||
@ -50,16 +47,16 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Dropdown.Button type="primary" loading overlay={menu}>
|
||||
<Dropdown.Button type="primary" loading menu={{ items }}>
|
||||
Submit
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
|
||||
<Dropdown.Button type="primary" size="small" loading menu={{ items }}>
|
||||
Submit
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
type="primary"
|
||||
loading={loadings[0]}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
onClick={() => enterLoading(0)}
|
||||
>
|
||||
Submit
|
||||
@ -67,7 +64,7 @@ const App: React.FC = () => {
|
||||
<Dropdown.Button
|
||||
icon={<DownOutlined />}
|
||||
loading={loadings[1]}
|
||||
overlay={menu}
|
||||
menu={{ items }}
|
||||
onClick={() => enterLoading(1)}
|
||||
>
|
||||
Submit
|
||||
|
||||
@ -21,7 +21,7 @@ This demo was created for debugging Menu styles inside Dropdown.
|
||||
```tsx
|
||||
import { AppstoreOutlined, DownOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
@ -69,10 +69,14 @@ const items: MenuItem[] = [
|
||||
null as any,
|
||||
];
|
||||
|
||||
const menu = <Menu selectedKeys={['1']} openKeys={['sub1']} items={items} />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectedKeys: ['1'],
|
||||
openKeys: ['sub1'],
|
||||
}}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover to check menu style
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 7
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 菜单隐藏方式
|
||||
en-US: The way of hiding menu.
|
||||
@ -16,7 +16,7 @@ The default is to close the menu when you click on menu items, this feature can
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
@ -32,28 +32,30 @@ const App: React.FC = () => {
|
||||
setOpen(flag);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={handleMenuClick}
|
||||
items={[
|
||||
{
|
||||
label: 'Clicking me will not close the menu.',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will not close the menu also.',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will close the menu.',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: 'Clicking me will not close the menu.',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will not close the menu also.',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: 'Clicking me will close the menu.',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Dropdown overlay={menu} onOpenChange={handleOpenChange} open={open}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
onClick: handleMenuClick,
|
||||
}}
|
||||
onOpenChange={handleOpenChange}
|
||||
open={open}
|
||||
>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Hover me
|
||||
|
||||
@ -14,61 +14,58 @@ title:
|
||||
Support 6 placements.
|
||||
|
||||
```tsx
|
||||
import { Button, Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Dropdown overlay={menu} placement="bottomLeft">
|
||||
<Dropdown menu={{ items }} placement="bottomLeft">
|
||||
<Button>bottomLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottom">
|
||||
<Dropdown menu={{ items }} placement="bottom">
|
||||
<Button>bottom</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="bottomRight">
|
||||
<Dropdown menu={{ items }} placement="bottomRight">
|
||||
<Button>bottomRight</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Dropdown overlay={menu} placement="topLeft">
|
||||
<Dropdown menu={{ items }} placement="topLeft">
|
||||
<Button>topLeft</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="top">
|
||||
<Dropdown menu={{ items }} placement="top">
|
||||
<Button>top</Button>
|
||||
</Dropdown>
|
||||
<Dropdown overlay={menu} placement="topRight">
|
||||
<Dropdown menu={{ items }} placement="topRight">
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 10
|
||||
order: 13
|
||||
title:
|
||||
zh-CN: 菜单可选选择
|
||||
en-US: Selectable Menu
|
||||
@ -7,40 +7,41 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
为 Menu 添加 `selectable` 属性可以开启选择能力。
|
||||
添加 `menu` 中的 `selectable` 属性可以开启选择能力。
|
||||
|
||||
## en-US
|
||||
|
||||
Config Menu `selectable` prop to enable selectable ability.
|
||||
Configure the `selectable` property in `menu` to enable selectable ability.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space, Typography } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
selectable
|
||||
defaultSelectedKeys={['3']}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: 'Item 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Item 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Item 3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Item 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Item 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Item 3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: ['3'],
|
||||
}}
|
||||
>
|
||||
<Typography.Link>
|
||||
<Space>
|
||||
Selectable
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 6
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 多级菜单
|
||||
en-US: Cascading menu
|
||||
@ -15,62 +15,59 @@ The menu has multiple levels.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
type: 'group',
|
||||
label: 'Group title',
|
||||
children: [
|
||||
{
|
||||
key: '1',
|
||||
type: 'group',
|
||||
label: 'Group title',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
label: '2nd menu item',
|
||||
},
|
||||
],
|
||||
key: '1-1',
|
||||
label: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'sub menu',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
label: '3rd menu item',
|
||||
},
|
||||
{
|
||||
key: '2-2',
|
||||
label: '4th menu item',
|
||||
},
|
||||
],
|
||||
key: '1-2',
|
||||
label: '2nd menu item',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'sub menu',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
label: '3rd menu item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'disabled sub menu',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
key: '3-1',
|
||||
label: '5d menu item',
|
||||
},
|
||||
{
|
||||
key: '3-2',
|
||||
label: '6th menu item',
|
||||
},
|
||||
],
|
||||
key: '2-2',
|
||||
label: '4th menu item',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'disabled sub menu',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
key: '3-1',
|
||||
label: '5d menu item',
|
||||
},
|
||||
{
|
||||
key: '3-2',
|
||||
label: '6th menu item',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Cascading menu
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 触发方式
|
||||
en-US: Trigger mode
|
||||
@ -15,33 +15,30 @@ The default trigger mode is `hover`, you can change it to `click`.
|
||||
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Menu, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
Click me
|
||||
|
||||
@ -49,6 +49,9 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
htmlType,
|
||||
children,
|
||||
className,
|
||||
menu,
|
||||
arrow,
|
||||
autoFocus,
|
||||
overlay,
|
||||
trigger,
|
||||
align,
|
||||
@ -72,6 +75,9 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
|
||||
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
||||
const dropdownProps: DropdownProps = {
|
||||
menu,
|
||||
arrow,
|
||||
autoFocus,
|
||||
align,
|
||||
overlay,
|
||||
disabled,
|
||||
@ -83,7 +89,7 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
overlayClassName,
|
||||
overlayStyle,
|
||||
destroyPopupOnHide,
|
||||
} as DropdownProps;
|
||||
};
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
const classes = classNames(prefixCls, compactItemClassnames, className);
|
||||
|
||||
@ -4,6 +4,8 @@ import RcDropdown from 'rc-dropdown';
|
||||
import useEvent from 'rc-util/lib/hooks/useEvent';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import * as React from 'react';
|
||||
import Menu from '../menu';
|
||||
import type { MenuProps } from '../menu';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { OverrideProvider } from '../menu/OverrideContext';
|
||||
import getPlacements from '../_util/placements';
|
||||
@ -45,21 +47,12 @@ export type DropdownArrowOptions = {
|
||||
};
|
||||
|
||||
export interface DropdownProps {
|
||||
menu?: MenuProps;
|
||||
autoFocus?: boolean;
|
||||
arrow?: boolean | DropdownArrowOptions;
|
||||
trigger?: ('click' | 'hover' | 'contextMenu')[];
|
||||
overlay: React.ReactElement | OverlayFunc;
|
||||
/**
|
||||
* @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
|
||||
* use `onOpenChange` instead.
|
||||
*/
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
/**
|
||||
* @deprecated `visible` is deprecated which will be removed in next major version. Please use
|
||||
* `open` instead.
|
||||
*/
|
||||
visible?: boolean;
|
||||
open?: boolean;
|
||||
disabled?: boolean;
|
||||
destroyPopupOnHide?: boolean;
|
||||
@ -76,6 +69,14 @@ export interface DropdownProps {
|
||||
mouseLeaveDelay?: number;
|
||||
openClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: React.ReactElement | OverlayFunc;
|
||||
/** @deprecated Please use `open` instead */
|
||||
visible?: boolean;
|
||||
/** @deprecated Please use `onOpenChange` instead */
|
||||
onVisibleChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
interface DropdownInterface extends React.FC<DropdownProps> {
|
||||
@ -101,6 +102,12 @@ const Dropdown: DropdownInterface = props => {
|
||||
`\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
|
||||
);
|
||||
});
|
||||
|
||||
warning(
|
||||
!('overlay' in props),
|
||||
'Dropdown',
|
||||
'`overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
}
|
||||
|
||||
const getTransitionName = () => {
|
||||
@ -135,11 +142,13 @@ const Dropdown: DropdownInterface = props => {
|
||||
};
|
||||
|
||||
const {
|
||||
menu,
|
||||
arrow,
|
||||
prefixCls: customizePrefixCls,
|
||||
children,
|
||||
trigger,
|
||||
disabled,
|
||||
dropdownRender,
|
||||
getPopupContainer,
|
||||
overlayClassName,
|
||||
visible,
|
||||
@ -201,11 +210,16 @@ const Dropdown: DropdownInterface = props => {
|
||||
const { overlay } = props;
|
||||
|
||||
let overlayNode: React.ReactNode;
|
||||
if (typeof overlay === 'function') {
|
||||
overlayNode = overlay();
|
||||
if (menu?.items) {
|
||||
overlayNode = <Menu {...menu} />;
|
||||
} else if (typeof overlay === 'function') {
|
||||
overlayNode = (overlay as OverlayFunc)();
|
||||
} else {
|
||||
overlayNode = overlay;
|
||||
}
|
||||
if (dropdownRender) {
|
||||
overlayNode = dropdownRender(overlayNode);
|
||||
}
|
||||
overlayNode = React.Children.only(
|
||||
typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
|
||||
);
|
||||
|
||||
@ -11,6 +11,39 @@ A dropdown list.
|
||||
|
||||
When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
|
||||
|
||||
### Usage upgrade after 4.24.0
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="After version 4.24.0, we provide a simpler usage <Dropdown menu={{ items: [...] }} /> with better perfermance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// works when >=4.24.0, recommended ✅
|
||||
const items = [
|
||||
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
|
||||
{ label: 'item 2', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>item 1</Menu.Item>
|
||||
<Menu.Item>item 2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Dropdown
|
||||
@ -21,8 +54,9 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
| autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||
| destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
|
||||
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | The menu props | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| overlayClassName | The class name of the dropdown root element | string | - | |
|
||||
| overlayStyle | The style of the dropdown root element | CSSProperties | - | |
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
@ -30,26 +64,16 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
| open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
|
||||
> Warning: You must set a unique `key` for `Menu.Item`.
|
||||
>
|
||||
> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
Same props from Dropdown. And includes additional props:
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - | |
|
||||
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| danger | Set the danger status of button | boolean | - | 4.23.0 |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||
| icon | Icon (appears on the right) | ReactNode | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) | - | |
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomRight` | |
|
||||
| size | Size of the button, the same as [Button](/components/button/#API) | string | `default` | |
|
||||
| trigger | The trigger mode which executes the dropdown action | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| type | Type of the button, the same as [Button](/components/button/#API) | string | `default` | |
|
||||
| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
|
||||
| onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - | |
|
||||
| onOpenChange | Called when the open state is changed | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
@ -15,6 +15,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
- 用于收罗一组命令操作。
|
||||
- Select 用于选择，而 Dropdown 是命令集合。
|
||||
|
||||
### 4.24.0 用法升级
|
||||
|
||||
```__react
|
||||
import Alert from '../alert';
|
||||
ReactDOM.render(<Alert message="在 4.24.0 版本后，我们提供了 <Dropdown menu={{ items: [...] }} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
|
||||
```
|
||||
|
||||
```jsx
|
||||
// >=4.24.0 可用，推荐的写法 ✅
|
||||
const items = [
|
||||
{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
|
||||
{ label: '菜单项二', key: 'item-2' },
|
||||
];
|
||||
return (
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻♀️
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>菜单项一</Menu.Item>
|
||||
<Menu.Item>菜单项二</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a>Hover me</a>
|
||||
</Dropdown>
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
属性如下
|
||||
@ -25,8 +58,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
|
||||
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
||||
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
||||
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
@ -34,26 +68,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#why-open)） | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
|
||||
|
||||
> 注意： Menu.Item 必须设置唯一的 key 属性。
|
||||
>
|
||||
> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`。
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
属性与 Dropdown 的相同。还包含以下属性：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| icon | 右侧的 icon | ReactNode | - | |
|
||||
| overlay | 菜单 | [Menu](/components/menu/) | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomRight` | |
|
||||
| size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` | |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` | |
|
||||
| open | 菜单是否显示 | boolean | - | 4.23.0 |
|
||||
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - | |
|
||||
| onOpenChange | 菜单显示状态改变时调用 | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
@ -15,44 +15,40 @@ Show all props provided by PageHeader.
|
||||
|
||||
```tsx
|
||||
import { MoreOutlined } from '@ant-design/icons';
|
||||
import { Button, Dropdown, Menu, PageHeader, Row, Tag, Typography } from 'antd';
|
||||
import { Button, Dropdown, PageHeader, Row, Tag, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||
2nd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||
3rd menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const DropdownMenu = () => (
|
||||
<Dropdown key="more" overlay={menu} placement="bottomRight">
|
||||
<Dropdown key="more" menu={{ items }} placement="bottomRight">
|
||||
<Button type="text" icon={<MoreOutlined style={{ fontSize: 20 }} />} />
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -17,7 +17,7 @@ To see if bordered style applied to other tables.
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
import { Badge, Dropdown, Form, Menu, Space, Switch, Table } from 'antd';
|
||||
import { Badge, Dropdown, Form, Space, Switch, Table } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface DataType {
|
||||
@ -37,14 +37,10 @@ interface ExpandedDataType {
|
||||
upgradeNum: string;
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{ key: '1', label: 'Action 1' },
|
||||
{ key: '2', label: 'Action 2' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{ key: '1', label: 'Action 1' },
|
||||
{ key: '2', label: 'Action 2' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const createExpandedRowRender = (bordered: boolean) => () => {
|
||||
@ -70,7 +66,7 @@ const App: React.FC = () => {
|
||||
<Space size="middle">
|
||||
<a>Pause</a>
|
||||
<a>Stop</a>
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>
|
||||
More <DownOutlined />
|
||||
</a>
|
||||
|
||||
@ -16,7 +16,7 @@ Showing more detailed info of every row.
|
||||
```tsx
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
import { Badge, Dropdown, Menu, Space, Table } from 'antd';
|
||||
import { Badge, Dropdown, Space, Table } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
interface DataType {
|
||||
@ -36,14 +36,10 @@ interface ExpandedDataType {
|
||||
upgradeNum: string;
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
items={[
|
||||
{ key: '1', label: 'Action 1' },
|
||||
{ key: '2', label: 'Action 2' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items = [
|
||||
{ key: '1', label: 'Action 1' },
|
||||
{ key: '2', label: 'Action 2' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const expandedRowRender = () => {
|
||||
@ -69,7 +65,7 @@ const App: React.FC = () => {
|
||||
<Space size="middle">
|
||||
<a>Pause</a>
|
||||
<a>Stop</a>
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown menu={{ items }}>
|
||||
<a>
|
||||
More <DownOutlined />
|
||||
</a>
|
||||
|
||||
@ -457,7 +457,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
dropdownContent = <OverrideProvider selectable={undefined}>{dropdownContent}</OverrideProvider>;
|
||||
}
|
||||
|
||||
const menu = (
|
||||
const menu = () => (
|
||||
<FilterDropdownMenuWrapper className={`${prefixCls}-dropdown`}>
|
||||
{dropdownContent}
|
||||
</FilterDropdownMenuWrapper>
|
||||
@ -478,7 +478,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
<div className={`${prefixCls}-column`}>
|
||||
<span className={`${tablePrefixCls}-column-title`}>{children}</span>
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
dropdownRender={menu}
|
||||
trigger={['click']}
|
||||
open={mergedVisible}
|
||||
onOpenChange={onVisibleChange}
|
||||
|
||||
@ -11,7 +11,6 @@ import { useCallback, useMemo, useState } from 'react';
|
||||
import type { CheckboxProps } from '../../checkbox';
|
||||
import Checkbox from '../../checkbox';
|
||||
import Dropdown from '../../dropdown';
|
||||
import Menu from '../../menu';
|
||||
import Radio from '../../radio';
|
||||
import warning from '../../_util/warning';
|
||||
import type {
|
||||
@ -410,25 +409,23 @@ export default function useSelection<RecordType>(
|
||||
if (selectionType !== 'radio') {
|
||||
let customizeSelections: React.ReactNode;
|
||||
if (mergedSelections) {
|
||||
const menu = (
|
||||
<Menu
|
||||
getPopupContainer={getPopupContainer}
|
||||
items={mergedSelections.map((selection, index) => {
|
||||
const { key, text, onSelect: onSelectionClick } = selection;
|
||||
const menu = {
|
||||
getPopupContainer,
|
||||
items: mergedSelections.map((selection, index) => {
|
||||
const { key, text, onSelect: onSelectionClick } = selection;
|
||||
|
||||
return {
|
||||
key: key || index,
|
||||
onClick: () => {
|
||||
onSelectionClick?.(recordKeys);
|
||||
},
|
||||
label: text,
|
||||
};
|
||||
})}
|
||||
/>
|
||||
);
|
||||
return {
|
||||
key: key || index,
|
||||
onClick: () => {
|
||||
onSelectionClick?.(recordKeys);
|
||||
},
|
||||
label: text,
|
||||
};
|
||||
}),
|
||||
};
|
||||
customizeSelections = (
|
||||
<div className={`${prefixCls}-selection-extra`}>
|
||||
<Dropdown overlay={menu} getPopupContainer={getPopupContainer}>
|
||||
<Dropdown menu={menu} getPopupContainer={getPopupContainer}>
|
||||
<span>
|
||||
<DownOutlined />
|
||||
</span>
|
||||
|
||||
@ -4,7 +4,7 @@ import omit from 'rc-util/lib/omit';
|
||||
import * as React from 'react';
|
||||
import Checkbox from '../checkbox';
|
||||
import Dropdown from '../dropdown';
|
||||
import Menu from '../menu';
|
||||
import type { MenuProps } from '../menu';
|
||||
import { isValidElement } from '../_util/reactNode';
|
||||
import type {
|
||||
KeyWiseTransferItem,
|
||||
@ -358,9 +358,9 @@ export default class TransferList<
|
||||
!pagination &&
|
||||
this.getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls });
|
||||
|
||||
let menu: React.ReactElement | null = null;
|
||||
let items: MenuProps['items'];
|
||||
if (showRemove) {
|
||||
const items = [
|
||||
items = [
|
||||
/* Remove Current Page */
|
||||
pagination
|
||||
? {
|
||||
@ -384,10 +384,8 @@ export default class TransferList<
|
||||
label: removeAll,
|
||||
},
|
||||
].filter(item => item);
|
||||
|
||||
menu = <Menu items={items} />;
|
||||
} else {
|
||||
const items = [
|
||||
items = [
|
||||
{
|
||||
key: 'selectAll',
|
||||
onClick: () => {
|
||||
@ -437,12 +435,10 @@ export default class TransferList<
|
||||
label: selectInvert,
|
||||
},
|
||||
];
|
||||
|
||||
menu = <Menu items={items} />;
|
||||
}
|
||||
|
||||
const dropdown = (
|
||||
<Dropdown className={`${prefixCls}-header-dropdown`} overlay={menu} disabled={disabled}>
|
||||
<Dropdown className={`${prefixCls}-header-dropdown`} menu={{ items }} disabled={disabled}>
|
||||
<DownOutlined />
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -7,7 +7,6 @@ import '../../checkbox/style';
|
||||
import '../../dropdown/style';
|
||||
import '../../empty/style';
|
||||
import '../../input/style';
|
||||
import '../../menu/style';
|
||||
import '../../pagination/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
|
||||
@ -297,17 +297,15 @@ class MainContent extends Component {
|
||||
const {
|
||||
intl: { formatMessage },
|
||||
} = this.props;
|
||||
return (
|
||||
<Menu onClick={({ key }) => this.changeThemeMode(key)} selectedKeys={[theme]}>
|
||||
{[
|
||||
{ type: 'default', text: formatMessage({ id: 'app.theme.switch.default' }) },
|
||||
{ type: 'dark', text: formatMessage({ id: 'app.theme.switch.dark' }) },
|
||||
{ type: 'compact', text: formatMessage({ id: 'app.theme.switch.compact' }) },
|
||||
].map(({ type, text }) => (
|
||||
<Menu.Item key={type}>{text}</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
return {
|
||||
onClick: ({ key }) => this.changeThemeMode(key),
|
||||
selectedKeys: [theme],
|
||||
items: [
|
||||
{ key: 'default', label: formatMessage({ id: 'app.theme.switch.default' }) },
|
||||
{ key: 'dark', label: formatMessage({ id: 'app.theme.switch.dark' }) },
|
||||
{ key: 'compact', label: formatMessage({ id: 'app.theme.switch.compact' }) },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
flattenMenu(menu) {
|
||||
@ -553,7 +551,7 @@ class MainContent extends Component {
|
||||
</section>
|
||||
{componentPage && (
|
||||
<div className="fixed-widgets">
|
||||
<Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
|
||||
<Dropdown menu={this.getThemeSwitchMenu()} placement="top">
|
||||
<Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Dropdown, Menu, Button } from 'antd';
|
||||
import { Dropdown, Button } from 'antd';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { SharedProps } from './interface';
|
||||
@ -84,10 +84,9 @@ export function getEcosystemGroup(): Exclude<MenuProps['items'], undefined> {
|
||||
}
|
||||
|
||||
export default (props: SharedProps) => {
|
||||
const menu = <Menu items={getEcosystemGroup()} />;
|
||||
const downstyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
|
||||
return (
|
||||
<Dropdown overlay={menu} placement="bottomRight">
|
||||
<Dropdown menu={{ items: getEcosystemGroup() }} placement="bottomRight">
|
||||
<Button size="small" className="header-button">
|
||||
<FormattedMessage id="app.header.menu.more" />
|
||||
<DownOutlined
|
||||
|
||||
Loading…
Reference in New Issue
Block a user