import * as React from 'react'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb'; import { css } from '@patternfly/react-styles'; export interface BreadcrumbItemRenderArgs { className: string; ariaCurrent: 'page' | undefined; } export interface BreadcrumbItemProps extends React.HTMLProps { /** Content rendered inside the breadcrumb item. */ children?: React.ReactNode; /** Additional classes added to the breadcrumb item. */ className?: string; /** HREF for breadcrumb link. */ to?: string; /** Flag indicating whether the item is active. */ isActive?: boolean; /** Flag indicating whether the item contains a dropdown. */ isDropdown?: boolean; /** Internal prop set by Breadcrumb on all but the first crumb */ showDivider?: boolean; /** Target for breadcrumb link. */ target?: string; /** Sets the base component to render. Defaults to */ component?: React.ElementType; /** A render function to render the component inside the breadcrumb item. */ render?: (props: BreadcrumbItemRenderArgs) => React.ReactNode; } export const BreadcrumbItem: React.FunctionComponent = ({ children = null, className: classNameProp = '', to = undefined, isActive = false, isDropdown = false, showDivider, target = undefined, component = 'a', render = undefined, ...props }: BreadcrumbItemProps) => { const Component = component; const ariaCurrent = isActive ? 'page' : undefined; const className = css(styles.breadcrumbLink, isActive && styles.modifiers.current); return (
- {showDivider && ( )} {component === 'button' && (
  )} {isDropdown && {children}} {render && render({ className, ariaCurrent })} {to && !render && ( {children} )} {!to && component !== 'button' && !isDropdown && children}
); }; BreadcrumbItem.displayName = 'BreadcrumbItem';