Theme: apply theme styles in triContainerComp

Author: raheeliftikhar5

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

@@ -35,23 +35,43 @@ const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:Animati
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
-  $backgroundColor: string
+  $backgroundColor: string,
+  $headerBackgroundImage: string;
+  $headerBackgroundImageRepeat: string;
+  $headerBackgroundImageSize: string;
+  $headerBackgroundImagePosition: string;
+  $headerBackgroundImageOrigin: string;
  }>`
   overflow: visible;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$headerBackgroundImage && `background-image: url(${props.$headerBackgroundImage});`}
+  ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
+  ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
+  ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
+  ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
 `;
 
 const BodyInnerGrid = styled(InnerGrid)<{
   $showBorder: boolean;
   $backgroundColor: string;
   $borderColor: string;
   $borderWidth: string;
+  $backgroundImage: string;
+  $backgroundImageRepeat: string;
+  $backgroundImageSize: string;
+  $backgroundImagePosition: string;
+  $backgroundImageOrigin: string;
 }>`
   border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
   flex: 1;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$backgroundImage && `background-image: url(${props.$backgroundImage});`}
+  ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
+  ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
+  ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
+  ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
 `;
 
 const FooterInnerGrid = styled(InnerGrid)<{
@@ -117,6 +137,11 @@ export function TriContainer(props: TriContainerProps) {
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
             $backgroundColor={headerStyle?.headerBackground || 'transparent'}
+            $headerBackgroundImage={headerStyle?.headerBackgroundImage}
+            $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
+            $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
+            $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
+            $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
             style={{padding: headerStyle.containerHeaderPadding}}
 
           />
@@ -139,6 +164,11 @@ export function TriContainer(props: TriContainerProps) {
                 $backgroundColor={bodyStyle?.background || 'transparent'}
                 $borderColor={style?.border}
                 $borderWidth={style?.borderWidth}
+                $backgroundImage={bodyStyle?.backgroundImage}
+                $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+                $backgroundImageSize={bodyStyle?.backgroundImageSize}
+                $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+                $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
                 style={{padding: bodyStyle.containerBodyPadding}}
               />
             </ScrollBar>

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

@@ -11,10 +11,10 @@ import {
 import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { NameGenerator } from "comps/utils";
-import { fromRecord, Node } from "lowcoder-core";
+import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core";
 import { nodeIsRecord } from "lowcoder-core";
 import _ from "lodash";
-import { ReactNode } from "react";
+import { ReactNode, useContext, useEffect } from "react";
 import { lastValueIfEqual } from "util/objectUtils";
 import {
   CompTree,
@@ -27,6 +27,9 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -40,15 +43,32 @@ const childrenMap = {
   showFooter: BoolControl,
   autoHeight: AutoHeightControl,
   scrollbars: withDefault(BoolControl, false),
-  style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
-  headerStyle: styleControl(ContainerHeaderStyle),
-  bodyStyle: styleControl(ContainerBodyStyle),
-  footerStyle: styleControl(ContainerFooterStyle),
+  style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}),
+  headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'),
+  bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'),
+  footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'),
 };
 
 // Compatible with old style data 2022-8-15
 const TriContainerBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    // Filter style props from children props
+    const styleProps: Record<string, any> = {};
+    ['style', 'headerStyle', 'bodyStyle', 'footerStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+    // Update comp styles with combination of default style and comp theme style 
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData