update help box to close when clicked off (bc636c7f) · Commits · aflab / astrogeology / Asc Geostac

src/components/presentational/HelpBox.jsx

+18 −2

Original line number	Diff line number	Diff line
		import React, { useState } from 'react';
		import React, { useState, useRef, useEffect } from 'react';

		function RasterVsVectorBox() {
		return (
		@@ -50,6 +50,22 @@ export default function HelpBox({ isOpen, onClose }) {
		if(!isOpen) return null;

		const [showSubPopup, setShowSubPopup] = useState(null);
		const popupRef = useRef();

		useEffect(() => {
		function handleClickOutside(event) {
		if (event.target === popupRef.current) {
		onClose();
		}
		}

		if (isOpen) {
		document.addEventListener('mousedown', handleClickOutside);
		}
		return () => {
		document.removeEventListener('mousedown', handleClickOutside);
		};
		}, [isOpen, onClose]);

		const handleRasterVsVectorClick = () => {
		setShowSubPopup('rasterVsVector');
		@@ -64,7 +80,7 @@ export default function HelpBox({ isOpen, onClose }) {
		};

		return (
		<div id="helpBoxBackground">
		<div id="helpBoxBackground" ref={popupRef}>
		<div className="helpBoxContent">
		<h2>Help Menu</h2>
		<button className="helpButton" onClick={handleRasterVsVectorClick}>Raster vs Vector</button>