Browse Source
* fix: Table customize Menu should be selectable * test: Add test case * test: Update snapshowpull/36104/head
二货机器人
2 years ago
committed by
GitHub
GitHub
8 changed files with 456 additions and 84 deletions
@ -0,0 +1,54 @@ |
|||
--- |
|||
order: 10 |
|||
title: |
|||
zh-CN: 菜单可选选择 |
|||
en-US: Selectable Menu |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
为 Menu 添加 `selectable` 属性可以开启选择能力。 |
|||
|
|||
## en-US |
|||
|
|||
Config Menu `selectable` prop to enable selectable ability. |
|||
|
|||
```tsx |
|||
import { DownOutlined } from '@ant-design/icons'; |
|||
import { Dropdown, Menu, 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 App: React.FC = () => ( |
|||
<Dropdown overlay={menu}> |
|||
<Typography.Link> |
|||
<Space> |
|||
Selectable |
|||
<DownOutlined /> |
|||
</Space> |
|||
</Typography.Link> |
|||
</Dropdown> |
|||
); |
|||
|
|||
export default App; |
|||
``` |
|||
@ -1,16 +0,0 @@ |
|||
import * as React from 'react'; |
|||
import type { MenuProps } from '.'; |
|||
|
|||
// Used for Dropdown only
|
|||
export interface OverrideContextProps { |
|||
prefixCls?: string; |
|||
expandIcon?: React.ReactNode; |
|||
mode?: MenuProps['mode']; |
|||
selectable?: boolean; |
|||
validator?: (menuProps: Pick<MenuProps, 'mode'>) => void; |
|||
} |
|||
|
|||
/** @private Internal Usage. Only used for Dropdown component. Do not use this in your production. */ |
|||
const OverrideContext = React.createContext<OverrideContextProps | null>(null); |
|||
|
|||
export default OverrideContext; |
|||
@ -0,0 +1,41 @@ |
|||
import * as React from 'react'; |
|||
import type { MenuProps } from '.'; |
|||
|
|||
// Used for Dropdown only
|
|||
export interface OverrideContextProps { |
|||
prefixCls?: string; |
|||
expandIcon?: React.ReactNode; |
|||
mode?: MenuProps['mode']; |
|||
selectable?: boolean; |
|||
validator?: (menuProps: Pick<MenuProps, 'mode'>) => void; |
|||
} |
|||
|
|||
/** @private Internal Usage. Only used for Dropdown component. Do not use this in your production. */ |
|||
const OverrideContext = React.createContext<OverrideContextProps | null>(null); |
|||
|
|||
/** @private Internal Usage. Only used for Dropdown component. Do not use this in your production. */ |
|||
export const OverrideProvider = ({ |
|||
children, |
|||
...restProps |
|||
}: OverrideContextProps & { children: React.ReactNode }) => { |
|||
const override = React.useContext(OverrideContext); |
|||
|
|||
const context = React.useMemo( |
|||
() => ({ |
|||
...override, |
|||
...restProps, |
|||
}), |
|||
[ |
|||
override, |
|||
restProps.prefixCls, |
|||
// restProps.expandIcon, Not mark as deps since this is a ReactNode
|
|||
restProps.mode, |
|||
restProps.selectable, |
|||
// restProps.validator, Not mark as deps since this is a function
|
|||
], |
|||
); |
|||
|
|||
return <OverrideContext.Provider value={context}>{children}</OverrideContext.Provider>; |
|||
}; |
|||
|
|||
export default OverrideContext; |
|||
Loading…
Reference in new issue