mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
30 lines • 1.34 kB
JavaScript
import React from 'react';
import { Tooltip } from '@patternfly/react-core';
const TruncatedText = ({ maxLines, content, ...props }) => {
const outerElementRef = React.useRef(null);
const textElementRef = React.useRef(null);
const [isTruncated, setIsTruncated] = React.useState(false);
const updateTruncation = React.useCallback(() => {
if (textElementRef.current && outerElementRef.current) {
setIsTruncated(textElementRef.current.offsetHeight > outerElementRef.current.offsetHeight);
}
}, []);
const truncateBody = (React.createElement("span", { ...props, style: {
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
overflowWrap: 'anywhere',
overflow: 'hidden',
WebkitLineClamp: maxLines,
...(props.style || {}),
}, ref: outerElementRef, onMouseEnter: (e) => {
props.onMouseEnter?.(e);
updateTruncation();
}, onFocus: (e) => {
props.onFocus?.(e);
updateTruncation();
} },
React.createElement("span", { ref: textElementRef }, content)));
return (React.createElement(Tooltip, { hidden: !isTruncated ? true : undefined, content: content }, truncateBody));
};
export default TruncatedText;
//# sourceMappingURL=TruncatedText.js.map