Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1163x 1163x 135x 1163x 1163x 1163x 1102x 8x 2x 6x 1x 1x 5x 1x 4x 3x 1x 1x 1163x 74x 5x | import { useMemo, useRef, useEffect } from 'react';
export function usePrevious<T>(value: T) {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
interface UseHighlight {
value: any;
highlightUpdates?: boolean;
highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
}
export function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight) {
const prevValue = usePrevious(value);
const isHighlight = useMemo(() => {
if (!highlightUpdates || prevValue === undefined) return false;
// highlight if value type changed
if (typeof value !== typeof prevValue) {
return true;
}
if (typeof value === 'number') {
// notice: NaN !== NaN
Iif (isNaN(value) && isNaN(prevValue as unknown as number)) return false;
return value !== prevValue;
}
// highlight if isArray changed
if (Array.isArray(value) !== Array.isArray(prevValue)) {
return true;
}
// not highlight object/function
// deep compare they will be slow
if (typeof value === 'object' || typeof value === 'function') {
return false;
}
// highlight if not equal
Eif (value !== prevValue) {
return true;
}
}, [highlightUpdates, value]);
useEffect(() => {
if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
highlightContainer.current.animate(
[{ backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)' }, { backgroundColor: '' }],
{
duration: 1000,
easing: 'ease-in',
},
);
}
}, [isHighlight, value, highlightContainer]);
}
|