Add more customization options to BasicEntitySliderField

voxgig · Jul 25, 2024 · cf3e7ac · cf3e7ac
1 parent 3d7db08
commit cf3e7ac
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/dist/voxgig-model-react.es.js b/dist/voxgig-model-react.es.js
@@ -64683,7 +64683,10 @@ const BasicEntitySliderFieldSpecShape = gubu_minExports.Gubu(Open$7({
     ux: Open$7({
       kind: gubu_minExports.Default("Text", String),
       edit: gubu_minExports.Default(true, Boolean),
-      step: gubu_minExports.Default(1, Number),
+      valueLabelDisplay: gubu_minExports.Exact("on", "auto", "off").Default("auto"),
+      orientation: gubu_minExports.Exact("horizontal", "vertical").Default("horizontal"),
+      track: gubu_minExports.Exact("normal", "inverted", false).Default("normal"),
+      step: gubu_minExports.One(null, Number),
       min: gubu_minExports.Default(0, Number),
       max: gubu_minExports.Default(100, Number)
     })
@@ -64706,13 +64709,16 @@ function BasicEntitySliderField(props) {
         render: ({ field: { onChange, value } }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           Slider$1,
           {
-            value,
-            onChange: (_2, newValue) => onChange(newValue),
-            valueLabelDisplay: "auto",
+            disabled: !field.ux.edit,
+            orientation: field.ux.orientation,
+            track: field.ux.track,
+            valueLabelDisplay: field.ux.valueLabelDisplay,
             step: field.ux.step,
             marks: resolveMarks(field.ux.marks),
             min: field.ux.min,
-            max: field.ux.max
+            max: field.ux.max,
+            value,
+            onChange: (_2, newValue) => onChange(newValue)
           }
         )
       }

diff --git a/dist/voxgig-model-react.umd.js b/dist/voxgig-model-react.umd.js
@@ -64695,7 +64695,10 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       ux: Open$7({
         kind: gubu_minExports.Default("Text", String),
         edit: gubu_minExports.Default(true, Boolean),
-        step: gubu_minExports.Default(1, Number),
+        valueLabelDisplay: gubu_minExports.Exact("on", "auto", "off").Default("auto"),
+        orientation: gubu_minExports.Exact("horizontal", "vertical").Default("horizontal"),
+        track: gubu_minExports.Exact("normal", "inverted", false).Default("normal"),
+        step: gubu_minExports.One(null, Number),
         min: gubu_minExports.Default(0, Number),
         max: gubu_minExports.Default(100, Number)
       })
@@ -64718,13 +64721,16 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
           render: ({ field: { onChange, value } }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             material.Slider,
             {
-              value,
-              onChange: (_2, newValue) => onChange(newValue),
-              valueLabelDisplay: "auto",
+              disabled: !field.ux.edit,
+              orientation: field.ux.orientation,
+              track: field.ux.track,
+              valueLabelDisplay: field.ux.valueLabelDisplay,
               step: field.ux.step,
               marks: resolveMarks(field.ux.marks),
               min: field.ux.min,
-              max: field.ux.max
+              max: field.ux.max,
+              value,
+              onChange: (_2, newValue) => onChange(newValue)
             }
           )
         }

diff --git a/src/lib/BasicEntitySliderField.tsx b/src/lib/BasicEntitySliderField.tsx
@@ -5,7 +5,7 @@ import { Controller } from "react-hook-form";
 
 import type { Spec } from './basic-types'
 
-import { Default, Gubu } from 'gubu'
+import { Default, Exact, Gubu, One } from 'gubu'
 const CMPNAME = 'BasicEntitySliderField'
 
 const { Open } = Gubu
@@ -18,7 +18,10 @@ const BasicEntitySliderFieldSpecShape = Gubu(Open({
     ux: Open({
       kind: Default('Text', String),
       edit: Default(true, Boolean),
-      step: Default(1, Number),
+      valueLabelDisplay: Exact('on', 'auto', 'off').Default('auto'),
+      orientation: Exact('horizontal', 'vertical').Default('horizontal'),
+      track: Exact('normal', 'inverted', false).Default('normal'),
+      step: One(null, Number),
       min: Default(0, Number),
       max: Default(100, Number)
     })
@@ -44,13 +47,16 @@ function BasicEntitySliderField(props: any) {
           defaultValue={val || field.ux.min}
           render={({ field: { onChange, value } }) => (
               <Slider 
-                  value={value}
-                  onChange={(_, newValue) => onChange(newValue)}
-                  valueLabelDisplay="auto"
+                  disabled={!field.ux.edit}
+                  orientation={field.ux.orientation}
+                  track={field.ux.track}
+                  valueLabelDisplay={field.ux.valueLabelDisplay}
                   step={field.ux.step}
                   marks={resolveMarks(field.ux.marks)}
                   min={field.ux.min}
                   max={field.ux.max}
+                  value={value}
+                  onChange={(_, newValue) => onChange(newValue)}
               />
           )}
         />