mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Merge branch 'feature' into next-merge-feature

Browse Source
This commit is contained in:
MadCcc 2022-03-29 14:55:39 +08:00
commit c84a7aa7ec
13 changed files with 604 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -754,7 +754,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1035,7 +1035,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -1151,7 +1151,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1249,7 +1249,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -1365,7 +1365,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1472,7 +1472,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:20%"
>
<div
@ -1588,7 +1588,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"

16
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -332,7 +332,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -388,7 +388,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -525,7 +525,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -581,7 +581,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -665,7 +665,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -721,7 +721,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -814,7 +814,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:20%"
>
<div
@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"

308
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -864,6 +864,314 @@ exports[`Cascader can be selected in RTL direction 3`] = `
</div>
`;
exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
<span
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
 
</span>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
</div>
<div>
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
<span
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
 
</span>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
</div>
<div>
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Cascader popup correctly with defaultValue 1`] = `
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"

131
components/cascader/__tests__/index.test.js
View File

@ -8,6 +8,8 @@ import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
const { SHOW_CHILD, SHOW_PARENT } = Cascader;
function toggleOpen(wrapper) {
wrapper.find('.ant-select-selector').simulate('mousedown');
}
@ -525,5 +527,134 @@ describe('Cascader', () => {
errorSpy.mockRestore();
});
it('should support showCheckedStrategy child', () => {
const multipleOptions = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'donghu',
label: 'East Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
let selectedValue;
const onChange = function onChange(value) {
selectedValue = value;
};
const wrapper = mount(
<Cascader
options={multipleOptions}
onChange={onChange}
multiple
showCheckedStrategy={SHOW_CHILD}
/>,
);
toggleOpen(wrapper);
expect(wrapper.render()).toMatchSnapshot();
clickOption(wrapper, 0, 0);
clickOption(wrapper, 1, 0);
clickOption(wrapper, 2, 0);
clickOption(wrapper, 2, 1);
expect(selectedValue[0].join(',')).toBe('zhejiang,hangzhou,xihu');
expect(selectedValue[1].join(',')).toBe('zhejiang,hangzhou,donghu');
expect(selectedValue.join(',')).toBe('zhejiang,hangzhou,xihu,zhejiang,hangzhou,donghu');
});
it('should support showCheckedStrategy parent', () => {
const multipleOptions = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'donghu',
label: 'East Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
let selectedValue;
const onChange = function onChange(value) {
selectedValue = value;
};
const wrapper = mount(
<Cascader
options={multipleOptions}
onChange={onChange}
multiple
showCheckedStrategy={SHOW_PARENT}
/>,
);
toggleOpen(wrapper);
expect(wrapper.render()).toMatchSnapshot();
clickOption(wrapper, 0, 0);
clickOption(wrapper, 1, 0);
clickOption(wrapper, 2, 0);
clickOption(wrapper, 2, 1);
expect(selectedValue.length).toBe(1);
expect(selectedValue.join(',')).toBe('zhejiang');
});
});
});

90
components/cascader/demo/showCheckedStrategy.md Normal file
View File

@ -0,0 +1,90 @@
---
order: 5.1
version: 4.20.0
title:
zh-CN: 自定义回填方式
en-US: ShowCheckedStrategy
---
## zh-CN
通过设置 `ShowCheckedStrategy` 选择回填方式。
## en-US
The way show selected item in box using `ShowCheckedStrategy`.
```jsx
import { Cascader } from 'antd';
const { SHOW_CHILD } = Cascader;
const options = [
{
label: 'Light',
value: 'light',
children: new Array(20)
.fill(null)
.map((_, index) => ({ label: `Number ${index}`, value: index })),
},
{
label: 'Bamboo',
value: 'bamboo',
children: [
{
label: 'Little',
value: 'little',
children: [
{
label: 'Toy Fish',
value: 'fish',
},
{
label: 'Toy Cards',
value: 'cards',
},
{
label: 'Toy Bird',
value: 'bird',
},
],
},
],
},
];
const App = () => {
const onChange = value => {
console.log(value);
};
return (
<>
<Cascader
style={{ width: '100%' }}
options={options}
onChange={onChange}
multiple
maxTagCount="responsive"
showCheckedStrategy={SHOW_CHILD}
defaultValue={[
['bamboo', 'little', 'fish'],
['bamboo', 'little', 'cards'],
['bamboo', 'little', 'bird'],
]}
/>
<br />
<br />
<Cascader
style={{ width: '100%' }}
options={options}
onChange={onChange}
multiple
maxTagCount="responsive"
defaultValue={['bamboo']}
/>
</>
);
};
ReactDOM.render(<App />, mountNode);
```

1
components/cascader/index.en-US.md
View File

@ -55,6 +55,7 @@ Cascade selection box.
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
| multiple | Support multiple or not | boolean | - | 4.17.0 |
| removeIcon | The custom remove icon | ReactNode | - | |
| showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
| dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | |

8
components/cascader/index.tsx
View File

