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

48.0

/src/components/Modal/_helpers/dialogOnClickHandler.js

export const dialogOnClickHandler = (
  e,
  closeButtonRef,
  dialogRef,
  allowCloseOnBackdropClick,
) => {
  // If it is not allowed to close modal on backdrop click, do nothing.
  if (!allowCloseOnBackdropClick) {
    return;
  }

  // Detection of the click on the backdrop is based on the following conditions:
  // 1. The click target is the dialog itself. This prevents detection of clicks on the dialog's children.
  // 2. The click is outside the dialog's boundaries.
  const dialogRect = dialogRef.current.getBoundingClientRect();
  const isClickedOnBackdrop = dialogRef.current === e.target && (
    e.clientX < dialogRect.left
    || e.clientX > dialogRect.right
    || e.clientY < dialogRect.top
    || e.clientY > dialogRect.bottom
  );

  // If user does not click on the backdrop, do nothing.
  if (!isClickedOnBackdrop) {
    return;
  }

  // If the close button is not disabled, close the modal.
  if (closeButtonRef?.current != null && closeButtonRef?.current?.disabled === false) {
    closeButtonRef.current.click();
  }
};

1	export const dialogOnClickHandler = (	4✔
2	e,
3	closeButtonRef,
4	dialogRef,
5	allowCloseOnBackdropClick,
6	) => {
7	// If it is not allowed to close modal on backdrop click, do nothing.
8	if (!allowCloseOnBackdropClick) {	6!
NEW 9	return;	×
10	}
11
12	// Detection of the click on the backdrop is based on the following conditions:
13	// 1. The click target is the dialog itself. This prevents detection of clicks on the dialog's children.
14	// 2. The click is outside the dialog's boundaries.
15	const dialogRect = dialogRef.current.getBoundingClientRect();	6✔
16	const isClickedOnBackdrop = dialogRef.current === e.target && (	6!
17	e.clientX < dialogRect.left
18	\|\| e.clientX > dialogRect.right
19	\|\| e.clientY < dialogRect.top
20	\|\| e.clientY > dialogRect.bottom
21	);
22
23	// If user does not click on the backdrop, do nothing.
24	if (!isClickedOnBackdrop) {	6!
25	return;	6✔
26	}
27
28	// If the close button is not disabled, close the modal.
NEW 29	if (closeButtonRef?.current != null && closeButtonRef?.current?.disabled === false) {	×
NEW 30	closeButtonRef.current.click();	×
31	}
32	};

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