@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
28 lines (27 loc) • 1.57 kB
JavaScript
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)));
});