Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | import React, { useMemo } from 'react';
import { Typography, useTheme } from '@mui/material';
import DialogBox, { DialogBoxSize } from '../DialogBox/DialogBox';
import Button, { ButtonPriority, ButtonType } from '../Button/Button';
import { IconName } from '../Icon/icons';
/**
* A generic confirm modal built on top of DialogBox.
* Most properties are optional with default values.
* Required properties are commented as such.
*/
export type ConfirmProps = {
confirmButtonDisabled?: boolean; // optional disabled state for confirm button
confirmButtonIcon?: IconName; // optional icon for confirm button
confirmButtonId?: string; // defaults to 'confirm-submit'
confirmButtonPriority?: ButtonPriority; // defaults to 'primary'
confirmButtonText: string; // required, text of confirm button
confirmButtonType?: ButtonType; // defaults to 'productive'
closeButtonId?: string; // defaults to 'confirm-close'
closeButtonText?: string; // absence of close text will hide the close button
message: string | string[] | React.ReactNode; // required, the message content
onClose?: () => void; // absence of onClose will hide the close button
onConfirm: () => void; // required, callback on confirm button
open?: boolean; // defaults to true, whether confirm modal is open
size?: DialogBoxSize; // optional defaults to 'medium'
textStyle?: Record<string, any>; // option style override for message text
title: string; // required, title of confirm modal
};
export default function Confirm({
confirmButtonDisabled,
confirmButtonIcon,
confirmButtonId,
confirmButtonPriority,
confirmButtonText,
confirmButtonType,
closeButtonId,
closeButtonText,
message,
onClose,
onConfirm,
open,
size,
textStyle,
title,
}: ConfirmProps): JSX.Element {
const theme = useTheme();
const middleButtons = useMemo(() => {
const buttons = [
<Button
disabled={confirmButtonDisabled}
icon={confirmButtonIcon}
id={confirmButtonId || 'confirm-submit'}
key='button-2'
label={confirmButtonText}
onClick={onConfirm}
priority={confirmButtonPriority || 'primary'}
type={confirmButtonType || 'productive'}
/>
];
if (onClose && closeButtonText) {
buttons.unshift(
<Button
id={closeButtonId || 'confirm-close'}
key='button-1'
label={closeButtonText}
onClick={onClose}
priority='secondary'
type='passive'
/>,
);
}
return buttons;
}, [
confirmButtonDisabled,
confirmButtonIcon,
confirmButtonId,
confirmButtonPriority,
confirmButtonText,
confirmButtonType,
closeButtonId,
closeButtonText,
onClose,
onConfirm,
]);
const content = useMemo(() => {
const text = (str: string, key?: string) => {
return (
<Typography
color={theme.palette.TwClrTxt}
fontSize='16px'
fontWeight={400}
key={key}
lineHeight='24px'
textAlign='center'
sx={{
marginBottom: theme.spacing(1),
'&:last-child': {
marginBottom: 0,
},
...(textStyle || {})
}}
>{str}</Typography>
);
};
if (typeof message === 'string') {
return text(message);
} else if (Array.isArray(message)) {
return (
<>
{message.map((str, i) => text(str, `${str}_${i}`))}
</>
);
} else {
return message;
}
}, [message, textStyle, theme]);
return (
<DialogBox
onClose={onClose}
open={open ?? true}
title={title}
size={size || 'medium'}
middleButtons={middleButtons}
>
{content}
</DialogBox>
);
}
|