/
DangerousActionDialog.js
93 lines (84 loc) · 2.63 KB
/
DangerousActionDialog.js
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
// @flow
import { Component } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import classnames from 'classnames';
import { intlShape } from 'react-intl';
import DialogCloseButton from './DialogCloseButton';
import Dialog from './Dialog';
import globalMessages from '../../i18n/global-messages';
import LocalizableError from '../../i18n/LocalizableError';
import CheckboxLabel from '../common/CheckboxLabel';
import styles from './DangerousActionDialog.scss';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
type Props = {|
+title: string,
+checkboxAcknowledge: string,
+isSubmitting: boolean,
+isChecked: boolean,
+toggleCheck: void => void,
+error: ?LocalizableError,
+children: Node,
+onCancel: void => void,
+primaryButton: {|
+label: string,
+onClick: void => PossiblyAsync<void>,
|},
+secondaryButton: {|
label?: string,
onClick: void => void,
primary?: boolean,
|},
|};
@observer
export default class DangerousActionDialog extends Component<Props> {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
intl: intlShape.isRequired,
};
render(): Node {
const { intl } = this.context;
const { isSubmitting, error } = this.props;
const dialogClasses = classnames(['removeWalletDialog', styles.dialog]);
const confirmButtonClasses = classnames([
'confirmButton',
styles.removeButton,
isSubmitting ? styles.isSubmitting : null,
]);
const actions = [
{
label: intl.formatMessage(globalMessages.cancel),
primary: false,
disabled: this.props.isSubmitting,
...(this.props.secondaryButton ?? Object.freeze({})),
},
{
primary: true,
className: confirmButtonClasses,
disabled: !this.props.isChecked ? true : undefined,
danger: true,
isSubmitting: this.props.isSubmitting,
...(this.props.primaryButton ?? Object.freeze({})),
},
];
return (
<Dialog
title={this.props.title}
actions={actions}
closeOnOverlayClick={false}
onClose={this.props.onCancel}
className={dialogClasses}
closeButton={<DialogCloseButton onClose={this.props.onCancel} />}
>
{this.props.children}
<div className={styles.checkbox}>
<CheckboxLabel
label={this.props.checkboxAcknowledge}
onChange={this.props.toggleCheck}
checked={this.props.isSubmitting || this.props.isChecked}
/>
</div>
{error ? <p className={styles.error}>{intl.formatMessage(error, error.values)}</p> : null}
</Dialog>
);
}
}