mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

refactor(Breadcrumb): Support for customized key (#41434)

Browse Source
This commit is contained in:
JiaQi 2023-03-25 14:00:20 +08:00 committed by GitHub
parent 87543e52f1
commit 950f7cf2c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -13,6 +13,7 @@ export interface SeparatorType {
type MenuType = NonNullable<DropdownProps['menu']>;
interface MenuItem {
key?: string;
title?: React.ReactNode;
label?: React.ReactNode;
path?: string;
@ -71,7 +72,7 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
const { items, ...menuProps } = menu! || {};
mergeDropDownProps.menu = {
...menuProps,
items: items?.map(({ title, label, path, ...itemProps }, index) => {
items: items?.map(({ key, title, label, path, ...itemProps }, index) => {
let mergedLabel: React.ReactNode = label ?? title;
if (path) {
@ -80,7 +81,7 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
return {
...itemProps,
key: index,
key: key ?? index,
label: mergedLabel as string,
};
}),

22
components/breadcrumb/__tests__/Breadcrumb.test.tsx
View File

@ -291,6 +291,28 @@ describe('Breadcrumb', () => {
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support Breadcrumb.Item customized menu items key', async () => {
const key = 'test-key';
const { container } = render(
<Breadcrumb>
<Breadcrumb.Item
dropdownProps={{
open: true,
}}
menu={{
items: [{ key }],
}}
>
test-item
</Breadcrumb.Item>
</Breadcrumb>,
);
const item = container.querySelector('.ant-dropdown-menu-item');
expect(item?.getAttribute('data-menu-id')?.endsWith(key)).toBeTruthy();
});
it('should support string `0` and number `0`', () => {
const { container } = render(
<Breadcrumb