c6f080c440
* Add new exportFile icon * Isolate exportFromEngine command * Naive initial export command * Update types to accept functions for arg defaultValue, required, and options * Make existing helper functions and configs work with new types * Make UI components work with new types support resolving function values and conditional logic * Add full export command to command bar * Replace ExportButton with thin wrapper on cmd bar command * fmt * Fix stale tests and bugs found by good tests * fmt * Update src/components/CommandBar/CommandArgOptionInput.tsx * Update snapshot tests and onboarding wording * Move the panel open click into doExport * Don't need to input storage step in export tests anymore * Remove console logs, fmt, select options if we need to * Increase test timeout --------- Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import { useCommandsContext } from 'hooks/useCommandsContext'
|
|
import CommandBarHeader from './CommandBarHeader'
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
|
|
|
function CommandBarReview({ stepBack }: { stepBack: () => void }) {
|
|
const { commandBarState, commandBarSend } = useCommandsContext()
|
|
const {
|
|
context: { argumentsToSubmit, selectedCommand },
|
|
} = commandBarState
|
|
|
|
useHotkeys('backspace', stepBack, {
|
|
enableOnFormTags: true,
|
|
enableOnContentEditable: true,
|
|
})
|
|
|
|
useHotkeys(
|
|
[
|
|
'alt+1',
|
|
'alt+2',
|
|
'alt+3',
|
|
'alt+4',
|
|
'alt+5',
|
|
'alt+6',
|
|
'alt+7',
|
|
'alt+8',
|
|
'alt+9',
|
|
'alt+0',
|
|
],
|
|
(_, b) => {
|
|
if (b.keys && !Number.isNaN(parseInt(b.keys[0], 10))) {
|
|
if (!selectedCommand?.args) return
|
|
const argName = Object.keys(selectedCommand.args)[
|
|
parseInt(b.keys[0], 10) - 1
|
|
]
|
|
const arg = selectedCommand?.args[argName]
|
|
commandBarSend({
|
|
type: 'Edit argument',
|
|
data: { arg: { ...arg, name: argName } },
|
|
})
|
|
}
|
|
},
|
|
{ keyup: true, enableOnFormTags: true, enableOnContentEditable: true },
|
|
[argumentsToSubmit, selectedCommand]
|
|
)
|
|
|
|
Object.keys(argumentsToSubmit).forEach((key, i) => {
|
|
const arg = selectedCommand?.args ? selectedCommand?.args[key] : undefined
|
|
if (!arg) return
|
|
})
|
|
|
|
function submitCommand(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
commandBarSend({
|
|
type: 'Submit command',
|
|
data: argumentsToSubmit,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<CommandBarHeader>
|
|
<p className="px-4">Confirm {selectedCommand?.name}</p>
|
|
<form
|
|
id="review-form"
|
|
className="absolute opacity-0 inset-0 pointer-events-none"
|
|
onSubmit={submitCommand}
|
|
>
|
|
{Object.entries(argumentsToSubmit).map(([key, value], i) => {
|
|
const arg = selectedCommand?.args
|
|
? selectedCommand?.args[key]
|
|
: undefined
|
|
if (!arg) return null
|
|
|
|
return (
|
|
<input
|
|
id={key}
|
|
name={key}
|
|
key={key}
|
|
type="text"
|
|
defaultValue={
|
|
typeof value === 'object'
|
|
? JSON.stringify(value)
|
|
: (value as string)
|
|
}
|
|
hidden
|
|
/>
|
|
)
|
|
})}
|
|
</form>
|
|
</CommandBarHeader>
|
|
)
|
|
}
|
|
|
|
export default CommandBarReview
|