Merge pull request #1217 from lowcoder-org/theme-style-fixes

[WIP] Theme style fixes relative to active/inactive preventOverwriteStyles flag

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx

@@ -29,6 +29,7 @@ import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import { StringControl } from "comps/controls/codeControl";
 import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -65,6 +66,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const layoutBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props, dispatch);
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -33,7 +33,7 @@ import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design";
 import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Resizable } from "react-resizable";
 import styled, { css } from "styled-components";
-import { useUserViewMode } from "util/hooks";
+import { useMergeCompStyles, useUserViewMode } from "util/hooks";
 import { TableImplComp } from "./tableComp";
 import { useResizeDetector } from "react-resize-detector";
 import { SlotConfigContext } from "comps/controls/slotControl";
@@ -903,7 +903,6 @@ export function TableCompView(props: {
     updateEmptyRows();
   }, [updateEmptyRows]);
 
-
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -928,6 +927,11 @@ export function TableCompView(props: {
 
   const childrenProps = childrenToProps(comp.children);
 
+  useMergeCompStyles(
+    childrenProps as Record<string, any>,
+    comp.dispatch
+  );
+
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
       if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

@@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -53,6 +54,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const TriContainerBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props, dispatch);
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -673,10 +673,10 @@ function calcColors<ColorMap extends Record<string, string>>(
           themeWithDefault.textDark,
           themeWithDefault.textLight
         );
-      } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
-        res[name] = bgColor;
       } else if ((config?.depType || config?.depName) && compTheme?.[name]) {
         res[name] = compTheme[name];
+      } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
+        res[name] = bgColor;
       } else {
         const rest = [];
         config.depName && rest.push(res[config.depName]);
@@ -900,22 +900,21 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
 
       const appSettingsComp = editorState?.getAppSettingsComp();
       const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
-      const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {};
+      const { appliedThemeId, preventStyleOverwriting } = (comp?.comp || {});
       const appTheme = isPreviewTheme || isDefaultTheme || (!preventStyleOverwriting && !preventAppStylesOverwriting)
         ? theme?.theme
         : defaultTheme;
-      const compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
-        ? {
-            ...(omit(defaultTheme, 'components', 'chart')),
-            ...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
-            ...(omit(theme?.theme, 'components', 'chart')),
-            ...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
-            // ...(
-            //   theme?.theme?.components?.[compType]?.[styleKey]
-            //   // || defaultTheme.components?.[compType]?.[styleKey]
-            // ) as unknown as Record<string, string>
-          }
-        : defaultTheme.components?.[compType]?.[styleKey];
+      let compTheme: JSONValue|undefined = {};
+      if (appliedThemeId !== themeId) {
+        compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
+          ? {
+              ...(omit(defaultTheme, 'components', 'chart')),
+              ...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
+              ...(omit(theme?.theme, 'components', 'chart')),
+              ...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
+            }
+          : defaultTheme.components?.[compType]?.[styleKey];
+      }
       const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
         ? props as ColorMap
         : {} as ColorMap;

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -290,7 +290,7 @@ const UIView = React.memo((props: {
   }
 
   useMergeCompStyles(
-    childrenJsonProps as Record<string, any>,
+    childrenProps as Record<string, any>,
     comp.dispatch
   );
 

client/packages/lowcoder/src/comps/hooks/hookComp.tsx

@@ -88,7 +88,8 @@ const TitleHookComp = withPropertyViewFn(TitleTmp2Comp, (comp) => {
   );
 });
 const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
-  source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
+  // source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
+  source: "npm",
   isRemote: true,
   packageName: "lowcoder-comps",
 };

client/packages/lowcoder/src/comps/index.tsx

@@ -119,7 +119,8 @@ type Registry = {
 };
 
 const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
-  source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
+  // source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
+  source: "npm",
   isRemote: true,
   packageName: "lowcoder-comps",
 };

client/packages/lowcoder/src/comps/utils/themeUtil.ts

@@ -38,10 +38,11 @@ export function setInitialCompStyles({
   const actions: Record<string, any> = {
     appliedThemeId: changeValueAction(themeId || '', true),
   };
+  
   styleKeys.forEach(styleKey => {
     actions[styleKey] = changeValueAction({
       ...(compTheme?.[styleKey] as object || {}),
-      // ...styleProps[styleKey],
+      ...styleProps[styleKey],
     }, true);
   })
 

client/packages/lowcoder/src/util/hooks.ts

@@ -2,6 +2,7 @@ import { AppPathParams } from "constants/applicationConstants";
 import React, {
   Dispatch,
   SetStateAction,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -179,28 +180,49 @@ export function useMergeCompStyles(
   const themeId = theme?.themeId;
   const appSettingsComp = editorState?.getAppSettingsComp();
   const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
-  const { preventStyleOverwriting } = props;
+  const { preventStyleOverwriting, appliedThemeId } = props;
 
   const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style' || 'styles'));
   const styleProps: Record<string, any> = {};
   styleKeys.forEach((key: string) => {
     styleProps[key] = (props as any)[key];
   });
 
+  const mergeStyles = useCallback(
+    ({
+      dispatch,
+      compTheme,
+      styleProps,
+      themeId
+    }: any) => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+        themeId,
+      })
+    },
+    []
+  );
+
   useEffect(() => {
-    if (preventAppStylesOverwriting || preventStyleOverwriting) return;
-    setInitialCompStyles({
+    if (
+      preventAppStylesOverwriting
+      || preventStyleOverwriting
+      || themeId === appliedThemeId
+    ) return;
+    mergeStyles({
       dispatch,
       compTheme,
       styleProps,
       themeId,
-    });
+    })
   }, [
     themeId,
     JSON.stringify(styleProps),
     JSON.stringify(compTheme),
-    setInitialCompStyles,
+    mergeStyles,
     preventAppStylesOverwriting,
     preventStyleOverwriting,
   ]);
-}
+}