9021282036

Committed 09 May 2024 05:44PM CUT coverage: 91.291%. Remained the same

Build # 9021282036

Build Type

Pull #951

github

Committed by

jeremyll

Commit Message

Fix scrolling by pixels

Pull Request Pull Request #951: Fix scrolling by pixels

Run Details

2888 of 3576 branches covered (80.76%)

2 of 2 new or added lines in 1 file covered. (100.0%)

17778 of 19474 relevant lines covered (91.29%)

3114.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

57.38

/packages/core/src/internal/data-grid-overlay-editor/use-stay-on-screen.ts

import * as React from "react";

function useRefState(): [HTMLElement | undefined, React.RefCallback<HTMLElement | null>] {
    const [refState, setRefState] = React.useState<HTMLElement | null>();
    return [refState ?? undefined, setRefState];
}

interface StayOnScreen {
    ref: React.RefCallback<HTMLElement | null>;
    style: React.CSSProperties;
}

export function useStayOnScreen(): StayOnScreen {
    const [ref, setRef] = useRefState();
    const [xOffset, setXOffset] = React.useState(0);
    const [isIntersecting, setIsIntersecting] = React.useState(true);

    React.useLayoutEffect(() => {
        if (ref === undefined) return;
        if (!("IntersectionObserver" in window)) return;

        const observer = new IntersectionObserver(
            ents => {
                if (ents.length === 0) return;
                setIsIntersecting(ents[0].isIntersecting);
            },
            { threshold: 1 }
        );
        observer.observe(ref);

        return () => observer.disconnect();
    }, [ref]);

    React.useEffect(() => {
        if (isIntersecting || ref === undefined) return;

        let rafHandle: number | undefined;
        const fn = () => {
            const { right: refRight } = ref.getBoundingClientRect();

            setXOffset(cv => Math.min(cv + window.innerWidth - refRight - 10, 0));
            rafHandle = requestAnimationFrame(fn);
        };

        rafHandle = requestAnimationFrame(fn);
        return () => {
            if (rafHandle !== undefined) {
                cancelAnimationFrame(rafHandle);
            }
        };
    }, [ref, isIntersecting]);

    const style = React.useMemo(() => {
        return { transform: `translateX(${xOffset}px)` };
    }, [xOffset]);

    return {
        ref: setRef,
        style,
    };
}

1	import * as React from "react";	1✔
2		1✔
3	function useRefState(): [HTMLElement \| undefined, React.RefCallback<HTMLElement \| null>] {	32✔
4	const [refState, setRefState] = React.useState<HTMLElement \| null>();	32✔
5	return [refState ?? undefined, setRefState];	32✔
6	}	32✔
7		1✔
8	interface StayOnScreen {	1✔
9	ref: React.RefCallback<HTMLElement \| null>;	1✔
10	style: React.CSSProperties;	1✔
11	}	1✔
12		1✔
13	export function useStayOnScreen(): StayOnScreen {	1✔
14	const [ref, setRef] = useRefState();	32✔
15	const [xOffset, setXOffset] = React.useState(0);	32✔
16	const [isIntersecting, setIsIntersecting] = React.useState(true);	32✔
17		32✔
18	React.useLayoutEffect(() => {	32✔
19	if (ref === undefined) return;	24✔
20	if (!("IntersectionObserver" in window)) return;	12!
21		×
22	const observer = new IntersectionObserver(	×
23	ents => {	×
24	if (ents.length === 0) return;	×
25	setIsIntersecting(ents[0].isIntersecting);	×
26	},	×
27	{ threshold: 1 }	×
28	);	×
29	observer.observe(ref);	×
30		×
31	return () => observer.disconnect();	×
32	}, [ref]);	32✔
33		32✔
34	React.useEffect(() => {	32✔
35	if (isIntersecting \|\| ref === undefined) return;	24!
36		×
37	let rafHandle: number \| undefined;	×
38	const fn = () => {	×
39	const { right: refRight } = ref.getBoundingClientRect();	×
40		×
41	setXOffset(cv => Math.min(cv + window.innerWidth - refRight - 10, 0));	×
42	rafHandle = requestAnimationFrame(fn);	×
43	};	×
44		×
45	rafHandle = requestAnimationFrame(fn);	×
46	return () => {	×
47	if (rafHandle !== undefined) {	×
48	cancelAnimationFrame(rafHandle);	×
49	}	×
50	};	×
51	}, [ref, isIntersecting]);	32✔
52		32✔
53	const style = React.useMemo(() => {	32✔
54	return { transform: `translateX(${xOffset}px)` };	12✔
55	}, [xOffset]);	32✔
56		32✔
57	return {	32✔
58	ref: setRef,	32✔
59	style,	32✔
60	};	32✔
61	}	32✔

glideapps / glide-data-grid / 9021282036

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous