Browse Source
* refactor: out of bread item render * refactor: fix too filled * fix: render logic * test: add test case * fix: ts * fix: testpull/42055/head
二货爱吃白萝卜
2 years ago
committed by
GitHub
GitHub
8 changed files with 183 additions and 92 deletions
@ -0,0 +1,34 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`Breadcrumb.ItemRender render as expect 1`] = ` |
|||
<div> |
|||
<nav |
|||
class="ant-breadcrumb" |
|||
> |
|||
<ol> |
|||
<li> |
|||
<a |
|||
class="my-link" |
|||
data-path="/" |
|||
> |
|||
Home |
|||
</a> |
|||
</li> |
|||
<li |
|||
aria-hidden="true" |
|||
class="ant-breadcrumb-separator" |
|||
> |
|||
/ |
|||
</li> |
|||
<li> |
|||
<a |
|||
class="my-link" |
|||
data-path="/bamboo" |
|||
> |
|||
Bamboo |
|||
</a> |
|||
</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,29 @@ |
|||
import React from 'react'; |
|||
import { render } from '../../../tests/utils'; |
|||
import Breadcrumb from '../index'; |
|||
|
|||
describe('Breadcrumb.ItemRender', () => { |
|||
it('render as expect', () => { |
|||
const { container } = render( |
|||
<Breadcrumb |
|||
items={[ |
|||
{ |
|||
path: '/', |
|||
title: 'Home', |
|||
}, |
|||
{ |
|||
path: '/bamboo', |
|||
title: 'Bamboo', |
|||
}, |
|||
]} |
|||
itemRender={(route) => ( |
|||
<a className="my-link" data-path={route.path}> |
|||
{route.title} |
|||
</a> |
|||
)} |
|||
/>, |
|||
); |
|||
|
|||
expect(container).toMatchSnapshot(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,73 @@ |
|||
import classNames from 'classnames'; |
|||
import pickAttrs from 'rc-util/lib/pickAttrs'; |
|||
import * as React from 'react'; |
|||
import type { BreadcrumbProps, InternalRouteType, ItemType } from './Breadcrumb'; |
|||
|
|||
type AddParameters<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = ( |
|||
...args: [...Parameters<TFunction>, ...TParameters] |
|||
) => ReturnType<TFunction>; |
|||
|
|||
type ItemRender = NonNullable<BreadcrumbProps['itemRender']>; |
|||
type InternalItemRenderParams = AddParameters<ItemRender, [href?: string]>; |
|||
|
|||
function getBreadcrumbName(route: InternalRouteType, params: any) { |
|||
if (route.title === undefined) { |
|||
return null; |
|||
} |
|||
const paramsKeys = Object.keys(params).join('|'); |
|||
return typeof route.title === 'object' |
|||
? route.title |
|||
: String(route.title).replace( |
|||
new RegExp(`:(${paramsKeys})`, 'g'), |
|||
(replacement, key) => params[key] || replacement, |
|||
); |
|||
} |
|||
|
|||
export function renderItem( |
|||
prefixCls: string, |
|||
item: ItemType, |
|||
children: React.ReactNode, |
|||
href?: string, |
|||
) { |
|||
if (children === null || children === undefined) { |
|||
return null; |
|||
} |
|||
|
|||
const { className, onClick, ...restItem } = item; |
|||
|
|||
const passedProps = { |
|||
...pickAttrs(restItem, { |
|||
data: true, |
|||
aria: true, |
|||
}), |
|||
onClick, |
|||
}; |
|||
|
|||
if (href !== undefined) { |
|||
return ( |
|||
<a {...passedProps} className={classNames(`${prefixCls}-link`, className)} href={href}> |
|||
{children} |
|||
</a> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<span {...passedProps} className={classNames(`${prefixCls}-link`, className)}> |
|||
{children} |
|||
</span> |
|||
); |
|||
} |
|||
|
|||
export default function useItemRender(prefixCls: string, itemRender?: ItemRender) { |
|||
const mergedItemRender: InternalItemRenderParams = (item, params, routes, path, href) => { |
|||
if (itemRender) { |
|||
return itemRender(item, params, routes, path); |
|||
} |
|||
|
|||
const name = getBreadcrumbName(item, params); |
|||
|
|||
return renderItem(prefixCls, item, name, href); |
|||
}; |
|||
|
|||
return mergedItemRender; |
|||
} |
|||
Loading…
Reference in new issue