d2535bb8c2
* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes * Get Extrude opening and canceling from command bar * Iconography tweaks * Get extrude kind of working * Refactor command bar config types and organization * Move command bar configs to be co-located with each other * Start building a state machine for the command bar * Start converting command bar to state machine * Add support for multiple args, confirmation step * Submission behavior, hotkeys, code organization * Add new test for extruding from command bar * Polish step back and selection hotkeys, CSS tweaks * Loading style tweaks * Validate selection inputs, polish UX of args re-editing * Prevent submission with multiple selection on singlular arg * Remove stray console logs * Tweak test, CSS nit, remove extrude "result" argument * Fix linting warnings * Show Ctrl+/ instead of ⌘K on all platforms but Mac * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Add "Enter sketch" to command bar * fix command bar test * Fix flaky cmd bar extrude test by waiting for engine select response * Cover both button labels '⌘K' and 'Ctrl+/' in test --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { useCommandsContext } from 'hooks/useCommandsContext'
|
|
import { CommandArgument } from 'lib/commandTypes'
|
|
import { useEffect, useRef } from 'react'
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
|
|
|
function CommandBarBasicInput({
|
|
arg,
|
|
stepBack,
|
|
onSubmit,
|
|
}: {
|
|
arg: CommandArgument<unknown> & {
|
|
inputType: 'number' | 'string'
|
|
name: string
|
|
}
|
|
stepBack: () => void
|
|
onSubmit: (event: unknown) => void
|
|
}) {
|
|
const { commandBarSend, commandBarState } = useCommandsContext()
|
|
useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const inputType = arg.inputType === 'number' ? 'number' : 'text'
|
|
|
|
useEffect(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus()
|
|
inputRef.current.select()
|
|
}
|
|
}, [arg, inputRef])
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
onSubmit(inputRef.current?.value)
|
|
}
|
|
|
|
return (
|
|
<form id="arg-form" onSubmit={handleSubmit}>
|
|
<label className="flex items-center mx-4 my-4">
|
|
<span className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
|
|
{arg.name}
|
|
</span>
|
|
<input
|
|
id="arg-form"
|
|
name={inputType}
|
|
ref={inputRef}
|
|
type={inputType}
|
|
required
|
|
className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
|
|
placeholder="Enter a value"
|
|
defaultValue={
|
|
(commandBarState.context.argumentsToSubmit[arg.name] as
|
|
| string
|
|
| undefined) || (arg.defaultValue as string)
|
|
}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Backspace' && !event.currentTarget.value) {
|
|
stepBack()
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</label>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default CommandBarBasicInput
|