import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataList/data-list'; import { Tooltip } from '../Tooltip'; import { DataListWrapModifier } from './DataList'; export interface DataListTextProps extends React.HTMLProps { /** Content rendered within the data list text */ children?: React.ReactNode; /** Additional classes added to the data list text */ className?: string; /** Determines which element to render as a data list text. Usually div or span */ component?: React.ReactNode; /** Determines which wrapping modifier to apply to the data list text */ wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'; /** text to display on the tooltip */ tooltip?: string; /** callback used to create the tooltip if text is truncated */ onMouseEnter?: (event: any) => void; } export const DataListText: React.FunctionComponent = ({ children = null, className = '', component = 'span', wrapModifier = null, tooltip: tooltipProp = '', onMouseEnter: onMouseEnterProp = () => {}, ...props }: DataListTextProps) => { const Component = component as any; const [tooltip, setTooltip] = React.useState(''); const onMouseEnter = (event: any) => { if (event.target.offsetWidth < event.target.scrollWidth) { setTooltip(tooltipProp || event.target.innerHTML); } else { setTooltip(''); } onMouseEnterProp(event); }; const text = ( {children} ); return tooltip !== '' ? ( {text} ) : ( text ); }; DataListText.displayName = 'DataListText';