import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Boundary , Classes , Props , Position , removeNonHTMLProps } from "../../common" ; import { Menu } from "../menu/menu" ; import { MenuItem } from "../menu/menuItem" ; import { OverflowListProps , OverflowList } from "../overflow-list/overflowList" ; import { IPopoverProps , Popover } from "../popover/popover" ; import { Breadcrumb , BreadcrumbProps } from "./breadcrumb" ; export type BreadcrumbsProps = IBreadcrumbsProps ; deprecated export interface IBreadcrumbsProps extends Props { default breadcrumbRenderer ? : ( props : BreadcrumbProps ) => JSX . Element ; default collapseFrom ? : Boundary ; /**
     * Callback invoked to render the current breadcrumb, which is the last
     * element in the `items` array.
     *
     * If this prop is omitted, `breadcrumbRenderer` will be invoked for the
     * current breadcrumb instead.
     */ currentBreadcrumbRenderer ? : ( props : BreadcrumbProps ) => JSX . Element ; /**
     * All breadcrumbs to display. Breadcrumbs that do not fit in the container
     * will be rendered in an overflow menu instead.
     */ items : BreadcrumbProps [ ] ; default minVisibleItems ? : number ; /**
     * Props to spread to `OverflowList`. Note that `items`,
     * `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
     */ overflowListProps ? : Partial < OverflowListProps < BreadcrumbProps > > ; /**
     * Props to spread to the `Popover` showing the overflow menu.
     */ popoverProps ? : IPopoverProps ; } @ polyfill export class Breadcrumbs extends AbstractPureComponent2 < BreadcrumbsProps > { public static defaultProps : Partial < BreadcrumbsProps > = { collapseFrom : Boundary . START , } ; public render ( ) { const { className , collapseFrom , items , minVisibleItems , overflowListProps = { } } = this . props ; return ( < OverflowList collapseFrom = { collapseFrom } minVisibleItems = { minVisibleItems } tagName = "ul" { ... overflowListProps } className = { classNames ( Classes . BREADCRUMBS , overflowListProps . className , className ) } items = { items } overflowRenderer = { this . renderOverflow } visibleItemRenderer = { this . renderBreadcrumbWrapper } / > ) ; } private renderOverflow = ( items ) => { const { collapseFrom } = this . props ; const position = collapseFrom === Boundary . END ? Position . BOTTOM_RIGHT : Position . BOTTOM_LEFT ; let orderedItems = items ; if ( collapseFrom === Boundary . START ) { orderedItems = items . slice ( ) . reverse ( ) ; } return ( < li > < Popover position = { position } disabled = { orderedItems . length === 0 } content = { < Menu > { orderedItems . map ( this . renderOverflowBreadcrumb ) } < /Menu>} {...this.props.popoverProps}> < span className = { Classes . BREADCRUMBS_COLLAPSED } / > < /Popover> < /li>); } ; private renderOverflowBreadcrumb = ( props , index ) => { const isClickable = props . href != null || props . onClick != null ; const htmlProps = removeNonHTMLProps ( props ) ; return < MenuItem disabled = { ! isClickable } { ... htmlProps } text = { props . text } key = { index } / > ; } ; private renderBreadcrumbWrapper = ( props , index ) => { const isCurrent = this . props . items [ this . props . items . length - 1 ] === props ; return < li key = { index } > { this . renderBreadcrumb ( props , isCurrent ) } < /li>; } ; private renderBreadcrumb ( props , isCurrent ) { if ( isCurrent && this . props . currentBreadcrumbRenderer != null ) { return this . props . currentBreadcrumbRenderer ( props ) ; } else if ( this . props . breadcrumbRenderer != null ) { return this . props . breadcrumbRenderer ( props ) ; } else { return < Breadcrumb current = { isCurrent } { ... props } />; } } }