UNPKG

phx-react

Version:

PHX REACT

46 lines 2.18 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const tslib_1 = require("tslib"); const react_1 = tslib_1.__importStar(require("react")); const ToolTip_1 = tslib_1.__importDefault(require("../../ToolTip/ToolTip")); const types_1 = require("../../types"); /** * Renders plain truncated text, and wraps it with PHXTooltip only when the text overflows. * * @param children - Text content to render and measure. * @param className - Optional class names for the measured text element. * @param content - Optional custom tooltip content. * @returns Text content with tooltip behavior only when truncated. */ function TruncatedTooltip({ children, className, content }) { const contentRef = (0, react_1.useRef)(null); const [isTruncated, setIsTruncated] = (0, react_1.useState)(false); const tooltipContent = content !== null && content !== void 0 ? content : (typeof children === 'string' || typeof children === 'number' ? String(children) : null); /** * Updates whether the rendered text is visually truncated. * * @returns void. */ const updateTruncatedState = () => { const element = contentRef.current; if (!element) return; setIsTruncated(element.scrollWidth > element.clientWidth); }; (0, react_1.useEffect)(() => { updateTruncatedState(); const element = contentRef.current; if (!element || typeof ResizeObserver === 'undefined') return; const resizeObserver = new ResizeObserver(updateTruncatedState); resizeObserver.observe(element); return () => resizeObserver.disconnect(); }, [children]); const textElement = (react_1.default.createElement("span", { ref: contentRef, className: (0, types_1.classNames)('block min-w-0 overflow-hidden text-ellipsis', className) }, children)); if (!tooltipContent || !isTruncated) { return textElement; } return (react_1.default.createElement(ToolTip_1.default, { className: 'block w-full min-w-0 text-gray-900', content: tooltipContent }, textElement)); } exports.default = TruncatedTooltip; //# sourceMappingURL=TruncatedTooltip.js.map