1be9b2612c
* Move format code button to menu item by extending CollapsiblePanel to take an optional menu React element. Signed-off-by: Frank Noirot <frank@kittycad.io> * Style tweaks * Add shortcuts for format and cmd bar to codemirror * Move convert to variable into code menu Signed off by Frank Noirot <frank@kittycad.io> * Add keyboard shortcut to convert to variable * Remove convert to variable from toolbar * Refactor: move TextEditor to its own component * Set a better convertToVar shortcut * Style and ergonomic polish for convertToVar modal * Use named constants for shortcuts 😇 * Try yet another keyboard shortcut * Fix formatting * remove isShiftDown from app.tsx --------- Signed-off-by: Frank Noirot <frank@kittycad.io> Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { Dialog, Transition } from '@headlessui/react'
|
|
import { Fragment } from 'react'
|
|
import { useCalc, CreateNewVariable } from './AvailableVarsHelpers'
|
|
import { ActionButton } from './ActionButton'
|
|
import { faPlus } from '@fortawesome/free-solid-svg-icons'
|
|
import { toast } from 'react-hot-toast'
|
|
|
|
export const SetVarNameModal = ({
|
|
isOpen,
|
|
onResolve,
|
|
onReject,
|
|
valueName,
|
|
}: {
|
|
isOpen: boolean
|
|
onResolve: (a: { variableName?: string }) => void
|
|
onReject: (a: any) => void
|
|
value: number
|
|
valueName: string
|
|
}) => {
|
|
const { isNewVariableNameUnique, newVariableName, setNewVariableName } =
|
|
useCalc({ value: '', initialVariableName: valueName })
|
|
|
|
return (
|
|
<Transition appear show={isOpen} as={Fragment}>
|
|
<Dialog
|
|
as="div"
|
|
className="fixed inset-0 z-40 overflow-y-auto p-4 pt-[25vh]"
|
|
onClose={onReject}
|
|
>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 translate-y-4"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="ease-in duration-75"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<Dialog.Overlay className="fixed inset-0 bg-chalkboard-10/70 dark:bg-chalkboard-110/50" />
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<Dialog.Panel className="rounded relative mx-auto px-4 py-8 bg-chalkboard-10 dark:bg-chalkboard-100 border dark:border-chalkboard-70 max-w-xl w-full shadow-lg">
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
onResolve({
|
|
variableName: newVariableName,
|
|
})
|
|
toast.success(`Added variable ${newVariableName}`)
|
|
}}
|
|
>
|
|
<CreateNewVariable
|
|
setNewVariableName={setNewVariableName}
|
|
newVariableName={newVariableName}
|
|
isNewVariableNameUnique={isNewVariableNameUnique}
|
|
shouldCreateVariable={true}
|
|
showCheckbox={false}
|
|
/>
|
|
<div className="mt-8 flex justify-between">
|
|
<ActionButton
|
|
Element="button"
|
|
type="submit"
|
|
disabled={!isNewVariableNameUnique}
|
|
icon={{ icon: faPlus }}
|
|
>
|
|
Add variable
|
|
</ActionButton>
|
|
<ActionButton Element="button" onClick={() => onReject(false)}>
|
|
Cancel
|
|
</ActionButton>
|
|
</div>
|
|
</form>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</Dialog>
|
|
</Transition>
|
|
)
|
|
}
|