69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { createContext, useContext } from 'react'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import Dialog from '@material-ui/core/Dialog'
|
|
import { editorMenuConfig } from './menuConfig'
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
transform: `translate3d(0,0,50px)`,
|
|
},
|
|
})
|
|
|
|
interface ShortcutsModalContextType {
|
|
open: boolean
|
|
toggleOpen: () => any
|
|
}
|
|
|
|
export const ShortcutsModalContext = createContext<ShortcutsModalContextType>({
|
|
open: false,
|
|
toggleOpen: () => {},
|
|
})
|
|
|
|
export function useShortcutsModalContext() {
|
|
return useContext(ShortcutsModalContext)
|
|
}
|
|
|
|
const AllShortcutsModal = () => {
|
|
const classes = useStyles()
|
|
const { open, toggleOpen } = useShortcutsModalContext()
|
|
|
|
return (
|
|
<>
|
|
<Dialog
|
|
open={open}
|
|
onClose={() => toggleOpen()}
|
|
className={classes.root + ' bg-transparent'}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
}}
|
|
>
|
|
<div className="bg-ch-gray-700 font-fira-sans shadow-lg text-ch-gray-300 p-4">
|
|
<h2 className="text-2xl mb-4">All Shortcuts</h2>
|
|
{editorMenuConfig
|
|
.filter((menu) => menu.items.length)
|
|
.map((menu) => (
|
|
<section key={'allshortcuts-' + menu.name} className="my-6">
|
|
<h3 className="text-xl border-b-2 pb-2 mb-2">{menu.label}</h3>
|
|
{menu.items.map((item) => (
|
|
<div
|
|
className="flex gap-16 justify-between"
|
|
key={'allshortcuts-' + menu.name + '-' + item.label}
|
|
>
|
|
<p>{item.label}</p>
|
|
<span className="text-right font-fira-code text-ch-gray-400">
|
|
{item.shortcutLabel}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</section>
|
|
))}
|
|
</div>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AllShortcutsModal
|