column layout component

Mac · raheeliftikhar5 · commit 9ee311e154b3 · 2024-07-03T14:22:19.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -35,11 +35,14 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, NumberControl, StringControl } from "comps/controls/codeControl";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
+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 ContainWrapper = styled.div<{
   $style: ContainerStyleType & {
@@ -95,8 +98,8 @@ const childrenMap = {
   rowGap: withDefault(StringControl, "20px"),
   templateColumns: withDefault(StringControl, "1fr 1fr"),
   columnGap: withDefault(StringControl, "20px"),
-  style: withDefault(styleControl(ContainerStyle), {}),
-  columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle),{borderWidth:'1px'})
+  style: styleControl(ContainerStyle, 'style'),
+  columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
 };
 
 type ViewProps = RecordConstructorToView<typeof childrenMap>;
@@ -178,6 +181,23 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
 
 export const ResponsiveLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'columnStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     return (
       <ColumnLayout {...props} dispatch={dispatch} />
     );
