@lunit/oui/dist/components/EllipsisTypography/EllipsisTypography.js

Lunit Oncology UI components

import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useRef, useState } from 'react';
import StyledTypography from './EllipsisTypography.styled';
import { Tooltip } from '../Tooltip';
import { ResizeObserverContext } from '../ResizeObserver/ResizeObserverContext';
function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }) {
    const typographyRef = useRef(null);
    const direction = otherProps.direction || 'row';
    const heightThreshold = heightThresholdProp != null ? heightThresholdProp : 1;
    const [showTooltip, setShowTooltip] = useState(false);
    const { addResizeHandler, removeResizeHandler } = useContext(ResizeObserverContext);
    useEffect(() => {
        if (!typographyRef.current)
            return;
        const target = typographyRef.current;
        const checkOverflow = () => {
            const isOverflowing = target.scrollHeight - target.clientHeight > heightThreshold;
            setShowTooltip(isOverflowing);
        };
        if (addResizeHandler) {
            addResizeHandler(target, checkOverflow);
        }
        checkOverflow();
        return () => {
            if (removeResizeHandler) {
                removeResizeHandler(target);
            }
        };
    }, [heightThreshold, addResizeHandler, removeResizeHandler]);
    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
    return showTooltip ? (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: TypographyComponent })) : (TypographyComponent);
}
export default EllipsisTypography;