This repository has been archived by the owner on May 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 72
/
NotificationDialogWithFocus.jsx
83 lines (72 loc) · 2.6 KB
/
NotificationDialogWithFocus.jsx
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
import React from 'react';
import Button from 'terra-button';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import Popup from 'terra-popup';
import Placeholder from 'terra-doc-template/lib/Placeholder';
import NotificationDialog, { NotificationDialogVariants } from 'terra-notification-dialog';
const clickConfirm = () => {
alert('You clicked confirm'); // eslint-disable-line no-alert
};
const propTypes = {
disclosureManager: disclosureManagerShape,
};
class NotificationDialogWithFocus extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
this.handlePopupButtonClick = this.handlePopupButtonClick.bind(this);
this.handlePopupRequestClose = this.handlePopupRequestClose.bind(this);
}
handleOpenModal() {
this.setState({ isOpen: true });
}
handleCloseModal() {
this.setState({ isOpen: false });
}
handlePopupButtonClick() {
this.setState({ open: true });
}
handlePopupRequestClose() {
this.setState({ open: false });
}
render() {
return (
<div>
<NotificationDialog
variant={NotificationDialogVariants.ALERT}
isOpen={this.state.isOpen}
onRequestClose={this.handleCloseModal}
title="Make sure that the title relates directly to the choices."
startMessage="The Main Instruction is text used to provide more detail or define terminology. Don’t repeat the title verbatim."
acceptAction={{
text: 'Confirm',
onClick: clickConfirm,
}}
rejectAction={{
text: 'Close',
onClick: this.handleCloseModal,
}}
buttonOrder="acceptFirst"
emphasizedAction="accept"
/>
<Button text="Trigger NotificationDialog" onClick={this.handleOpenModal} id="trigger-notification-dialog" />
<Button text="Dismiss" onClick={this.props.disclosureManager.dismiss} id="dismiss-modal" />
<Popup
isArrowDisplayed
isOpen={this.state.open}
onRequestClose={this.handlePopupRequestClose}
targetRef={() => document.getElementById('popup-in-modal')}
>
<Placeholder title="Popup Content" />
</Popup>
<Button id="popup-in-modal" text="Popup In Modal" onClick={this.handlePopupButtonClick} />
</div>
);
}
}
NotificationDialogWithFocus.propTypes = propTypes;
export default withDisclosureManager(NotificationDialogWithFocus);