UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

28 lines (27 loc) 1.57 kB
import React from 'react'; import { createElemPropsHook, useLocalRef, composeHooks, createSubcomponent, useForkRef, } from '@workday/canvas-kit-react/common'; import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip'; import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection'; import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel'; import { Text } from '@workday/canvas-kit-react/text'; export const useBreadcrumbsItem = composeHooks(createElemPropsHook(useBreadcrumbsModel)((_model, ref, elemProps) => { const { localRef } = useLocalRef(useForkRef(ref)); let shouldShowTooltip = false; const refCurrent = localRef.current; if (refCurrent) { const { scrollWidth, clientWidth } = refCurrent; shouldShowTooltip = scrollWidth > clientWidth; } return { tabIndex: shouldShowTooltip ? 0 : undefined, ref: localRef, }; }), useOverflowListItemMeasure, useListItemRegister); export const BreadcrumbsCurrentItem = createSubcomponent('li')({ displayName: 'Breadcrumbs.Item', modelHook: useBreadcrumbsModel, elemPropsHook: useBreadcrumbsItem, })(({ children, tooltipProps = {}, maxWidth = '350px', ...elemProps }, Element) => { return (React.createElement(OverflowTooltip, { ...tooltipProps }, React.createElement(Text, { as: Element, typeLevel: "subtext.large", fontWeight: "medium", display: "inline-block", maxWidth: maxWidth, whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden", ...elemProps }, children))); });