allow modal to close on outside click

src/features/helpers/Helpers.js

@@ -6,52 +6,52 @@ import './rcSelectTheme.css';
 const SliderWithToolTip = createSliderWithTooltip(RCSlider);
 
 const SelectStyle = {
-  control: (provided) => ({
-    ...provided,
-    width: '100%',
-  }),
+    control: (provided) => ({
+        ...provided,
+        width: '100%',
+    }),
 };
 
 const Slider = (props) => {
-  return (
-    <SliderWithToolTip
-      tipFormatter={(v) => `${v}`}
-      min={props.min}
-      max={props.max}
-      value={props.parameter}
-      onChange={(v) => props.onChange(v)}
-    />
-  );
+    return (
+        <SliderWithToolTip
+            tipFormatter={(v) => `${v}`}
+            min={props.min}
+            max={props.max}
+            value={props.parameter}
+            onChange={(v) => props.onChange(v)}
+        />
+    );
 };
 
 const SelectList = (props) => {
-  return (
-    <Select
-      value={{ value: props.value }}
-      options={props.list}
-      getOptionLabel={
-        props.labelFunction
-          ? props.labelFunction
-          : (option) => `${option.value}`
-      }
-      onChange={(e) => props.onChange(e.value)}
-      styles={SelectStyle}
-    />
-  );
+    return (
+        <Select
+            value={{ value: props.value }}
+            options={props.list}
+            getOptionLabel={
+                props.labelFunction
+                    ? props.labelFunction
+                    : (option) => `${option.value}`
+            }
+            onChange={(e) => props.onChange(e.value)}
+            styles={SelectStyle}
+        />
+    );
 };
 
 const Checkbox = (props) => {
-  return (
-    <div>
-      <span>{`${props.name}:`}</span>
-      <input
-        type="checkbox"
-        value={props.parameter}
-        defaultChecked={props.parameter}
-        onChange={(e) => props.onChange(e.target.checked)}
-      />
-    </div>
-  );
+    return (
+        <div>
+            <span>{`${props.name}:`}</span>
+            <input
+                type="checkbox"
+                value={props.parameter}
+                defaultChecked={props.parameter}
+                onChange={(e) => props.onChange(e.target.checked)}
+            />
+        </div>
+    );
 };
 
 export { Slider, SelectList, Checkbox };

src/features/io/IO.css

@@ -14,11 +14,3 @@
     border: 0.09em solid slategray;
     border-radius: 6px;
 }
-
-.show {
-    display: flex;
-}
-
-.hide {
-    display: none;
-}

src/features/io/IO.js

@@ -65,11 +65,7 @@ const Dropzone = ({ setFile }) => {
     );
 };
 
-export default function IO({ show }) {
-    const display = show
-        ? 'dropzone-container show'
-        : 'dropzone-container hide';
-
+export default function IO() {
     const [file, setFile] = useState(null);
 
     useEffect(() => {
@@ -77,8 +73,10 @@ export default function IO({ show }) {
     });
 
     return (
-        <div className={display}>
+        <div className="dropzone-container">
             <Dropzone className="dropzone-modal" setFile={setFile} />
         </div>
     );
 }
+
+/* TODO -- possibly add clicking outside the modal to close it*/

src/features/menu/Menu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import IO from '../io/IO';
 import { useDispatch, useSelector } from 'react-redux'; // probably temporarily here
 import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here
@@ -6,31 +6,34 @@ import logo from '../../1f3b9.svg';
 import './Menu.css';
 
 // for things such as (do you want to save? or do you want to reset things?)
-const Modal = ({ show, handleSave, handleNoSave, handleClose }) => {
+const Modal = ({ children, show, setShow }) => {
+    const node = useRef();
     const modalDisplay = show ? 'modal modal-display' : 'modal modal-hide';
+
+    useEffect(() => {
+        const current = node.current;
+
+        const handleOutsideClick = (event) => {
+            console.log('clicking anywhere');
+            if (current.contains(event.target)) {
+                return;
+            } else setShow();
+        };
+
+        if (show) {
+            document.addEventListener('mousedown', handleOutsideClick);
+        } else {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [show, setShow]);
+
     return (
-        <div className={modalDisplay}>
-            <div className="modal-main">
-                <span className="modal-header">Save Changes</span>
-                <span className="modal-text">
-                    Do you want to save your changes?
-                </span>
-                <button
-                    className="menu-button button-save"
-                    onClick={handleSave}>
-                    Save Changes
-                </button>
-                <button
-                    className="menu-button button-no-save"
-                    onClick={handleNoSave}>
-                    Don't Save
-                </button>
-                <button
-                    className="menu-button button-cancel"
-                    onClick={handleClose}>
-                    Cancel
-                </button>
-            </div>
+        <div ref={node} className={modalDisplay}>
+            {children}
         </div>
     );
 };
@@ -73,19 +76,37 @@ export default function MainMenu() {
 
     return (
         <div>
-            <Modal
-                show={showModal.saveCheck}
-                handleClose={showSaveCheck}
-                handleSave={() => {
-                    showSaveCheck();
-                    HandleClick(); // temporary while I implement the binary parsing stuff
-                }}
-                handleNoSave={() => {
-                    dispatch(parameterRefreshAll());
-                    showSaveCheck();
-                    HandleClick();
-                }}
-            />
+            <Modal show={showModal.saveCheck} setShow={showSaveCheck}>
+                <div className="modal-main">
+                    <span className="modal-header">Save Changes</span>
+                    <span className="modal-text">
+                        Do you want to save your changes?
+                    </span>
+                    <button
+                        className="menu-button button-save"
+                        onClick={() => {
+                            showSaveCheck();
+                            HandleClick();
+                        }} // temporary while I implement the binary parsing stuff
+                    >
+                        Save Changes
+                    </button>
+                    <button
+                        className="menu-button button-no-save"
+                        onClick={() => {
+                            dispatch(parameterRefreshAll());
+                            showSaveCheck();
+                            HandleClick();
+                        }}>
+                        Don't Save
+                    </button>
+                    <button
+                        className="menu-button button-cancel"
+                        onClick={showSaveCheck}>
+                        Cancel
+                    </button>
+                </div>
+            </Modal>
             <div
                 className={`menu ${open.className}`}
                 onAnimationEnd={AnimationEnd}>
@@ -111,7 +132,9 @@ export default function MainMenu() {
                     </button>
                 </div>
             </div>
-            <IO show={showModal.ioModal} />
+            <Modal show={showModal.ioModal} setShow={showIOModal}>
+                <IO />
+            </Modal>
             <button className="menu-open-button" onClick={HandleClick} />
         </div>
     );