-
Notifications
You must be signed in to change notification settings - Fork 178
/
ActionConfirm.tsx
110 lines (104 loc) · 3.32 KB
/
ActionConfirm.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
108
109
110
import * as React from "react";
import { DangerDialog } from "./DangerDialog";
type Props = {
id: string;
type: string;
name: string;
itemName: string;
icon: string;
selected: any[];
onConfirm: (type: string, selected: any[], forceState: any) => any;
canForce: boolean;
forceName?: string;
onClose: () => void;
children?: React.ReactNode;
/** whether the dialog should be shown or hidden */
isOpen: boolean;
};
type State = {
force: boolean;
};
/**
* A pop-up dialog to confirm an action on a selection of items.
* This is based on the DangerDialog, but adds text to it and a force
* checkbox.
* Related items are passed to the 'selected' property as an array. Each
* item is expected to have a 'name' property.
*/
export class ActionConfirm extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
force: false,
};
}
closePopUp = () => {
this.setState({ force: false });
this.props.onClose();
};
render() {
return (
<DangerDialog
isOpen={this.props.isOpen}
id={this.props.id}
title={t(
`${this.props.name} ${
this.props.selected.length === 1 ? this.props.itemName : `Selected ${this.props.itemName}(s)`
}`
)}
content={
<>
{this.props.children}
{this.props.canForce && (
<p>
<input
type="checkbox"
id="force"
checked={this.state.force}
onChange={(event) => this.setState({ force: event.target.checked })}
/>
<label htmlFor="force">{this.props.forceName}</label>
</p>
)}
{this.props.selected.length === 1 && (
<span>
{/* TODO: Here and below, this translation logic needs to be changed to whole sentences from parents */}
{t("Are you sure you want to {action} {name}", {
action:
this.state.force && this.props.forceName
? this.props.forceName.toLowerCase()
: this.props.name.toLowerCase(),
name: this.props.itemName.toLowerCase(),
})}
<strong>{this.props.selected[0].name}</strong>?
</span>
)}
{this.props.selected.length > 1 && (
<span>
{t("Are you sure you want to {action} the selected {name}s? ({count} {name}s selected)", {
action:
this.state.force && this.props.forceName
? this.props.forceName.toLowerCase()
: this.props.name.toLowerCase(),
name: this.props.itemName.toLowerCase(),
count: this.props.selected.length,
})}
?
</span>
)}
</>
}
onConfirm={() =>
this.props.onConfirm(
this.props.type,
this.props.selected,
this.props.canForce ? { force: this.state.force } : {}
)
}
onClose={() => this.closePopUp()}
submitText={this.state.force && this.props.forceName ? this.props.forceName : this.props.name}
submitIcon={this.props.icon}
/>
);
}
}