53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
|
||
|
|
|
||
|
|
const modalStyle = function() {
|
||
|
|
let top = 50;
|
||
|
|
let left = 50;
|
||
|
|
|
||
|
|
return {
|
||
|
|
position: "absolute",
|
||
|
|
width: 400,
|
||
|
|
zIndex: 1040,
|
||
|
|
top: top + "%",
|
||
|
|
left: left + "%",
|
||
|
|
border: "1px solid #e5e5e5",
|
||
|
|
backgroundColor: "white",
|
||
|
|
boxShadow: "0 5px 15px rgba(0,0,0,.5)",
|
||
|
|
padding: 20
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
class NotificationModal extends React.Component {
|
||
|
|
handleOpen = () => {
|
||
|
|
this.props.onModalOpen();
|
||
|
|
};
|
||
|
|
handleClose = () => {
|
||
|
|
this.props.onModalClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { modal } = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<button onClick={this.handleOpen}>Open Modal</button>
|
||
|
|
|
||
|
|
<div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
|
||
|
|
<div>
|
||
|
|
<h4 id="modal-label">Text in a modal</h4>
|
||
|
|
<input type="radio" name="send-option" value="Email" />
|
||
|
|
Email
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="send-option" value="SMS" />
|
||
|
|
SMS <br />
|
||
|
|
<button onClick={this.handleClose}>Close Modal</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default notificationmodalwrapper(NotificationModal);
|