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>
);
});