import * as React from 'react'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer'; import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__group_toggle_title_max_lines'; import { Badge } from '../Badge'; import { Tooltip, TooltipPosition } from '../Tooltip'; export interface NotificationDrawerGroupProps extends Omit, 'title'> { /** Content rendered inside the group */ children?: React.ReactNode; /** Additional classes added to the group */ className?: string; /** Notification drawer group count */ count: number; /** Adds styling to the group to indicate expanded state */ isExpanded: boolean; /** Adds styling to the group to indicate whether it has been read */ isRead?: boolean; /** Callback for when group button is clicked to expand */ onExpand?: (event: any, value: boolean) => void; /** Notification drawer group title */ title: React.ReactNode; /** Truncate title to number of lines */ truncateTitle?: number; /** Position of the tooltip which is displayed if text is truncated */ tooltipPosition?: | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'; /** Sets the heading level to use for the group title. Default is h1. */ headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } export const NotificationDrawerGroup: React.FunctionComponent = ({ children, className = '', count, isExpanded, isRead = false, // eslint-disable-next-line @typescript-eslint/no-unused-vars onExpand = (event: any, expanded: boolean) => undefined as any, title, truncateTitle = 0, tooltipPosition, headingLevel: HeadingLevel = 'h1', ...props }: NotificationDrawerGroupProps) => { const titleRef = React.useRef(null); const [isTooltipVisible, setIsTooltipVisible] = React.useState(false); React.useEffect(() => { // Title will always truncate on overflow regardless of truncateTitle prop const showTooltip = titleRef.current && titleRef.current.offsetHeight < titleRef.current.scrollHeight; if (isTooltipVisible !== showTooltip) { setIsTooltipVisible(showTooltip); } if (!titleRef.current || !truncateTitle) { return; } titleRef.current.style.setProperty(maxLines.name, truncateTitle.toString()); }, [titleRef, truncateTitle, isTooltipVisible]); const Title = (
{title}
); return (
{children}
); }; NotificationDrawerGroup.displayName = 'NotificationDrawerGroup';