/
GenericModal.tsx
107 lines (94 loc) · 2.72 KB
/
GenericModal.tsx
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
import type { Icon } from '@rocket.chat/fuselage';
import { Button, Modal } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { FC, ComponentProps, ReactElement, ReactNode } from 'react';
import React from 'react';
import type { RequiredModalProps } from './withDoNotAskAgain';
import { withDoNotAskAgain } from './withDoNotAskAgain';
type VariantType = 'danger' | 'warning' | 'info' | 'success';
type GenericModalProps = RequiredModalProps & {
variant?: VariantType;
children?: ReactNode;
cancelText?: ReactNode;
confirmText?: ReactNode;
title?: string | ReactElement;
icon?: ComponentProps<typeof Icon>['name'] | ReactElement | null;
confirmDisabled?: boolean;
tagline?: ReactNode;
onCancel?: () => void;
onClose?: () => void;
onConfirm: () => void;
} & Omit<ComponentProps<typeof Modal>, 'title'>;
const iconMap: Record<string, ComponentProps<typeof Icon>['name']> = {
danger: 'modal-warning',
warning: 'modal-warning',
info: 'info',
success: 'check',
};
const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> => {
switch (variant) {
case 'danger':
return { danger: true };
case 'warning':
return { primary: true };
default:
return {};
}
};
const renderIcon = (icon: GenericModalProps['icon'], variant: VariantType): ReactNode => {
if (icon === null) {
return null;
}
if (icon === undefined) {
return <Modal.Icon color={variant} name={iconMap[variant]} />;
}
if (typeof icon === 'string') {
return <Modal.Icon name={icon} />;
}
return icon;
};
const GenericModal: FC<GenericModalProps> = ({
variant = 'info',
children,
cancelText,
confirmText,
title,
icon,
onCancel,
onClose = onCancel,
onConfirm,
dontAskAgain,
confirmDisabled,
tagline,
...props
}) => {
const t = useTranslation();
return (
<Modal {...props}>
<Modal.Header>
{renderIcon(icon, variant)}
<Modal.HeaderText>
{tagline && <Modal.Tagline>{tagline}</Modal.Tagline>}
<Modal.Title>{title ?? t('Are_you_sure')}</Modal.Title>
</Modal.HeaderText>
<Modal.Close title={t('Close')} onClick={onClose} />
</Modal.Header>
<Modal.Content fontScale='p2'>{children}</Modal.Content>
<Modal.Footer justifyContent={dontAskAgain ? 'space-between' : 'end'}>
{dontAskAgain}
<Modal.FooterControllers>
{onCancel && (
<Button secondary onClick={onCancel}>
{cancelText ?? t('Cancel')}
</Button>
)}
<Button {...getButtonProps(variant)} onClick={onConfirm} disabled={confirmDisabled}>
{confirmText ?? t('Ok')}
</Button>
</Modal.FooterControllers>
</Modal.Footer>
</Modal>
);
};
export const GenericModalDoNotAskAgain = withDoNotAskAgain<GenericModalProps>(GenericModal);
export default GenericModal;