choice input

app/web/src/components/Customizer/Customizer.tsx

@@ -6,6 +6,9 @@ import {
   CadhubStringParam,
   CadhubBooleanParam,
   CadhubNumberParam,
+  CadhubStringChoiceParam,
+  CadhubNumberChoiceParam,
+  CadhubChoiceParam,
 } from './customizerConverter'
 
 const Customizer = () => {
@@ -79,12 +82,16 @@ const Customizer = () => {
           {customizerParams.map((param, index) => {
             const otherProps = {
               value: currentParameters[param.name],
-              onChange: (value) => updateCustomizerParam(param.name, value),
+              onChange: (value) => updateCustomizerParam(param.name, param.type == 'number' ? Number(value) : value),
             }
-            if (param.type === 'string') {
-              return <StringParam key={index} param={param} {...otherProps} />
+            if(param.input === 'choice-string' || param.input === 'choice-number'){
+              return <StringChoiceParam key={index} param={param} {...otherProps} />
+            // }else if(param.input === 'choice-number'){
+            //     return <StringChoiceParam key={index} param={param} {...otherProps} />
+            }else if (param.type === 'string') {
+                return <StringParam key={index} param={param} {...otherProps} />
             } else if (param.type === 'number') {
-              return <NumberParam key={index} param={param} {...otherProps} />
+                return <NumberParam key={index} param={param} {...otherProps} />
             } else if (param.type === 'boolean') {
               return <BooleanParam key={index} param={param} {...otherProps} />
             }
@@ -173,6 +180,28 @@ function StringParam({
   )
 }
 
+function StringChoiceParam({
+  param,
+  value,
+  onChange,
+}: {
+  param: CadhubChoiceParam
+  value: any
+  onChange: Function
+}) {
+  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>
+    </CustomizerParamBase>
+  )
+}
+
 function NumberParam({
   param,
   value,

app/web/src/components/Customizer/customizerConverter.ts

@@ -1,6 +1,7 @@
 // CadHub
 
 type CadhubTypeNames = 'number' | 'string' | 'boolean'
+type CadhubInputNames = 'default-number' | 'default-string' | 'default-boolean' | 'choice-string' | 'choice-number'
 
 export interface CadhubStringOption {
   name: string
@@ -16,10 +17,12 @@ interface CadhubParamBase {
   type: CadhubTypeNames
   caption: string
   name: string
+  input: CadhubInputNames
 }
 
 export interface CadhubStringParam extends CadhubParamBase {
   type: 'string'
+  input: 'default-string'
   initial: string
   placeholder?: string
   maxLength?: number
@@ -30,23 +33,25 @@ export interface CadhubBooleanParam extends CadhubParamBase {
 }
 export interface CadhubNumberParam extends CadhubParamBase {
   type: 'number'
+  input: 'default-number'
   initial: number
   min?: number
   max?: number
   step?: number
   decimal?: number
 }
+
 export interface CadhubStringChoiceParam extends CadhubParamBase {
   type: 'string'
-  input: 'choice'
+  input: 'choice-string'
   initial: string
-  options: Array<string> | Array<CadhubStringOption> 
+  options: Array<CadhubStringOption> 
 }
 export interface CadhubNumberChoiceParam extends CadhubParamBase {
   type: 'number'
-  input: 'choice'
+  input: 'choice-number'
   initial: number
-  options: Array<number> | Array<CadhubNumberOption> 
+  options: Array<CadhubNumberOption> 
 }
 
 export type CadhubParams =