Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 01:08:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

Robustify useTruncated

Browse source 
Also attempt to fix weird scrollHeight bug again
This commit is contained in:
Lim Chee Aun 2023-10-03 13:03:03 +08:00
parent fcbf99f121
commit 48f1527cc6
1 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/utils/useTruncated.js
View file

@ -1,17 +1,31 @@
import { useRef } from 'preact/hooks';
import { useDebouncedCallback } from 'use-debounce';
import useResizeObserver from 'use-resize-observer';
export default function useTruncated({ className = 'truncated' } = {}) {
const ref = useRef();
const onResize = useDebouncedCallback(
({ height }) => {
if (ref.current) {
const { scrollHeight } = ref.current;
let truncated = scrollHeight > height;
if (truncated) {
const { height: _height, maxHeight } = getComputedStyle(ref.current);
const computedHeight = parseInt(maxHeight || _height, 10);
truncated = scrollHeight > computedHeight;
}
ref.current.classList.toggle(className, truncated);
}
},
300,
{
maxWait: 2000,
},
);
useResizeObserver({
ref,
box: 'border-box',
onResize: ({ height }) => {
if (ref.current) {
const { scrollHeight } = ref.current;
ref.current.classList.toggle(className, scrollHeight > height);
}
},
onResize,
});
return ref;
}