4392131086

Build Type

push

github

Committed by Jonatan Kłosko

Commit Message

3.0.9

Run Details

50 of 54 branches covered (92.59%)

Branch coverage included in aggregate %.

44 of 45 relevant lines covered (97.78%)

16.82 hits per line

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

90.91

/src/ConfirmationDialog.js

import React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import TextField from "@mui/material/TextField";

const ConfirmationDialog = ({
  open,
  options,
  onCancel,
  onConfirm,
  onClose,
}) => {
  const {
    title,
    description,
    content,
    confirmationText,
    cancellationText,
    dialogProps,
    dialogActionsProps,
    confirmationButtonProps,
    cancellationButtonProps,
    titleProps,
    contentProps,
    allowClose,
    confirmationKeyword,
    confirmationKeywordTextFieldProps,
    hideCancelButton,
    buttonOrder,
  } = options;

  const [confirmationKeywordValue, setConfirmationKeywordValue] =
    React.useState("");

  const confirmationButtonDisabled =
    confirmationKeyword && confirmationKeywordValue !== confirmationKeyword;

  const confirmationContent = (
    <>
      {confirmationKeyword && (
        <TextField
          onChange={(e) => setConfirmationKeywordValue(e.target.value)}
          value={confirmationKeywordValue}
          fullWidth
          {...confirmationKeywordTextFieldProps}
        />
      )}
    </>
  );

  const dialogActions = buttonOrder.map((buttonType) => {
    if (buttonType === "cancel") {
      return (
        !hideCancelButton && (
          <Button key="cancel" {...cancellationButtonProps} onClick={onCancel}>
            {cancellationText}
          </Button>
        )
      );
    }

    if (buttonType === "confirm") {
      return (
        <Button
          key="confirm"
          color="primary"
          disabled={confirmationButtonDisabled}
          {...confirmationButtonProps}
          onClick={onConfirm}
        >
          {confirmationText}
        </Button>
      );
    }

    throw new Error(
      `Supported button types are only "confirm" and "cancel", got: ${buttonType}`
    );
  });

  return (
    <Dialog
      fullWidth
      {...dialogProps}
      open={open}
      onClose={allowClose ? onClose : null}
    >
      {title && <DialogTitle {...titleProps}>{title}</DialogTitle>}
      {content ? (
        <DialogContent {...contentProps}>
          {content}
          {confirmationContent}
        </DialogContent>
      ) : description ? (
        <DialogContent {...contentProps}>
          <DialogContentText>{description}</DialogContentText>
          {confirmationContent}
        </DialogContent>
      ) : (
        confirmationKeyword && (
          <DialogContent {...contentProps}>{confirmationContent}</DialogContent>
        )
      )}
      <DialogActions {...dialogActionsProps}>{dialogActions}</DialogActions>
    </Dialog>
  );
};

export default ConfirmationDialog;

1	import React from "react";
2	import Button from "@mui/material/Button";
3	import Dialog from "@mui/material/Dialog";
4	import DialogActions from "@mui/material/DialogActions";
5	import DialogContent from "@mui/material/DialogContent";
6	import DialogContentText from "@mui/material/DialogContentText";
7	import DialogTitle from "@mui/material/DialogTitle";
8	import TextField from "@mui/material/TextField";
9
10	const ConfirmationDialog = ({	1✔
11	open,
12	options,
13	onCancel,
14	onConfirm,
15	onClose,
16	}) => {
17	const {
18	title,
19	description,
20	content,
21	confirmationText,
22	cancellationText,
23	dialogProps,
24	dialogActionsProps,
25	confirmationButtonProps,
26	cancellationButtonProps,
27	titleProps,
28	contentProps,
29	allowClose,
30	confirmationKeyword,
31	confirmationKeywordTextFieldProps,
32	hideCancelButton,
33	buttonOrder,
34	} = options;	26✔
35
36	const [confirmationKeywordValue, setConfirmationKeywordValue] =
37	React.useState("");	26✔
38
39	const confirmationButtonDisabled =
40	confirmationKeyword && confirmationKeywordValue !== confirmationKeyword;	26✔
41
42	const confirmationContent = (
43	<>	26✔
44	{confirmationKeyword && (	29✔
45	<TextField
46	onChange={(e) => setConfirmationKeywordValue(e.target.value)}	1✔
47	value={confirmationKeywordValue}
48	fullWidth
49	{...confirmationKeywordTextFieldProps}
50	/>
51	)}
52	</>
53	);
54
55	const dialogActions = buttonOrder.map((buttonType) => {	26✔
56	if (buttonType === "cancel") {	52✔
57	return (	26✔
58	!hideCancelButton && (	51✔
59	<Button key="cancel" {...cancellationButtonProps} onClick={onCancel}>
60	{cancellationText}
61	</Button>
62	)
63	);
64	}
65
66	if (buttonType === "confirm") {	26!
67	return (	26✔
68	<Button
69	key="confirm"
70	color="primary"
71	disabled={confirmationButtonDisabled}
72	{...confirmationButtonProps}
73	onClick={onConfirm}
74	>
75	{confirmationText}
76	</Button>
77	);
78	}
79
80	throw new Error(	×
81	`Supported button types are only "confirm" and "cancel", got: ${buttonType}`
82	);
83	});
84
85	return (	26✔
86	<Dialog
87	fullWidth
88	{...dialogProps}
89	open={open}
90	onClose={allowClose ? onClose : null}	26!
91	>
92	{title && <DialogTitle {...titleProps}>{title}</DialogTitle>}	52✔
93	{content ? (	26✔
94	<DialogContent {...contentProps}>
95	{content}
96	{confirmationContent}
97	</DialogContent>
98	) : description ? (	25✔
99	<DialogContent {...contentProps}>
100	<DialogContentText>{description}</DialogContentText>
101	{confirmationContent}
102	</DialogContent>
103	) : (
104	confirmationKeyword && (	27✔
105	<DialogContent {...contentProps}>{confirmationContent}</DialogContent>
106	)
107	)}
108	<DialogActions {...dialogActionsProps}>{dialogActions}</DialogActions>
109	</Dialog>
110	);
111	};
112
113	export default ConfirmationDialog;

jonatanklosko / material-ui-confirm / 4392131086

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