fix: update wave.args when updating to intial value for color picker …

…without choices
h2oai · Aug 2, 2023 · c52ab13 · c52ab13
1 parent 45078ed
commit c52ab13
Showing 1 changed file with 9 additions and 12 deletions.
diff --git a/ui/src/color_picker.tsx b/ui/src/color_picker.tsx
@@ -81,18 +81,18 @@ const
         setColor(fluentColor)
         onChange(null, fluentColor)
       },
-      changeColor = (color: Fluent.IColor) => {
-        setColor(color)
-        setColorText(color.str)
-      },
       onColorChange = (_e: React.SyntheticEvent<HTMLElement>, color: Fluent.IColor) => {
         onChange(null, color)
-        changeColor(color)
+        setColor(color)
+        setColorText(color.str)
       }
 
     React.useEffect(() => {
       const color = Fluent.getColorFromString(val)
-      if (color) changeColor(color)
+      if (color) {
+        setColor(color)
+        setColorText(color.str)
+      }
       wave.args[model.name] = val
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model.value])
@@ -125,14 +125,11 @@ export const
         setSelectedColorId(color)
         if (trigger) wave.push()
       },
-      onChange = (_e: React.SyntheticEvent<HTMLElement>, { str }: Fluent.IColor) => {
-        model.value = str || undefined
-        wave.args[name] = str || defaultValue
-        if (trigger) wave.push()
-      },
+      onChange = (e: React.SyntheticEvent<HTMLElement>, { str }: Fluent.IColor) => onSwatchChange(e, undefined, str),
       normalizedWidth = formItemWidth(width),
       minMaxWidth = !normalizedWidth?.includes('%') ? `calc(${normalizedWidth} - 35px)` : 'initial'
 
+
     React.useEffect(() => {
       wave.args[name] = defaultValue
       setSelectedColorId(defaultValue)
@@ -153,7 +150,7 @@ export const
                     : (
                       <Fluent.ColorPicker
                         alphaType={alpha ? 'alpha' : 'none'}
-                        color={defaultValue || '#000'}
+                        color={selectedColorId || '#000'}
                         onChange={onChange}
                         styles={{ root: { width: normalizedWidth, maxWidth: normalizedWidth }, colorRectangle: { minWidth: minMaxWidth, maxWidth: minMaxWidth } }}
                       />