Clean up 'prompt user for info' modals (#58)

2023-03-13 09:22:05 +11:00
parent eebddb0ce2
commit 1de21b8bdd
6 changed files with 491 additions and 309 deletions
--- a/src/components/SetAngleLengthModal.tsx
+++ b/src/components/SetAngleLengthModal.tsx
@ -0,0 +1,142 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, useState } from 'react'
+import { Value } from '../lang/abstractSyntaxTree'
+import {
+  AvailableVars,
+  addToInputHelper,
+  useCalc,
+  CalcResult,
+  CreateNewVariable,
+} from './AvailableVarsHelpers'
+
+export const SetAngleLengthModal = ({
+  isOpen,
+  onResolve,
+  onReject,
+  value: initialValue,
+  valueName,
+}: {
+  isOpen: boolean
+  onResolve: (a: {
+    value: string
+    valueNode: Value
+    variableName?: string
+    newVariableInsertIndex: number
+  }) => void
+  onReject: (a: any) => void
+  value: number
+  valueName: string
+}) => {
+  const [value, setValue] = useState(String(initialValue))
+  const [shouldCreateVariable, setShouldCreateVariable] = useState(false)
+
+  const {
+    prevVariables,
+    calcResult,
+    valueNode,
+    isNewVariableNameUnique,
+    newVariableName,
+    setNewVariableName,
+    inputRef,
+    newVariableInsertIndex,
+  } = useCalc({ value, initialVariableName: valueName })
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onReject}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <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="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title
+                  as="h3"
+                  className="text-lg font-medium leading-6 text-gray-900 capitalize"
+                >
+                  Set {valueName}
+                </Dialog.Title>
+                <div className="block text-sm font-medium text-gray-700 mt-3 font-mono capitalize">
+                  Available Variables
+                </div>
+                <AvailableVars
+                  prevVariables={prevVariables}
+                  onVarClick={addToInputHelper(inputRef, setValue)}
+                />
+                <label
+                  htmlFor="val"
+                  className="block text-sm font-medium text-gray-700 mt-3 font-mono capitalize"
+                >
+                  {valueName} Value
+                </label>
+                <div className="mt-1">
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    name="val"
+                    id="val"
+                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1"
+                    value={value}
+                    onChange={(e) => {
+                      setValue(e.target.value)
+                    }}
+                  />
+                </div>
+                <CalcResult calcResult={calcResult} />
+                <CreateNewVariable
+                  setNewVariableName={setNewVariableName}
+                  newVariableName={newVariableName}
+                  isNewVariableNameUnique={isNewVariableNameUnique}
+                  shouldCreateVariable={shouldCreateVariable}
+                  setShouldCreateVariable={setShouldCreateVariable}
+                />
+                <div className="mt-4">
+                  <button
+                    type="button"
+                    disabled={calcResult === 'NAN' || !isNewVariableNameUnique}
+                    className={`inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
+                      calcResult === 'NAN' || !isNewVariableNameUnique
+                        ? 'opacity-50 cursor-not-allowed'
+                        : ''
+                    }`}
+                    onClick={() =>
+                      valueNode &&
+                      onResolve({
+                        value,
+                        valueNode,
+                        newVariableInsertIndex,
+                        variableName: shouldCreateVariable
+                          ? newVariableName
+                          : undefined,
+                      })
+                    }
+                  >
+                    Add constraining value
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}