fix: apply theme bg color to Cell

qlik-oss · Mar 21, 2023 · f4c2916 · f4c2916
1 parent 26e242a
commit f4c2916
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/apis/nucleus/src/components/Cell.jsx b/apis/nucleus/src/components/Cell.jsx
@@ -307,9 +307,11 @@ const Cell = forwardRef(
     }, []);
 
     useEffect(() => {
-      const bgComp = layout?.components ? layout.components.find((comp) => comp.key === 'general') : null;
-      setBgColor(resolveBgColor(bgComp, halo.public.theme));
-      setBgImage(resolveBgImage(bgComp, halo.app));
+      if (layout) {
+        const bgComp = layout.components ? layout.components.find((comp) => comp.key === 'general') : null;
+        setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
+        setBgImage(resolveBgImage(bgComp, halo.app));
+      }
     }, [layout, halo.public.theme, halo.app, themeName]);
 
     focusHandler.current.blurCallback = (resetFocus) => {

diff --git a/apis/nucleus/src/components/Sheet.jsx b/apis/nucleus/src/components/Sheet.jsx
@@ -108,7 +108,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
 
   useEffect(() => {
     const bgComp = layout?.components ? layout.components.find((comp) => comp.key === 'general') : null;
-    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+    setBgColor(resolveBgColor(bgComp, halo.public.theme, 'sheet'));
     setBgImage(resolveBgImage(bgComp, halo.app));
   }, [layout, halo.public.theme, halo.app, themeName]);
 

diff --git a/apis/nucleus/src/utils/__tests__/background-props.test.js b/apis/nucleus/src/utils/__tests__/background-props.test.js
@@ -35,6 +35,10 @@ describe('Background property resolver', () => {
     };
   });
 
+  test('should resolve background color to empty', () => {
+    const color = resolveBgColor({});
+    expect(color).toBeUndefined();
+  });
   test('should resolve background color by expression', () => {
     const color = resolveBgColor(bgCompLayout, t);
     expect(color).toBe('rgb(255, 0, 0)');
@@ -55,4 +59,24 @@ describe('Background property resolver', () => {
     expect(url).toBe('http://example.com/media/Tulips.jpg');
     expect(size).toBe('contain');
   });
+  test('should resolve background color by theme', () => {
+    const color = resolveBgColor({}, t, 'peoplechart');
+    expect(color).toBe('transparent');
+  });
+
+  test('should resolve background color by custom theme', () => {
+    const color = resolveBgColor(
+      {},
+      {
+        getStyle: (obj, path, attr) => {
+          if (obj === 'object.gantt' && path === '' && attr === 'backgroundColor') {
+            return '#ff00ff';
+          }
+          return undefined;
+        },
+      },
+      'gantt'
+    );
+    expect(color).toBe('#ff00ff');
+  });
 });
diff --git a/apis/nucleus/src/utils/background-props.js b/apis/nucleus/src/utils/background-props.js
@@ -79,13 +79,19 @@ export const resolveBgImage = (bgComp, app) => {
   return undefined;
 };
 
-export const resolveBgColor = (bgComp, theme) => {
+export const resolveBgColor = (bgComp, theme, objectType) => {
   const bgColor = bgComp?.bgColor;
   if (bgColor && theme) {
     if (bgColor.useExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
     return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
   }
+  if (theme && objectType) {
+    return theme.getStyle(`object.${objectType}`, '', 'backgroundColor');
+  }
+  if (theme) {
+    return theme.getStyle('', '', 'backgroundColor');
+  }
   return undefined;
 };