14407913857

Committed 11 Apr 2025 04:40PM UTC coverage: 91.961% (+0.005%) from 91.956%

Build # 14407913857

Build Type

Pull #614

github

Committed by

web-flow

Commit Message

Merge 30286316f into c2b0b44f8

Pull Request Pull Request #614: Introduce `color` property to the `Modal` component (#468)

Run Details

786 of 860 branches covered (91.4%)

Branch coverage included in aggregate %.

724 of 782 relevant lines covered (92.58%)

74.1 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(	62✔
5	() => {
6	if (preventScrollUnderneath === 'off') {	62✔
7	return () => {};	2✔
8	}
9
10	if (preventScrollUnderneath instanceof HTMLElement) {	60✔
11	const scrollableElement = preventScrollUnderneath;	58✔
12
13	const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);	58✔
14	const prevOverflow = scrollableElement.style.overflow;	58✔
15	const prevPaddingRight = scrollableElement.style.paddingRight;	58✔
16
17	scrollableElement.style.overflow = 'hidden';	58✔
18
19	if (Number.isNaN(parseInt(prevPaddingRight, 10))) {	58!
20	scrollableElement.style.paddingRight = `${scrollbarWidth}px`;	58✔
21	} else {
22	scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;	×
23	}
24
25	return () => {	58✔
26	scrollableElement.style.overflow = prevOverflow;	58✔
27	scrollableElement.style.paddingRight = prevPaddingRight;	58✔
28	};
29	}
30
31	preventScrollUnderneath?.start();	2✔
32
33	return preventScrollUnderneath?.reset;	2✔
34	},
35	[preventScrollUnderneath],
36	);
37	};

react-ui-org / react-ui / 14407913857

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