fix: BreadcrumbItemType missing onClick func (#41283)

* feat: BreadcrumbItemType add onClick

* chore: update

* fix: 补充className

* chore: update
This commit is contained in:
acyza 2023-03-17 11:26:36 +08:00 committed by GitHub
parent 39adae8e5c
commit 6c8082a474
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions

View File

@ -33,6 +33,8 @@ export interface BreadcrumbItemType {
menu?: BreadcrumbItemProps['menu'];
/** @deprecated Please use `menu` instead */
overlay?: React.ReactNode;
className?: string;
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
}
export interface BreadcrumbSeparatorType {
type: 'separator';
@ -145,7 +147,16 @@ const Breadcrumb: CompoundedComponent = (props) => {
const itemRenderRoutes: any = items || legacyRoutes;
crumbs = mergedItems.map((item, index) => {
const { path, key, type, menu, overlay, separator: itemSeparator } = item;
const {
path,
key,
type,
menu,
overlay,
onClick,
className: itemClassName,
separator: itemSeparator,
} = item;
const mergedPath = getPath(params, path);
if (mergedPath !== undefined) {
@ -167,6 +178,10 @@ const Breadcrumb: CompoundedComponent = (props) => {
itemProps.overlay = overlay as any;
}
if (itemClassName) {
itemProps.className = itemClassName;
}
let { href } = item;
if (paths.length && mergedPath !== undefined) {
href = `#/${paths.join('/')}`;
@ -182,6 +197,7 @@ const Breadcrumb: CompoundedComponent = (props) => {
})}
href={href}
separator={isLastItem ? '' : separator}
onClick={onClick}
>
{mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths)}
</BreadcrumbItem>

View File

@ -329,4 +329,18 @@ describe('Breadcrumb', () => {
expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore();
});
it('should use `onClick`', async () => {
const onClick = jest.fn();
const wrapper = render(<Breadcrumb items={[{ title: 'test', onClick }]} />);
const item = await wrapper.findByText('test');
item.click();
expect(onClick).toHaveBeenCalledTimes(1);
});
it('should use `className`', async () => {
const testClassName = 'testClassName';
const wrapper = render(<Breadcrumb items={[{ title: 'test', className: testClassName }]} />);
const item = await wrapper.findByText('test');
expect(item).toHaveClass(testClassName);
});
});