this repo has no description
Robustify useTruncated
Also attempt to fix weird scrollHeight bug again
+19
-5
+19
-5
src/utils/useTruncated.js
+19
-5
src/utils/useTruncated.js
···
1
1
import { useRef } from 'preact/hooks';
2
+
import { useDebouncedCallback } from 'use-debounce';
2
3
import useResizeObserver from 'use-resize-observer';
3
4
4
5
export default function useTruncated({ className = 'truncated' } = {}) {
5
6
const ref = useRef();
6
-
useResizeObserver({
7
-
ref,
8
-
box: 'border-box',
9
-
onResize: ({ height }) => {
7
+
const onResize = useDebouncedCallback(
8
+
({ height }) => {
10
9
if (ref.current) {
11
10
const { scrollHeight } = ref.current;
12
-
ref.current.classList.toggle(className, scrollHeight > height);
11
+
let truncated = scrollHeight > height;
12
+
if (truncated) {
13
+
const { height: _height, maxHeight } = getComputedStyle(ref.current);
14
+
const computedHeight = parseInt(maxHeight || _height, 10);
15
+
truncated = scrollHeight > computedHeight;
16
+
}
17
+
ref.current.classList.toggle(className, truncated);
13
18
}
14
19
},
20
+
300,
21
+
{
22
+
maxWait: 2000,
23
+
},
24
+
);
25
+
useResizeObserver({
26
+
ref,
27
+
box: 'border-box',
28
+
onResize,
15
29
});
16
30
return ref;
17
31
}