@ -36,6 +36,8 @@ export type FieldNamesType = FieldNames;
export type FilledFieldNamesType = Required<FieldNamesType>;
const { SHOW_CHILD, SHOW_PARENT } = RcCascader;
function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined) {
const cells = str
.toLowerCase()
@ -300,12 +302,16 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
);
return wrapCascaderSSR(wrapSelectSSR(renderNode));
}) as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
}) as unknown as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
props: React.PropsWithChildren<CascaderProps<OptionType>> & { ref?: React.Ref<CascaderRef> },
) => React.ReactElement) & {
displayName: string;
SHOW_PARENT: typeof SHOW_PARENT;
SHOW_CHILD: typeof SHOW_CHILD;
};
Cascader.displayName = 'Cascader';
Cascader.SHOW_PARENT = SHOW_PARENT;
Cascader.SHOW_CHILD = SHOW_CHILD;
export default Cascader;

1
components/cascader/index.zh-CN.md
View File

@ -55,6 +55,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
| multiple | 支持多选节点 | boolean | - | 4.17.0 |
| showCheckedStrategy | 定义选中项回填的方式。`Cascader.SHOW_CHILD`: 只显示选中的子节点。`Cascader.SHOW_PARENT`: 只显示父节点（当父节点下所有子节点都选中时）。 | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 4.17.0 |
| onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | 4.17.0 |

3
components/dropdown/style/index.less
View File

@ -221,7 +221,8 @@
background-color: @dropdown-selected-bg;
}
&:hover {
&:hover,
&&-active {
background-color: @item-hover-bg;
}

16
components/input/Group.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import { useContext } from 'react';
import { useContext, useMemo } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
import { FormItemInputContext } from '../form/context';
export interface GroupProps {
className?: string;
@ -35,6 +36,15 @@ const Group: React.FC<GroupProps> = props => {
className,
);
const formItemContext = useContext(FormItemInputContext);
const groupFormItemContext = useMemo(
() => ({
...formItemContext,
isFormItemInput: false,
}),
[formItemContext],
);
return wrapSSR(
<span
className={cls}
@ -44,7 +54,9 @@ const Group: React.FC<GroupProps> = props => {
onFocus={props.onFocus}
onBlur={props.onBlur}
>
{props.children}
<FormItemInputContext.Provider value={groupFormItemContext}>
{props.children}
</FormItemInputContext.Provider>
</span>,
);
};

12
components/menu/__tests__/index.test.js
View File

@ -871,4 +871,16 @@ describe('Menu', () => {
expect(wrapper.find('li.ant-menu-item-divider').length).toBe(2);
expect(wrapper.find('li.ant-menu-item-divider-dashed').length).toBe(1);
});
it('should support ref', async () => {
const ref = React.createRef();
const wrapper = mount(
<Menu ref={ref}>
<SubMenu key="sub1" title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
</SubMenu>
</Menu>,
);
expect(ref.current?.menu?.list).toBe(wrapper.find('ul').first().getDOMNode());
});
});

24
components/menu/index.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
import RcMenu, { ItemGroup, MenuProps as RcMenuProps, MenuRef } from 'rc-menu';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
import { forwardRef } from 'react';
import SubMenu, { SubMenuProps } from './SubMenu';
import Item, { MenuItemProps } from './MenuItem';
import { ConfigContext } from '../config-provider';
@ -40,7 +41,7 @@ type InternalMenuProps = MenuProps &
collapsedWidth?: string | number;
};
function InternalMenu(props: InternalMenuProps) {
const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
@ -129,12 +130,13 @@ function InternalMenu(props: InternalMenuProps) {
expandIcon={cloneElement(expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
})}
ref={ref}
>
{mergedChildren}
</RcMenu>
</MenuContext.Provider>
);
}
});
// We should keep this as ref-able
class Menu extends React.Component<MenuProps, {}> {
@ -146,10 +148,24 @@ class Menu extends React.Component<MenuProps, {}> {
static ItemGroup = ItemGroup;
menu: MenuRef | null;
focus = (options?: FocusOptions) => {
this.menu?.focus(options);
};
render() {
return (
<SiderContext.Consumer>
{(context: SiderContextProps) => <InternalMenu {...this.props} {...context} />}
{(context: SiderContextProps) => (
<InternalMenu
ref={node => {
this.menu = node;
}}
{...this.props}
{...context}
/>
)}
</SiderContext.Consumer>
);
}

4
package.json
View File

@ -128,7 +128,7 @@
"rc-collapse": "~3.1.0",
"rc-dialog": "~8.7.0",
"rc-drawer": "~4.4.2",
"rc-dropdown": "~3.3.2",
"rc-dropdown": "~3.4.0",
"rc-field-form": "~1.24.0",
"rc-image": "~5.3.0",
"rc-input": "~0.0.1-alpha.5",
@ -147,7 +147,7 @@
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.24.0",
"rc-tabs": "~11.11.0",
"rc-tabs": "~11.12.0",
"rc-textarea": "~0.3.0",
"rc-tooltip": "~5.1.1",
"rc-tree": "~5.5.0",