mobile nav layout options + styling

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx

@@ -1,11 +1,11 @@
-import { MultiCompBuilder, withViewFn } from "comps/generators";
+import { MultiCompBuilder, withDefault, withViewFn } from "comps/generators";
 import { trans } from "i18n";
-import { Section } from "components/Section";
+import { Section, sectionNames } from "components/Section";
 import { manualOptionsControl } from "comps/controls/optionsControl";
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
-import React, { Suspense, useContext, useState } from "react";  
+import React, { Suspense, useContext, useMemo, useState } from "react";  
 import { registerLayoutMap } from "comps/comps/uiComp";
 import { AppSelectComp } from "comps/comps/layout/appSelectComp";
 import { NameAndExposingInfo } from "comps/utils/exposingTypes";
@@ -17,6 +17,18 @@ import { Layers } from "constants/Layers";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { default as Skeleton } from "antd/es/skeleton";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
+import { DataOption, DataOptionType, ModeOptions, jsonMenuItems, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { NavLayoutItemActiveStyle, NavLayoutItemHoverStyle, NavLayoutItemStyle, NavLayoutStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import Segmented from "antd/es/segmented";
+import { controlItem } from "components/control";
+import { MenuItemNode } from "./navLayout";
+import { check } from "@lowcoder-ee/util/convertUtils";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import { getCompContainer, useCompContainer, useCompInstance } from "@lowcoder-ee/comps/utils/useCompInstance";
+import { ModuleComp } from "../moduleComp/moduleComp";
+import { evalAndReduceWithExposing } from "comps/utils";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
@@ -61,6 +73,21 @@ const TabBarWrapper = styled.div<{ $readOnly: boolean }>`
   }
 `;
 
+const defaultStyle = {
+  radius: '0px',
+  margin: '0px',
+  padding: '0px',
+}
+
+type MenuItemStyleOptionValue = "normal" | "hover" | "active";
+
+type JsonItemNode = {
+  label: string;
+  hidden?: boolean;
+  icon?: any;
+  app?: JSONObject,
+}
+
 type TabBarProps = {
   tabs: Array<{
     title: string;
@@ -72,7 +99,23 @@ type TabBarProps = {
   readOnly: boolean;
 };
 
+function checkDataNodes(value: any, key?: string): JsonItemNode[] | undefined {
+  return check(value, ["array", "undefined"], key, (node, k) => {
+    check(node, ["object"], k);
+    check(node["label"], ["string"], "label");
+    check(node["hidden"], ["boolean", "undefined"], "hidden");
+    check(node["icon"], ["string", "undefined"], "icon");
+    check(node["app"], ["object", "undefined"], "app");
+    return node;
+  });
+}
+
+function convertTreeData(data: any) {
+  return data === "" ? [] : checkDataNodes(data) ?? [];
+}
+
 function TabBarView(props: TabBarProps) {
+  console.log(props);
   return (
     <Suspense fallback={<Skeleton />}>
       <TabBarWrapper $readOnly={props.readOnly}>
@@ -126,6 +169,8 @@ const TabOptionComp = (function () {
 
 let MobileTabLayoutTmp = (function () {
   const childrenMap = {
+    dataOptionType: dropdownControl(DataOptionType, DataOption.Manual),
+    jsonItems: jsonControl<JsonItemNode[]>(convertTreeData, mobileNavJsonMenuItems),
     tabs: manualOptionsControl(TabOptionComp, {
       initOptions: [
         {
@@ -142,17 +187,67 @@ let MobileTabLayoutTmp = (function () {
         },
       ],
     }),
+    backgroundImage: withDefault(StringControl, ""),
+    mode: dropdownControl(ModeOptions, "inline"),
+    navStyle: withDefault(styleControl(NavLayoutStyle), defaultStyle),
+    navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle),
+    navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}),
+    navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}),
   };
   return new MultiCompBuilder(childrenMap, (props) => {
     return null;
   })
     .setPropertyViewFn((children) => {
+      const [styleSegment, setStyleSegment] = useState('normal')
       return (
-        <>
+        <div style={{overflowY: 'auto'}}>
           <Section name={trans("aggregation.tabBar")}>
-            {children.tabs.propertyView({})}
+            {children.dataOptionType.propertyView({
+              radioButton: true,
+              type: "oneline",
+            })}
+            {/* {children.tabs.propertyView({})} */}
+            {
+              children.dataOptionType.getView() === DataOption.Manual
+                ? children.tabs.propertyView({})
+                : children.jsonItems.propertyView({
+                  label: "Json Data",
+                })
+            }
           </Section>
-        </>
+          <Section name={sectionNames.layout}>
+            { children.mode.propertyView({
+              label: trans("labelProp.position"),
+              radioButton: true
+            })}
+            {children.backgroundImage.propertyView({
+              label: `Background Image`,
+              placeholder: 'https://temp.im/350x400',
+            })}
+          </Section>
+          <Section name={trans("navLayout.navStyle")}>
+            { children.navStyle.getPropertyView() }
+          </Section>
+          <Section name={trans("navLayout.navItemStyle")}>
+            {controlItem({}, (
+              <Segmented
+                block
+                options={menuItemStyleOptions}
+                value={styleSegment}
+                onChange={(k) => setStyleSegment(k as MenuItemStyleOptionValue)}
+              />
+            ))}
+            {styleSegment === 'normal' && (
+              children.navItemStyle.getPropertyView()
+            )}
+            {styleSegment === 'hover' && (
+              children.navItemHoverStyle.getPropertyView()
+            )}
+            {styleSegment === 'active' && (
+              children.navItemActiveStyle.getPropertyView()
+            )}
+          </Section>
+        </div>
       );
     })
     .build();
@@ -161,20 +256,56 @@ let MobileTabLayoutTmp = (function () {
 MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   const [tabIndex, setTabIndex] = useState(0);
   const { readOnly } = useContext(ExternalEditorContext);
-  const tabViews = (
-    comp.children.tabs.children.manual.getView() as unknown as Array<
-      ConstructorToComp<typeof TabOptionComp>
-    >
-  ).filter((tab) => !tab.children.hidden.getView());
-  const currentTab = tabViews[tabIndex];
-  const appView = (currentTab &&
-    currentTab.children.app.getAppId() &&
-    currentTab.children.app.getView()) || (
-    <EmptyContent
-      text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
-      style={{ height: "100%", backgroundColor: "white" }}
-    />
-  );
+  const tabs = comp.children.tabs.getView();
+  const navMode = comp.children.mode.getView();
+  const navStyle = comp.children.navStyle.getView();
+  const navItemStyle = comp.children.navItemStyle.getView();
+  const navItemHoverStyle = comp.children.navItemHoverStyle.getView();
+  const navItemActiveStyle = comp.children.navItemActiveStyle.getView();
+  const backgroundImage = comp.children.backgroundImage.getView();
+  const jsonItems = comp.children.jsonItems.getView();
+  const dataOptionType = comp.children.dataOptionType.getView();
+  // const tabViews = (
+  //   comp.children.tabs.children.manual.getView() as unknown as Array<
+  //     ConstructorToComp<typeof TabOptionComp>
+  //   >
+  // ).filter((tab) => !tab.children.hidden.getView());
+  const tabViews = useMemo(() => {
+    if (dataOptionType === DataOption.Manual) {
+      return (comp.children.tabs.children.manual.getView() as unknown as Array<
+        ConstructorToComp<typeof TabOptionComp>
+        >
+      ).filter((tab) => !tab.children.hidden.getView());
+    }
+    return jsonItems.filter(item => !Boolean(item.hidden)).map((item) => {
+      const container = getCompContainer({
+        Comp: TabOptionComp,
+        initialValue: {
+          ...item, 
+        }
+      })
+      if (container) {
+        container.initialized = true;
+        container.comp = evalAndReduceWithExposing(container.comp);
+      }
+      return container!.comp as unknown as ConstructorToComp<typeof TabOptionComp>
+    })
+  }, [dataOptionType])
+
+  console.log(tabViews);
+
+  const appView = useMemo(() => {
+    const currentTab = tabViews[tabIndex];
+    
+    return (currentTab &&
+      currentTab.children.app.getAppId() &&
+      currentTab.children.app.getView()) || (
+      <EmptyContent
+        text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
+        style={{ height: "100%", backgroundColor: "white" }}
+      />
+      )
+  }, [tabIndex]);
 
   const tabBarView = (
     <TabBarView

client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts

@@ -74,4 +74,34 @@ export const jsonMenuItems = [
       newTab: true,
     },
   }
+]
+
+export const mobileNavJsonMenuItems = [
+  {
+    label: "Option 1",
+    // key: 'option-1',
+    icon: "https://cdn-icons-png.flaticon.com/128/149/149338.png",
+    app: {
+      appId: ""
+    },
+    hidden: false,
+  },
+  {
+    label: "Option 2",
+    // key: 'option-2',
+    icon: "https://cdn-icons-png.flaticon.com/128/149/149206.png",
+    app: {
+      appId: ""
+    },
+    hidden: false,
+  },
+  {
+    label: "Option 2",
+    // key: 'option-2',
+    icon: "https://cdn-icons-png.flaticon.com/128/149/149206.png",
+    app: {
+      appId: ""
+    },
+    hidden: true,
+  }
 ]