Contents

import React, { useEffect } from "react";

import useModalStore from "../stores/useModalStore";

export default function Modal() {
  const component = useModalStore((state) => state.component);
  const close = useModalStore((state) => state.close);

  const handleClose = (evt: Event) => {
    evt.stopPropagation();
    evt.preventDefault();
    close();
  };

  const handleKeypress = (evt: KeyboardEvent) => {
    if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
      handleClose(evt);
    }
  };

  useEffect(() => {
    if (component) {
      document.body.classList.add("modal");
    } else {
      document.body.classList.remove("modal");
    }
  }, [component]);

  useEffect(() => {
    window.addEventListener("keypress", handleKeypress);
    return () => {
      window.removeEventListener("keypress", handleKeypress);
    };
  }, []);

  if (component) {
    return (
      <div className="modal-wrapper open">
        <div className="background" onClick={handleClose} />
        <div className="modal">
          {component}
        </div>
      </div>
    );
  } else {
    return (<div className="modal-wrapper"></div>);
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
pages_core-3.12.4	app/javascript/components/Modal.tsx
pages_core-3.12.3	app/javascript/components/Modal.tsx
pages_core-3.12.2	app/javascript/components/Modal.tsx