Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x 2x | import { Component } from "react";
import { createRoot } from "react-dom/client";
import ReactModal from "react-modal";
import { CloseXIcon } from "../../lib/SvgComponents.jsx";
import SanitizedContent from "../SanitizedContent";
import PropTypes from "prop-types";
class Modal extends Component {
constructor() {
super();
this.state = {
showModal: true,
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
ReactModal.setAppElement("body > *:not(.ReactModalPortal)");
}
handleOpenModal() {
this.setState({ showModal: true });
}
handleCloseModal() {
this.setState({ showModal: false });
}
UNSAFE_componentWillReceiveProps(newProps) {
this.setState({
showModal: newProps.showModal,
});
}
render() {
return (
<div>
<ReactModal
role="alertdialog"
contentLabel={this.props.contentLabel || "Informational Modal Dialog"}
isOpen={this.state.showModal}
className="info-modal-content"
overlayClassName="info-modal-overlay"
onRequestClose={this.handleCloseModal}
>
<button
className="closeModal"
aria-label="Close modal"
onClick={this.handleCloseModal}
>
<svg className="close-icon" aria-hidden="true">
<CloseXIcon />
</svg>
</button>
<SanitizedContent html={this.props.content} />
</ReactModal>
</div>
);
}
}
const displayModal = ({ content, main }) => {
const root = createRoot(document.getElementById("root"));
root.render(<Modal content={content} showModal={true} />, main);
};
Modal.propTypes = {
contentLabel: PropTypes.string,
content: PropTypes.string,
};
export default displayModal;
|