利用ref调整位置

92 阅读1分钟

const TreeItem = React.forwardRef<HTMLDivElement, WorldTreeItemProps>(function WorldTreeItem(
    { data, ...rest },
    ref
) {
    const [ tooltipVisible, setTooltipVisible ] = useState(false);

    const alignLeftRef = useRef(0);
    const spanRef = useRef<HTMLSpanElement | null>(null);
    function updateAlignLeft() {
        let scrollElement: HTMLElement | null = null;
        if (spanRef.current) {
            let cur: HTMLElement | null = spanRef.current.parentElement;
            while (cur != null) {
                const overflowX = window.getComputedStyle(cur).overflowX;
                if (overflowX === 'auto' || overflowX === 'scroll') {
                    scrollElement = cur;
                    break;
                }
                cur = cur.parentElement;
            }
            if (scrollElement != null) {
                const scrollEleRect = scrollElement.getBoundingClientRect();
                const spanEleRect = spanRef.current.getBoundingClientRect();
                const offsetLeft = spanEleRect.left - scrollEleRect.left;
                const alignLeft = spanEleRect.width;
                const maxAlignLeft = scrollEleRect.width - offsetLeft;
                alignLeftRef.current = Math.min(alignLeft, maxAlignLeft) - spanEleRect.width;
            }
        }
    }
    return (
        <div {...rest} ref={ref}>
            <Tooltip
                visible={tooltipVisible}
                onVisibleChange={visible => {
                    if (visible) {
                        updateAlignLeft();
                    }
                    setTooltipVisible(visible);
                }}
                align={{
                    offset: [ alignLeftRef.current, 0 ]
                }}
            >
                <span ref={spanRef}>{worldTitle}</span>
            </Tooltip>
        </div>
    );
});