12888396514

Committed 21 Jan 2025 01:50PM UTC coverage: 92.086% (+0.1%) from 91.979%

Build # 12888396514

Build Type

Pull #544

github

Committed by

web-flow

Commit Message

Merge 715e2e5fd into 684d5abff

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

Run Details

783 of 858 branches covered (91.26%)

Branch coverage included in aggregate %.

31 of 33 new or added lines in 4 files covered. (93.94%)

1 existing line in 1 file now uncovered.

718 of 772 relevant lines covered (93.01%)

73.58 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 / 12888396514

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