forked from DefinitelyTyped/DefinitelyTyped
/
react-confirm-tests.tsx
61 lines (50 loc) · 1.57 KB
/
react-confirm-tests.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
import * as React from 'react';
import { confirmable, createConfirmation, ReactConfirmProps } from 'react-confirm';
interface CustomModalProps {
title: string;
}
class CustomModal extends React.Component<CustomModalProps & ReactConfirmProps> {
modalStyle() {
return this.props.show ? { display: 'none' } : undefined;
}
render() {
return (
<div style={this.modalStyle()}>
<h1>{this.props.title}</h1>
<div>
{this.props.confirmation}
</div>
<div>
<button onClick={() => this.props.proceed()}>Yes</button>
<button onClick={() => this.props.cancel()}>No</button>
</div>
</div>
);
}
}
// Adds ReactConfirmProps to CustomModal component
const ConfirmModal = confirmable(CustomModal);
// This is the function you need to call to open your modal, then you can use the
// Promise object it returns to handle "proceed()" or "cancel()" functions.
const confirm = createConfirmation(ConfirmModal);
const markup = (
<div>
<b>Are you sure you want to delete this item?</b>
</div>
);
// This is how you can detect what option ("Yes" or "No") the user has chosen.
confirm({ confirmation: markup })
.then((result) => {
// User chose "Yes"
})
.catch((result) => {
// User chose "No"
});
const text = "Are you sure you want to buy this product?";
confirm({ confirmation: text })
.then((result) => {
// User chose "Yes"
})
.catch((result) => {
// User chose "No"
});