@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) {
            const target = typographyRef.current;
            const resizeHandler = () => {
                switch (direction) {
                    case 'row':
                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
                            setShowTooltip(true);
                        }
                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
                            showTooltip) {
                            setShowTooltip(false);
                        }
                        break;
                    case 'column':
                    default:
                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
                            setShowTooltip(true);
                        }
                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
                            showTooltip) {
                            setShowTooltip(false);
                        }
                }
            };
            if (addResizeHandler) {
                console.log(addResizeHandler);
                addResizeHandler(target, resizeHandler);
            }
            return () => {
                if (removeResizeHandler)
                    removeResizeHandler(target);
            };
        }
        return () => { };
    }, [
        typographyRef,
        direction,
        showTooltip,
        heightThreshold,
        addResizeHandler,
        removeResizeHandler,
    ]);
    console.log(showTooltip);
    if (showTooltip) {
        return (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: _jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }) }));
    }
    return (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
}
export default EllipsisTypography;