4392118170

Build Type

push

github

Committed by GitHub

Commit Message

feat: 🎸 Allow specifying the order of confirm & cancel buttons (#70)

Run Details

50 of 54 branches covered (92.59%)

Branch coverage included in aggregate %.

6 of 6 new or added lines in 1 file covered. (100.0%)

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 {...cancellationButtonProps} onClick={onCancel}>
        {cancellationText}
      </Button>
    } else if (buttonType === 'confirm') {
        return (<Button
            color="primary"
            disabled={confirmationButtonDisabled}
            {...confirmationButtonProps}
            onClick={onConfirm}
          >
            {confirmationText}
          </Button>)
    } else {
      throw new Error('Supported button types are only `confirm` and `cancel`')
    }
  });

  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 !hideCancelButton && <Button {...cancellationButtonProps} onClick={onCancel}>	26✔
58	{cancellationText}
59	</Button>
60	} else if (buttonType === 'confirm') {	26!
61	return (<Button	26✔
62	color="primary"
63	disabled={confirmationButtonDisabled}
64	{...confirmationButtonProps}
65	onClick={onConfirm}
66	>
67	{confirmationText}
68	</Button>)
69	} else {
70	throw new Error('Supported button types are only `confirm` and `cancel`')	×
71	}
72	});
73
74	return (	26✔
75	<Dialog
76	fullWidth
77	{...dialogProps}
78	open={open}
79	onClose={allowClose ? onClose : null}	26!
80	>
81	{title && <DialogTitle {...titleProps}>{title}</DialogTitle>}	52✔
82	{content ? (	26✔
83	<DialogContent {...contentProps}>
84	{content}
85	{confirmationContent}
86	</DialogContent>
87	) : description ? (	25✔
88	<DialogContent {...contentProps}>
89	<DialogContentText>{description}</DialogContentText>
90	{confirmationContent}
91	</DialogContent>
92	) : (
93	confirmationKeyword && (	27✔
94	<DialogContent {...contentProps}>{confirmationContent}</DialogContent>
95	)
96	)}
97	<DialogActions {...dialogActionsProps}>
98	{dialogActions}
99	</DialogActions>
100	</Dialog>
101	);
102	};
103
104	export default ConfirmationDialog;

jonatanklosko / material-ui-confirm / 4392118170

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