graceful-unwinding-widget/es/modal.js

graceful-unwinding-widget React component

import React, { Fragment, useEffect } from 'react';
import { StyledModal, StyledOverlay, CloseIcon } from './styles';

export default function Modal(props) {
  useEffect(function () {
    if (props.isOpen) {
      document.addEventListener("keydown", handleKeyDown, false);
    } else {
      document.removeEventListener("keydown", handleKeyDown, false);
    }

    return function () {
      document.removeEventListener("keydown", handleKeyDown, false);
    };
  }, [props.isOpen]);

  function handleKeyDown(event) {
    if (event.keyCode === 27) {
      props.onEscPressed();
    }
  }
  return React.createElement(
    Fragment,
    null,
    props.isOpen && React.createElement(
      StyledOverlay,
      { onClick: props.onBackgroundClick, onKeyDown: handleKeyDown },
      React.createElement(
        StyledModal,
        { onClick: function onClick(e) {
            return e.stopPropagation();
          } },
        React.createElement(CloseIcon, { onClick: props.onCloseClick }),
        props.children
      )
    )
  );
}