12888195771

Committed 21 Jan 2025 01:38PM UTC coverage: 89.883% (-2.1%) from 91.979%

Build # 12888195771

Build Type

Pull #544

github

Committed by

web-flow

Commit Message

Merge 5776dcbf0 into 684d5abff

Pull Request Pull Request #544: Re-implement `Modal` component using HTMLDialogElement (#461)

Run Details

805 of 909 branches covered (88.56%)

Branch coverage included in aggregate %.

45 of 62 new or added lines in 8 files covered. (72.58%)

1 existing line in 1 file now uncovered.

732 of 801 relevant lines covered (91.39%)

71.01 hits per line

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

92.59

/src/components/Modal/_hooks/useModalScrollPrevention.js

import { useLayoutEffect } from 'react';

export const useModalScrollPrevention = (preventScrollUnderneath) => {
  useLayoutEffect(
    () => {
      if (preventScrollUnderneath === 'off') {
        return () => {};
      }

      if (preventScrollUnderneath instanceof HTMLElement) {
        const scrollableElement = preventScrollUnderneath;

        const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);
        const prevOverflow = scrollableElement.style.overflow;
        const prevPaddingRight = scrollableElement.style.paddingRight;

        scrollableElement.style.overflow = 'hidden';

        if (Number.isNaN(parseInt(prevPaddingRight, 10))) {
          scrollableElement.style.paddingRight = `${scrollbarWidth}px`;
        } else {
          scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
        }

        return () => {
          scrollableElement.style.overflow = prevOverflow;
          scrollableElement.style.paddingRight = prevPaddingRight;
        };
      }

      preventScrollUnderneath?.start();

      return preventScrollUnderneath?.reset;
    },
    [preventScrollUnderneath],
  );
};

1	import { useLayoutEffect } from 'react';
2
3	export const useModalScrollPrevention = (preventScrollUnderneath) => {	4✔
4	useLayoutEffect(	50✔
5	() => {
6	if (preventScrollUnderneath === 'off') {	50✔
7	return () => {};	2✔
8	}
9
10	if (preventScrollUnderneath instanceof HTMLElement) {	48✔
11	const scrollableElement = preventScrollUnderneath;	46✔
12
13	const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);	46✔
14	const prevOverflow = scrollableElement.style.overflow;	46✔
15	const prevPaddingRight = scrollableElement.style.paddingRight;	46✔
16
17	scrollableElement.style.overflow = 'hidden';	46✔
18
19	if (Number.isNaN(parseInt(prevPaddingRight, 10))) {	46!
20	scrollableElement.style.paddingRight = `${scrollbarWidth}px`;	46✔
21	} else {
UNCOV 22	scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;	×
23	}
24
25	return () => {	46✔
26	scrollableElement.style.overflow = prevOverflow;	46✔
27	scrollableElement.style.paddingRight = prevPaddingRight;	46✔
28	};
29	}
30
31	preventScrollUnderneath?.start();	2✔
32
33	return preventScrollUnderneath?.reset;	2✔
34	},
35	[preventScrollUnderneath],
36	);
37	};

react-ui-org / react-ui / 12888195771

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