Adding Layout Component and global style selector

lowcoder-org · FalkWolsky · Apr 1, 2024 · Mar 30, 2024 · Mar 31, 2024 · Mar 31, 2024
commit 540e0a09ff4b39b19aab5d47d87bf6438901f0b7
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -0,0 +1,141 @@
+import { CompParams } from "lowcoder-core";
+import { ToDataType } from "comps/generators/multi";
+import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
+import { NameGenerator } from "comps/utils/nameGenerator";
+import { Section, sectionNames } from "lowcoder-design";
+import { oldContainerParamsToNew } from "../containerBase";
+import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
+import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { trans } from "i18n";
+import { BoolCodeControl } from "comps/controls/codeControl";
+import { DisabledContext } from "comps/generators/uiCompBuilder";
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
+import {
+  ContainerChildren,
+  ContainerCompBuilder,
+} from "../pageLayoutComp/pageLayoutCompBuilder";
+import { PageLayout } from "../pageLayoutComp/pageLayout";
+
+export const ContainerBaseComp = (function () {
+  const childrenMap = {
+    disabled: BoolCodeControl,
+  };
+  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
+    return (
+      <DisabledContext.Provider value={props.disabled}>
+        <PageLayout {...props} />
+      </DisabledContext.Provider>
+    );
+  })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+              { children.container.appSelectorPropertyView()}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.layout}>
+              {children.container.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.style}>
+              { children.container.stylePropertyView() }
+            </Section>
+            {children.container.children.showHeader.getView() && (
+              <Section name={"Header Style"}>
+                { children.container.headerStylePropertyView() }
+              </Section>
+            )}
+            {children.container.children.showSider.getView() && (
+              <Section name={"Sider Style"}>
+                { children.container.siderStylePropertyView() }
+              </Section>
+            )}
+            <Section name={"Body Style"}>
+              { children.container.bodyStylePropertyView() }
+            </Section>
+            {children.container.children.showFooter.getView() && (
+              <Section name={"Footer Style"}>
+                { children.container.footerStylePropertyView() }
+              </Section>
+            )}
+            </>
+          )}
+        </>
+      );
+    })
+    .build();
+})(); 
+
+// Compatible with old data
+function convertOldContainerParams(params: CompParams<any>) {
+  // convert older params to old params
+  let tempParams = oldContainerParamsToNew(params);
+
+  if (tempParams.value) {
+    const container = tempParams.value.container;
+    // old params
+    if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
+      const autoHeight = tempParams.value.autoHeight;
+      const scrollbars = tempParams.value.scrollbars;
+      return {
+        ...tempParams,
+        value: {
+          container: {
+            showHeader: true,
+            body: { 0: { view: container } },
+            showFooter: false,
+            showSider: true,
+            autoHeight: autoHeight,
+            contentScrollbars: scrollbars,
+          },
+        },
+      };
+    }
+  }
+  return tempParams;
+}
+
+class ContainerTmpComp extends ContainerBaseComp {
+  constructor(params: CompParams<any>) {
+    super(convertOldContainerParams(params));
+  }
+}
+
+export const PageLayoutComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]);
+
+type ContainerDataType = ToDataType<ContainerChildren<{}>>;
+
+export function defaultPageLayoutData(
+  compName: string,
+  nameGenerator: NameGenerator
+): ContainerDataType {
+  return {
+    container: {
+      header: toSimpleContainerData([
+        {
+          item: {
+            compType: "text",
+            name: nameGenerator.genItemName("containerTitle"),
+            comp: {
+              text: "## " + trans("container.title"),
+            },
+          },
+          layoutItem: {
+            i: "",
+            h: 6,
+            w: 24,
+            x: 0,
+            y: 0,
+          },
+        },
+      ]),
+    },
+  };
+}
diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -191,6 +191,8 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
     />
   );
 
+  //console.log("appView", appView);
+
   if (readOnly) {
     return (
       <TabLayoutViewContainer>

diff --git a/client/packages/lowcoder/src/comps/comps/layoutComp/layout.tsx b/client/packages/lowcoder/src/comps/comps/layoutComp/layout.tsx
diff --git a/...mps/layoutComp/containerBodyChildComp.tsx → ...pageLayoutComp/containerBodyChildComp.tsx b/...mps/layoutComp/containerBodyChildComp.tsx → ...pageLayoutComp/containerBodyChildComp.tsx