import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import { setTheme, selectTheme } from 'slices/emulatorSlice'; import Themes from 'constants/Themes'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faAdjust } from '@fortawesome/free-solid-svg-icons'; import Fab from '@material-ui/core/Fab'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; const useStyle = makeStyles((theme) => ({ fab: { position: 'absolute', bottom: theme.spacing(2), right: theme.spacing(2), }, menu: { // backgroundColor: theme.palette.background.raised, }, options: { color: theme.palette.text.secondary, // backgroundColor: theme.palette.background.raised, }, })); export default function ThemeEditor() { const [anchorEl, setAnchorEl] = useState(null); const dispatch = useDispatch(); const classes = useStyle(); const currentTheme = useSelector(selectTheme); const handleToOpenMenu = (event) => { setAnchorEl(event.currentTarget); }; const handleToCloseMenu = () => { setAnchorEl(null); }; const handleChangeTheme = (theme) => { const callback = () => { // change theme dispatch(setTheme(theme)); // close menu handleToCloseMenu(); }; return callback; }; return ( <div> <Fab aria-label="Theme" className={classes.fab} aria-haspopup="true" onClick={handleToOpenMenu} > <FontAwesomeIcon icon={faAdjust} /> </Fab> {/* Menu with themes */} <Menu id="theme-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleToCloseMenu} className={classes.menu} > { Object.keys(Themes).map((theme) => ( <MenuItem selected={theme === currentTheme} key={Math.random()} onClick={handleChangeTheme(theme)} className={classes.options} > { theme.replace(/^\w/, (letter) => letter.toUpperCase()) } </MenuItem> )) } </Menu> </div> ); }