fix: Broken effect in useCSSTextTruncation hook (#22324)

This commit is contained in:
Cody Leff 2022-12-07 07:51:30 -07:00 committed by GitHub
parent ff1d29c539
commit 2731cbacbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -42,21 +42,18 @@ const useCSSTextTruncation = <T extends HTMLElement>(): [
] => { ] => {
const [isTruncated, setIsTruncated] = useState(true); const [isTruncated, setIsTruncated] = useState(true);
const ref = useRef<T>(null); const ref = useRef<T>(null);
const { offsetWidth, scrollWidth } = ref.current ?? {}; const [offsetWidth, setOffsetWidth] = useState(0);
const prevWidths = useRef({ offsetWidth, scrollWidth }); const [scrollWidth, setScrollWidth] = useState(0);
const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
prevWidths.current; // eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
setOffsetWidth(ref.current?.offsetWidth ?? 0);
setScrollWidth(ref.current?.scrollWidth ?? 0);
});
useEffect(() => { useEffect(() => {
if ( setIsTruncated(offsetWidth < scrollWidth);
offsetWidth && }, [offsetWidth, scrollWidth]);
scrollWidth &&
(offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
) {
prevWidths.current = { offsetWidth, scrollWidth };
setIsTruncated(offsetWidth < scrollWidth);
}
}, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
return [ref, isTruncated]; return [ref, isTruncated];
}; };