Merge pull request #756 from lowcoder-org/module-layers-issue

Bug Fixes

Author: FalkWolsky

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

@@ -165,7 +165,7 @@ function IconCodeEditor(props: {
         visible={visible}
         setVisible={setVisible}
         trigger="contextMenu"
-        parent={document.querySelector<HTMLElement>(`${CodeEditorTooltipContainer}`)}
+        // parent={document.querySelector<HTMLElement>(`${CodeEditorTooltipContainer}`)}
         searchKeywords={i18nObjs.iconSearchKeywords}
       />
     ),

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

@@ -161,7 +161,7 @@ let TmpModalComp = (function () {
                 items={gridItemCompToGridItems(items)}
                 autoHeight={props.autoHeight}
                 minHeight={paddingValues ? DEFAULT_HEIGHT - paddingValues[0] * 2 + "px" : ""}
-                containerPadding={paddingValues ? [paddingValues[0], paddingValues[1]] : [24,24]}
+                containerPadding={paddingValues ? [paddingValues[0] ?? 0, paddingValues[1] ?? 0] : [24,24]}
                 hintPlaceholder={HintPlaceHolder}
               />
             </Modal>

client/packages/lowcoder/src/layout/gridLayout.tsx

@@ -400,8 +400,15 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     // const ops = layoutOpUtils.push(this.state.ops, stickyItemOp(i, { h }));
     // this.setState({ ops });
     if (this.state.changedHs?.[i] !== h) {
-      const changedHeights = { ...this.state.changedHs, [i]: h };
-      this.setState({ changedHs: changedHeights });
+      this.setState((prevState) => {
+        return {
+          ...prevState,
+          changedHs: {
+            ...prevState.changedHs,
+            [i]: h,
+          }
+        }
+      })
     }
   };
 

client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx

@@ -33,6 +33,7 @@ import {
 import { DownOutlined } from "@ant-design/icons";
 import { ItemType } from "antd/es/menu/hooks/useItems";
 import ColorPicker, { configChangeParams } from "components/ColorPicker";
+import { ModuleLayoutComp } from "@lowcoder-ee/comps/comps/moduleContainerComp/moduleLayoutComp";
 
 
 export type DisabledCollisionStatus = "true" | "false"; // "true" means collision is not enabled - Layering works, "false" means collision is enabled - Layering does not work
@@ -209,17 +210,31 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
 
         const dsl = editorState.rootComp.toJsonValue();
         let layout: any = {};
-        parentNode.children.forEach((data, index) => {
-          layout[data.key] = {
-            ...dsl.ui.layout[data.key],
-            pos: index,
-          };
-        })
-
-        editorState.rootComp.children.ui.dispatchChangeValueAction({
-          ...dsl.ui,
-          layout,
-        })
+        if(dsl.ui.compType === 'module') {
+          parentNode.children.forEach((data, index) => {
+            layout[data.key] = {
+              ...dsl.ui.comp.container.layout[data.key],
+              pos: index,
+            };
+          })
+          const moduleLayoutComp = editorState.rootComp.children.ui.getModuleLayoutComp();
+          moduleLayoutComp?.children.container.dispatchChangeValueAction({
+            ...dsl.ui.comp.container,
+            layout,
+          })
+        } else {
+          parentNode.children.forEach((data, index) => {
+            layout[data.key] = {
+              ...dsl.ui.layout[data.key],
+              pos: index,
+            };
+          })
+  
+          editorState.rootComp.children.ui.dispatchChangeValueAction({
+            ...dsl.ui,
+            layout,
+          })
+        }
         return newTreeData;
       });
     }