import * as React from 'react'; import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box'; import { css } from '@patternfly/react-styles'; import { capitalize } from '../../../helpers'; import { Tooltip } from '../../../components/Tooltip'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import { useIsomorphicLayoutEffect } from '../../../helpers'; export const isVariantIcon = (icon: any): icon is string => ['success', 'danger', 'warning', 'info', 'custom'].includes(icon as string); export interface ModalBoxTitleProps { /** Additional classes added to the modal box title. */ className?: string; /** Id of the modal box title. */ id: string; /** Content rendered inside the modal box title. */ title: React.ReactNode; /** Optional alert icon (or other) to show before the title. When the predefined alert types * are used the default styling will be automatically applied. */ titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType; /** Optional title label text for screen readers. */ titleLabel?: string; } export const ModalBoxTitle: React.FunctionComponent = ({ className = '', id, title, titleIconVariant, titleLabel = '', ...props }: ModalBoxTitleProps) => { const [hasTooltip, setHasTooltip] = React.useState(false); const h1 = React.useRef(null); const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel); const variantIcons = { success: , danger: , warning: , info: , custom: }; const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant; useIsomorphicLayoutEffect(() => { setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth); }, []); const content = (

# {titleIconVariant && ( {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : } )} {label && {label}} {title}

); return hasTooltip ? {content} : content; }; ModalBoxTitle.displayName = 'ModalBoxTitle';