142 lines
4.7 KiB
JavaScript
142 lines
4.7 KiB
JavaScript
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
|
|
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 = ({ 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 ref={node} className={modalDisplay}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function MainMenu() {
|
|
const unsaved = useSelector((state) => state.parameters.unsaved);
|
|
const [open, setOpen] = useState({
|
|
className: '',
|
|
openState: true,
|
|
});
|
|
const [showModal, setShowModal] = useState({
|
|
saveCheck: false,
|
|
ioModal: false,
|
|
});
|
|
const dispatch = useDispatch();
|
|
|
|
const HandleClick = () => {
|
|
setOpen({
|
|
className: open.openState
|
|
? 'menu-true-animation'
|
|
: 'menu-false-animation',
|
|
openState: !open.openState,
|
|
});
|
|
};
|
|
|
|
const AnimationEnd = () => {
|
|
setOpen({
|
|
...open,
|
|
className: `menu-${open.openState}`,
|
|
});
|
|
};
|
|
|
|
const showSaveCheck = () => {
|
|
setShowModal({ ...showModal, saveCheck: !showModal.saveCheck });
|
|
};
|
|
|
|
const showIOModal = () => {
|
|
setShowModal({ ...showModal, ioModal: !showModal.ioModal });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<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}>
|
|
<img src={logo} className="menu-logo" alt="logo" />
|
|
<header className="menu-title">
|
|
<h1>Alapatch</h1>
|
|
<h2>A microKORG Patch Editor</h2>
|
|
</header>
|
|
<div className="menu-button-container">
|
|
<button
|
|
className="menu-button"
|
|
onClick={() => {
|
|
!unsaved ? HandleClick() : showSaveCheck();
|
|
}}>
|
|
New Patch
|
|
</button>
|
|
<button
|
|
className="menu-button"
|
|
onClick={() => {
|
|
!unsaved ? showIOModal() : showSaveCheck();
|
|
}}>
|
|
Load Patch
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Modal show={showModal.ioModal} setShow={showIOModal}>
|
|
<IO />
|
|
</Modal>
|
|
<button className="menu-open-button" onClick={HandleClick} />
|
|
</div>
|
|
);
|
|
}
|