All files / components/Modal LegacyModal.jsx

38.88% Statements 28/72
100% Branches 1/1
0% Functions 0/6
38.88% Lines 28/72

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 731x 1x 1x 1x 1x 1x 1x 1x 1x                       1x 1x     1x 1x     1x 1x         1x 1x                                                 1x 1x 1x   1x 1x 1x 1x 1x 1x 1x 1x  
import React, { Component } from 'react';
import { render } from 'react-dom';
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 }) => {
  render(<Modal content={content} showModal={true} />, main);
};
 
Modal.propTypes = {
  contentLabel: PropTypes.string,
  content: PropTypes.string,
};
 
export default displayModal;