graceful-unwinding-widget/lib/modal.js

graceful-unwinding-widget React component

'use strict';

exports.__esModule = true;
exports.default = Modal;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styles = require('./styles');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function Modal(props) {
  (0, _react.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 _react2.default.createElement(
    _react.Fragment,
    null,
    props.isOpen && _react2.default.createElement(
      _styles.StyledOverlay,
      { onClick: props.onBackgroundClick, onKeyDown: handleKeyDown },
      _react2.default.createElement(
        _styles.StyledModal,
        { onClick: function onClick(e) {
            return e.stopPropagation();
          } },
        _react2.default.createElement(_styles.CloseIcon, { onClick: props.onCloseClick }),
        props.children
      )
    )
  );
}
module.exports = exports['default'];