2021-04-05 11:59:22 +00:00
|
|
|
import React from 'react';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { Button, Modal } from 'react-bootstrap';
|
2021-04-05 12:17:33 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-04-05 11:59:22 +00:00
|
|
|
|
2021-04-07 07:18:45 +00:00
|
|
|
export interface MessageAttributes {
|
|
|
|
title?: string;
|
|
|
|
staticBackdrop?: boolean;
|
2021-05-11 07:36:14 +00:00
|
|
|
nonClosable?: boolean;
|
2021-05-07 03:31:31 +00:00
|
|
|
content?: any;
|
2021-08-13 02:38:38 +00:00
|
|
|
close?: { text?: string; variant?: string; action?: () => void };
|
2021-04-23 10:18:41 +00:00
|
|
|
proceed?: {
|
|
|
|
text: string;
|
2021-05-07 08:49:44 +00:00
|
|
|
action: () => void;
|
2021-04-25 15:35:43 +00:00
|
|
|
variant: string;
|
2021-04-23 10:18:41 +00:00
|
|
|
disabled?: boolean;
|
|
|
|
};
|
2021-04-07 07:18:45 +00:00
|
|
|
}
|
2021-04-28 06:38:52 +00:00
|
|
|
|
|
|
|
export type SetDialogMessage = React.Dispatch<
|
|
|
|
React.SetStateAction<MessageAttributes>
|
|
|
|
>;
|
2021-04-19 17:29:03 +00:00
|
|
|
type Props = React.PropsWithChildren<{
|
2021-04-05 11:59:22 +00:00
|
|
|
show: boolean;
|
|
|
|
onHide: () => void;
|
2021-04-07 09:21:44 +00:00
|
|
|
attributes: MessageAttributes;
|
2021-04-26 04:21:14 +00:00
|
|
|
size?: 'sm' | 'lg' | 'xl';
|
2021-04-19 17:29:03 +00:00
|
|
|
}>;
|
2021-04-07 09:21:44 +00:00
|
|
|
export default function MessageDialog({
|
|
|
|
attributes,
|
|
|
|
children,
|
|
|
|
...props
|
|
|
|
}: Props) {
|
2021-04-20 10:57:25 +00:00
|
|
|
if (!attributes) {
|
|
|
|
return <Modal />;
|
|
|
|
}
|
2021-04-05 11:59:22 +00:00
|
|
|
return (
|
2021-04-05 15:20:58 +00:00
|
|
|
<Modal
|
2021-04-26 04:21:14 +00:00
|
|
|
{...props}
|
2021-05-11 07:36:14 +00:00
|
|
|
onHide={attributes.nonClosable ? () => null : props.onHide}
|
2021-04-05 15:20:58 +00:00
|
|
|
centered
|
2021-09-10 07:53:31 +00:00
|
|
|
backdrop={attributes.staticBackdrop ? 'static' : true}>
|
2021-05-11 07:36:14 +00:00
|
|
|
<Modal.Header
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ borderBottom: 'none' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
closeButton={!attributes.nonClosable}>
|
2021-04-20 10:57:25 +00:00
|
|
|
{attributes.title && (
|
2021-08-13 02:38:38 +00:00
|
|
|
<Modal.Title>{attributes.title}</Modal.Title>
|
2021-04-05 11:59:22 +00:00
|
|
|
)}
|
2021-04-19 10:44:03 +00:00
|
|
|
</Modal.Header>
|
2021-04-19 17:29:03 +00:00
|
|
|
{(children || attributes?.content) && (
|
2021-05-30 16:56:48 +00:00
|
|
|
<Modal.Body style={{ borderTop: '1px solid #444' }}>
|
2021-08-13 02:38:38 +00:00
|
|
|
{children || (
|
|
|
|
<p style={{ fontSize: '1.25rem', marginBottom: 0 }}>
|
|
|
|
{attributes.content}
|
|
|
|
</p>
|
|
|
|
)}
|
2021-04-19 11:21:46 +00:00
|
|
|
</Modal.Body>
|
|
|
|
)}
|
2021-05-11 05:32:01 +00:00
|
|
|
{(attributes.close || attributes.proceed) && (
|
2021-05-30 16:56:48 +00:00
|
|
|
<Modal.Footer style={{ borderTop: 'none' }}>
|
2021-05-11 05:32:01 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
flexWrap: 'wrap',
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
2021-05-11 05:32:01 +00:00
|
|
|
{attributes.close && (
|
|
|
|
<Button
|
2021-08-13 02:38:38 +00:00
|
|
|
variant={`outline-${
|
|
|
|
attributes.close?.variant ?? 'secondary'
|
|
|
|
}`}
|
2021-06-01 12:31:05 +00:00
|
|
|
onClick={() => {
|
2021-08-14 05:17:38 +00:00
|
|
|
attributes.close.action &&
|
|
|
|
attributes.close?.action();
|
2021-08-13 17:04:39 +00:00
|
|
|
props.onHide();
|
2021-06-01 10:58:50 +00:00
|
|
|
}}
|
2021-05-11 05:32:01 +00:00
|
|
|
style={{
|
|
|
|
padding: '6px 3em',
|
|
|
|
margin: '0 20px',
|
|
|
|
marginBottom: '20px',
|
|
|
|
flex: 1,
|
|
|
|
whiteSpace: 'nowrap',
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
2021-05-11 05:32:01 +00:00
|
|
|
{attributes.close?.text ?? constants.OK}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
{attributes.proceed && (
|
|
|
|
<Button
|
2021-08-13 02:38:38 +00:00
|
|
|
variant={`outline-${
|
|
|
|
attributes.proceed?.variant ?? 'primary'
|
|
|
|
}`}
|
2021-05-11 05:32:01 +00:00
|
|
|
onClick={() => {
|
|
|
|
attributes.proceed.action();
|
2021-06-24 08:30:12 +00:00
|
|
|
props.onHide();
|
2021-05-11 05:32:01 +00:00
|
|
|
}}
|
|
|
|
style={{
|
|
|
|
padding: '6px 3em',
|
|
|
|
margin: '0 20px',
|
|
|
|
marginBottom: '20px',
|
|
|
|
flex: 1,
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
}}
|
2021-08-13 02:38:38 +00:00
|
|
|
disabled={attributes.proceed.disabled}>
|
2021-05-11 05:32:01 +00:00
|
|
|
{attributes.proceed.text}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</Modal.Footer>
|
|
|
|
)}
|
2021-04-05 11:59:22 +00:00
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|