12744940249

Committed 13 Jan 2025 10:09AM UTC coverage: 80.471% (-11.5%) from 91.979%

Build # 12744940249

Build Type

Pull #544

github

Committed by

web-flow

Commit Message

Merge ec8d690d5 into 684d5abff

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

Run Details

743 of 923 branches covered (80.5%)

Branch coverage included in aggregate %.

4 of 43 new or added lines in 7 files covered. (9.3%)

65 existing lines in 5 files now uncovered.

658 of 818 relevant lines covered (80.44%)

61.83 hits per line

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

4.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.
NEW 8	if (!allowCloseOnBackdropClick) {	×
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.
NEW 15	const dialogRect = dialogRef.current.getBoundingClientRect();	×
NEW 16	const isClickedOnBackdrop = dialogRef.current === e.target && (	×
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.
NEW 24	if (!isClickedOnBackdrop) {	×
NEW 25	return;	×
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 / 12744940249

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