import React , { Fragment } from 'react' ; import { IProps } from '@uiw/utils' ; import './style/item.less' ; type ElementTag < T = any > = T extends HTMLElement ? React . HTMLAttributes < T > : T ; export interface BreadcrumbItemProps < T = any > extends IProps , ElementTag { tagName ? : T extends HTMLElement ? keyof JSX . IntrinsicElements : T ; separator ? : JSX . Element | string ; active ? : boolean ; 'data-separator' ? : JSX . Element | string ; } type RefElement < T = HTMLSpanElement > = T extends HTMLElement ? T : never ; const BreadcrumbItem = React . forwardRef < RefElement , BreadcrumbItemProps > ( ( props , ref ) => { const { prefixCls = 'w-breadcrumb' , className , tagName : TagName = 'span' , active , separator , ... other } = props ; const isElm = React . isValidElement ( separator ) ; const cls = [ `${ prefixCls }-item` , className , active ? 'active' : null , ! separator ? 'no-separator' : null , isElm ? 'no-before' : null , ] . filter ( Boolean ) . join ( ' ' ) . trim ( ) ; const otherProps = { className : cls , ... other } ; if ( ! isElm ) { otherProps [ 'data-separator' ] = separator ; } return React . createElement ( TagName , { ... otherProps , ref , } , < Fragment > { isElm && < span className = { `${ prefixCls }-separator` } > { separator } < /span>} { props . children } < /Fragment>); } ) ; export default BreadcrumbItem ;