Initial keyboard shortcuts configuration implementation #496
@@ -2,11 +2,9 @@ import { Menu } from '@headlessui/react'
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
|
||||
export function DropdownItem({ config, state, thunkDispatch }) {
|
||||
console.log({ name: config.label, shortcut: config.shortcut, callback: handleClick})
|
||||
useHotkeys(config.shortcut, handleClick)
|
||||
|
||||
function handleClick(e) {
|
||||
console.log(e, config)
|
||||
e.preventDefault()
|
||||
config.callback(e, {state, thunkDispatch})
|
||||
}
|
||||
@@ -14,11 +12,11 @@ export function DropdownItem({ config, state, thunkDispatch }) {
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
|
||||
className={`${active && 'bg-gray-600'} px-2 py-1 flex justify-between`}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{config.label}
|
||||
{config.shortcutLabel && <span className="text-gray-400 pl-4">{ config.shortcutLabel }</span> }
|
||||
{config.shortcutLabel && <span className="text-gray-400 pl-6 text-right">{ config.shortcutLabel }</span> }
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
|
||||
@@ -49,16 +49,6 @@ const fileMenuConfig = {
|
||||
|
|
||||
|
||||
config.callback = handleStlDownload
|
||||
|
||||
return <DropdownItem {...props} />
|
||||
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
}
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
},
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
{
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
label: 'Cook Donut',
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
shortcut: 'ctrl+d, command+d',
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
shortcutLabel: cmdOrCtrl() + ' D',
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
component: (props) => {
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
const { config } = props
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
config.callback = () => alert('Donut is cooked!')
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
|
||||
return <DropdownItem {...props} />
|
||||
}
|
||||
}
|
||||
|
||||
|
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
if you make this: Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since if you make this:
```suggestion
const fileMenuConfig: EditorMenuConfig = {
```
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since `component` doesn't exist on `EditorMenuItemConfig`.
I think callback is not needed now and component is? I think callback is not needed now and component is?
I think callback is not needed now and component is? I think callback is not needed now and component is?
Yup it yelled at me now! Yup it yelled at me now!
Yup it yelled at me now! Yup it yelled at me now!
|
||||
if you make this:
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since
componentdoesn't exist onEditorMenuItemConfig.if you make this:
Thdn the linter (assuming you've got ts setup with your editor) should tell you if your obeying your own types for this menu, and I think you're not since
componentdoesn't exist onEditorMenuItemConfig.I think callback is not needed now and component is?
I think callback is not needed now and component is?
Yup it yelled at me now!
Yup it yelled at me now!