溢出文本+tooltip

/**
 * @file 溢出文本+tooltip
 */

import {Tooltip} from 'antd';
import {TooltipProps} from 'antd/lib/tooltip';
import {FC, useCallback, useState} from 'react';
import {useElementResize} from '@huse/element-size';

interface IEllipsisTextProps {
    placement?: TooltipProps['placement'];
    arrowPointAtCenter?: TooltipProps['arrowPointAtCenter'];
}

const EllipsisText: FC<IEllipsisTextProps> = (props) => {
    const [overflow, setOverflow] = useState(false);
    const {placement, arrowPointAtCenter = true} = props;
    const resizeCb = useElementResize((element) => {
        // console.log('>>>', element.scrollWidth, element.offsetWidth);
        setOverflow(element.scrollWidth > element.offsetWidth);
    });

    const ref = useCallback(
        (element) => {
            if (element) {
                setOverflow(element.scrollWidth > element.offsetWidth);
                resizeCb(element);
            }
        },
        [resizeCb]
    );

    if (overflow) {
        return (
            <div ref={ref} style={{textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'pre'}}>
                <Tooltip title={props.children} placement={placement} arrowPointAtCenter={arrowPointAtCenter}>
                    {props.children}
                </Tooltip>
            </div>
        );
    }

    return (
        <div ref={ref} style={{textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'pre'}}>
            {props.children}
        </div>
    );
};

export default EllipsisText;