diff --git a/packages/react-core/src/components/DataList/DataListCell.tsx b/packages/react-core/src/components/DataList/DataListCell.tsx index b2961729402..e1d7bc62f69 100644 --- a/packages/react-core/src/components/DataList/DataListCell.tsx +++ b/packages/react-core/src/components/DataList/DataListCell.tsx @@ -1,6 +1,8 @@ +import { FunctionComponent, useRef, useState, useEffect } from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataList/data-list'; import { DataListWrapModifier } from './DataList'; +import { Tooltip } from '../Tooltip'; export interface DataListCellProps extends Omit, 'width'> { /** Content rendered inside the DataList cell */ @@ -19,7 +21,7 @@ export interface DataListCellProps extends Omit, wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'; } -export const DataListCell: React.FunctionComponent = ({ +export const DataListCell: FunctionComponent = ({ children = null, className = '', width = 1, @@ -28,20 +30,38 @@ export const DataListCell: React.FunctionComponent = ({ isIcon = false, wrapModifier = null, ...props -}: DataListCellProps) => ( -
1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'], - !isFilled && styles.modifiers.noFill, - alignRight && styles.modifiers.alignRight, - isIcon && styles.modifiers.icon, - className, - wrapModifier && styles.modifiers[wrapModifier] - )} - {...props} - > - {children} -
-); +}: DataListCellProps) => { + const cellRef = useRef(null); + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + + useEffect(() => { + if (!cellRef.current || wrapModifier !== 'truncate') { + return; + } + const showTooltip = cellRef.current && cellRef.current.offsetWidth < cellRef.current.scrollWidth; + if (isTooltipVisible !== showTooltip) { + setIsTooltipVisible(showTooltip); + } + }, [cellRef, wrapModifier, isTooltipVisible]); + + return ( +
1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'], + !isFilled && styles.modifiers.noFill, + alignRight && styles.modifiers.alignRight, + isIcon && styles.modifiers.icon, + className, + wrapModifier && styles.modifiers[wrapModifier] + )} + {...(isTooltipVisible && { tabIndex: 0 })} + ref={cellRef} + {...props} + > + {children} + {isTooltipVisible && } +
+ ); +}; DataListCell.displayName = 'DataListCell';