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

Better throttle instead of debounce

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-04 10:05:21 +08:00
parent d429ef9161
commit be964f933c
1 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/utils/useTruncated.js
View file

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