fix: object merge values

ccontrols · Aug 3, 2020 · 477809f · 477809f
1 parent ccb3f6f
commit 477809f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/core/core/src/controls-utils.ts b/core/core/src/controls-utils.ts
@@ -12,13 +12,14 @@ import { Story } from './document';
 
 const mergeValue = (control: ComponentControl, value: any): any => {
   if (control && control.type === ControlTypes.OBJECT) {
+    const objValue = mergeControlValues(
+      control.value as ComponentControls,
+      undefined,
+      value,
+    );
     return {
       ...control,
-      value: mergeControlValues(
-        control.value as ComponentControls,
-        undefined,
-        value,
-      ),
+      value: objValue,
     };
   }
   return {
@@ -32,21 +33,25 @@ export const mergeControlValues = (
   controlName: string | undefined,
   value: any,
 ): ComponentControls => {
-  return controlName
-    ? {
-        ...controls,
-        [controlName]: mergeValue(controls[controlName], value),
-      }
-    : Object.keys(controls).reduce(
-        (acc, key) => ({
-          ...acc,
-          [key]: mergeValue(
-            controls[key],
-            value[key] === undefined ? controls[key].value : value[key],
-          ),
-        }),
-        {},
-      );
+  if (controlName) {
+    return {
+      ...controls,
+      [controlName]: mergeValue(controls[controlName], value),
+    };
+  }
+
+  return Object.keys(controls).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: mergeValue(
+        controls[key],
+        value[key] === undefined
+          ? controls[key].value
+          : value[key].value || value[key],
+      ),
+    }),
+    {},
+  );
 };
 
 export const resetControlValues = (

diff --git a/ui/editors/src/ColorEditor/ColorEditor.tsx b/ui/editors/src/ColorEditor/ColorEditor.tsx
@@ -43,7 +43,7 @@ export const ColorEditor: PropertyEditor = ({ name }) => {
           borderRadius: '1rem',
         }}
       />
-      {control.value && control.value.toUpperCase()}
+      {typeof control.value === 'string' && control.value.toUpperCase()}
       {displayColorPicker ? (
         <Box
           css={{