Fix select styling

2021-08-27 18:21:51 +10:00
parent 87f132a684
commit cdbf6ed6b4
4 changed files with 76 additions and 21 deletions
--- a/app/web/package.json
+++ b/app/web/package.json
@@ -14,6 +14,7 @@
  },
  "dependencies": {
    "@headlessui/react": "^1.0.0",
+    "@heroicons/react": "^1.0.4",
    "@material-ui/core": "^4.11.0",
    "@monaco-editor/react": "^4.0.11",
    "@react-three/drei": "^7.3.1",
--- a/app/web/public/demo-worker.js
+++ b/app/web/public/demo-worker.js
@@ -271,7 +271,7 @@ function parseParams(script){
                caption = caption.substring(0,idx).trim()
            }
            defs.push({name, type: 'group', caption, ...def.options})
-                        
+
        }else{
            const idx = line.indexOf('/')
            if(idx === -1){
@@ -316,7 +316,7 @@ function parseComment(comment, line){
    const prefix = comment.substring(0,2)
    if(prefix === '//') comment = comment.substring(2)
    if(prefix === '/*') comment = comment.substring(2, comment.length-2)
-    
+
    comment = comment.trim()

    const ret = {}
@@ -331,7 +331,7 @@ function parseComment(comment, line){
    	}
        comment = comment.substring(0,idx).trim()
    }
-    
+
    ret.caption = comment

    return ret
@@ -347,7 +347,7 @@ function parseDef(code, line){
        return {name:code, type:'text'}
    }else{
        let initial = code.substring(idx+1).trim()
-        
+
        const ret = {type:'text', name:code.substring(0,idx).trim()}

        if(initial === 'true' || initial === 'false'){
@@ -394,7 +394,7 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
      solids = []
      function flatten(arr){
        if(arr){
-          if(arr instanceof Array) 
+          if(arr instanceof Array)
            arr.forEach(flatten)
          else
            solids.push(arr)
@@ -454,7 +454,6 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
          }
        })
      }
-      console.log('paramsDef', paramsDef)
      if(paramsDef.length) callback({action:'parameterDefinitions', worker:'main', data:paramsDef})

      runMain(params)
--- a/app/web/src/components/Customizer/Customizer.tsx
+++ b/app/web/src/components/Customizer/Customizer.tsx
@@ -1,3 +1,6 @@
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
+
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { Switch } from '@headlessui/react'
@@ -139,7 +142,7 @@ function BooleanParam({
 }: {
  param: CadhubBooleanParam
  value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
  return (
    <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -169,7 +172,7 @@ function StringParam({
 }: {
  param: CadhubStringParam
  value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
  return (
    <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -191,21 +194,68 @@ function ChoiceParam({
 }: {
  param: CadhubStringChoiceParam | CadhubNumberChoiceParam
  value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
  return (
    <CustomizerParamBase name={param.name} caption={param.caption}>
-      <select
-        className="bg-transparent h-8 border border-ch-gray-300 px-2 text-sm w-full"
-        value={value}
-        onChange={({ target }) => onChange(target?.value)}
-      >
-        {param.options.map((opt) => (
-          <option value={opt.value} key={opt.name}>
-            {opt.name}
-          </option>
-        ))}
-      </select>
+      <Listbox value={value} onChange={onChange}>
+        <div className="relative mt-1">
+          <Listbox.Button className="relative w-full h-8 text-left cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm border border-ch-gray-300 px-2 text-sm">
+            <span className="block truncate">{value}</span>
+            <span className="absolute inset-y-0 right-0 flex items-center pr-1 pointer-events-none">
+              <SelectorIcon
+                className="w-5 h-5 text-gray-300"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute w-full py-1 mt-1 bg-ch-gray-600 bg-opacity-80 overflow-auto text-base rounded-sm shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {param.options.map((option, optionIdx) => (
+                <Listbox.Option
+                  key={optionIdx}
+                  className={({ active }) =>
+                    `${
+                      active
+                        ? 'text-ch-blue-600 bg-ch-gray-700'
+                        : 'text-ch-gray-300'
+                    }
+                          cursor-default select-none relative py-2 pl-10 pr-4`
+                  }
+                  value={option.value}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <span
+                        className={`${
+                          selected ? 'font-medium' : 'font-normal'
+                        } block truncate`}
+                      >
+                        {option.name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`${
+                            active ? 'text-ch-blue-600' : 'text-ch-gray-300'
+                          }
+                                absolute inset-y-0 left-0 flex items-center pl-3`}
+                        >
+                          <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
    </CustomizerParamBase>
  )
 }
@@ -217,7 +267,7 @@ function NumberParam({
 }: {
  param: CadhubNumberParam
  value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
  const [isFocused, isFocusedSetter] = React.useState(false)
  const [localValue, localValueSetter] = React.useState(0)
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -1917,6 +1917,11 @@
  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.2.0.tgz#e48652bfce82ddf73d7f331faeb9db6526ee6874"
  integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==

+"@heroicons/react@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.4.tgz#11847eb2ea5510419d7ada9ff150a33af0ad0863"
+  integrity sha512-3kOrTmo8+Z8o6AL0rzN82MOf8J5CuxhRLFhpI8mrn+3OqekA6d5eb1GYO3EYYo1Vn6mYQSMNTzCWbEwUInb0cQ==
+
 "@iarna/toml@^2.2.5":
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"