feat(lab): Handling list options

packages/freesewing.shared/components/workbench/inputs/design-option-count.js

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
-import { formatMm, round } from 'shared/utils.js'
 
 const EditCount = props => (
   <div className="form-control mb-2 w-full">

packages/freesewing.shared/components/workbench/inputs/design-option-list.js

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import ClearIcon from 'shared/components/icons/clear.js'
+
+const DesignOptionList = props => {
+  const { dflt, list } = props.pattern.config.options[props.option]
+  const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+    ? dflt
+    : props.gist.options[props.option]
+
+  const [value, setValue] = useState(val)
+
+  const handleChange = (newVal) => {
+    console.log('setting', newVal)
+    if (newVal === dflt) reset()
+    else {
+      setValue(newVal)
+      props.updateGist(['options', props.option], newVal)
+    }
+  }
+  const reset = () => {
+    setValue(dflt)
+    props.unsetGist(['options', props.option])
+  }
+
+  return (
+    <div className="py-4 mx-6 border-l-2 pl-2">
+      <div className="flex flex-row">
+        <div className="grow">
+          {list.map(choice => (
+            <button
+              onClick={() => handleChange(choice)}
+              className={`
+                mr-1 mb-1 text-left text-lg w-full
+                ${choice === value
+                  ? choice === dflt
+                    ? 'text-secondary'
+                    : 'text-accent'
+                  : 'text-neutral-content'
+                }
+              `}
+            >
+              <span className={`
+                text-3xl mr-2 inline-block p-0 leading-3
+                translate-y-3
+              `}>
+                <>&deg;</>
+              </span>
+              {props.app.t(`options.${props.pattern.config.name}.${props.option}.options.${choice}`)}
+            </button>
+          ))}
+        </div>
+        <button
+          title={props.app.t('app.reset')}
+          className=""
+          disabled={val === dflt}
+          onClick={reset}
+        >
+          <span className={val===dflt ? 'text-neutral' : 'text-accent'}><ClearIcon /></span>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default DesignOptionList

packages/freesewing.shared/components/workbench/menu/design-options/option.js

@@ -44,19 +44,24 @@ const values = {
     const current = props.gist?.options?.[props.option]
     return (dflt==current || typeof current === 'undefined')
       ? <span className="text-secondary">{dflt}</span>
-      : <span className="text-secondary">{current}</span>
+      : <span className="text-accent">{current}</span>
-  },
-  deg: props => {
-    return <p>No val yet</p>
   },
   list: props => {
-    return <p>No val yet</p>
+    const dflt = props.pattern.config.options[props.option].dflt
+    const current = props.gist?.options?.[props.option]
+    const prefix = `options.${props.pattern.config.name}.${props.option}.options.`
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary">{props.app.t(prefix+dflt)}</span>
+      : <span className="text-accent">{props.app.t(prefix+current)}</span>
+  },
+  deg: props => {
+    return <p>No deg val yet</p>
   },
   mm: props => {
-    return <p>No val yet</p>
+    return <p>No mm val yet</p>
   },
   constant: props => {
-    return <p>No val yet</p>
+    return <p>No constant val yet</p>
   },
 }