fix mobile nav layout app view + fix styles of pc/mobile nav

Author: raheeliftikhar5

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

@@ -33,6 +33,8 @@ import { AlignRight } from "lowcoder-design";
 import { LayoutActionComp } from "./layoutActionComp";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
@@ -228,9 +230,10 @@ function TabBarView(props: TabBarProps & {
       >
         <StyledTabBar
           onChange={(key: string) => {
+            console.log(key)
             if (key) {
-              props.onEvent('click')
               props.onChange(key);
+              props.onEvent('click')
             }
           }}
           activeKey={props.selectedKey}
@@ -289,7 +292,7 @@ let MobileTabLayoutTmp = (function () {
   const childrenMap = {
     onEvent: eventHandlerControl(EventOptions),
     dataOptionType: dropdownControl(DataOptionType, DataOption.Manual),
-     jsonItems: jsonControl<JsonItemNode[]>(convertTreeData, mobileNavJsonMenuItems),
+    jsonItems: jsonControl<JsonItemNode[]>(convertTreeData, mobileNavJsonMenuItems),
     tabs: manualOptionsControl(TabOptionComp, {
       initOptions: [
         {
@@ -315,12 +318,12 @@ let MobileTabLayoutTmp = (function () {
     maxWidth: withDefault(NumberControl, 450),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "stretch"),
     showSeparator: withDefault(BoolCodeControl, true),
-    navStyle: withDefault(styleControl(NavLayoutStyle), defaultStyle),
-    navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle),
-    navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}),
-    navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}),
+    navStyle: styleControl(NavLayoutStyle, 'navStyle'),
+    navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'),
+    navItemHoverStyle: styleControl(NavLayoutItemHoverStyle, 'navItemHoverStyle'),
+    navItemActiveStyle: styleControl(NavLayoutItemActiveStyle, 'navItemActiveStyle'),
   };
-  return new MultiCompBuilder(childrenMap, (props) => {
+  return new MultiCompBuilder(childrenMap, (props, dispatch) => {
     return null;
   })
     .setPropertyViewFn((children) => {
@@ -402,6 +405,8 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
   const onEvent = comp.children.onEvent.getView();
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   useEffect(() => {
     comp.children.jsonTabs.dispatchChangeValueAction({
       manual: jsonItems as unknown as Array<ConstructorToDataType<typeof TabOptionComp>>
@@ -427,9 +432,20 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   const appView = useMemo(() => {
     const currentTab = tabViews[tabIndex];
 
+    if (dataOptionType === DataOption.Json) {
+      return (currentTab &&
+        currentTab.children.app.getAppId() &&
+        currentTab.children.app.getView()) || (
+        <EmptyContent
+          text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
+          style={{ height: "100%", backgroundColor: "white" }}
+        />
+      );
+    }
+
     return (currentTab &&
-      currentTab.children.app.getAppId() &&
-      currentTab.children.app.getView()) || (
+      // currentTab.children.app.getAppId() &&
+      currentTab.children.action.getView()) || (
       <EmptyContent
         text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
         style={{ height: "100%", backgroundColor: "white" }}

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

@@ -16,7 +16,7 @@ import { trans } from "i18n";
 import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { isUserViewMode, useAppPathParam } from "util/hooks";
+import { isUserViewMode, useAppPathParam, useMergeCompStyles } from "util/hooks";
 import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
@@ -41,6 +41,7 @@ import {
   menuItemStyleOptions
 } from "./navLayoutConstants";
 import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 const { Header } = Layout;
 
@@ -198,10 +199,10 @@ let NavTmpLayout = (function () {
     backgroundImage: withDefault(StringControl, ""),
     mode: dropdownControl(ModeOptions, "inline"),
     collapse: BoolCodeControl,
-    navStyle: withDefault(styleControl(NavLayoutStyle), {...defaultStyle, padding: '1px'}),
-    navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle),
-    navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}),
-    navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}),
+    navStyle: styleControl(NavLayoutStyle, 'navStyle'),
+    navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'),
+    navItemHoverStyle: styleControl(NavLayoutItemHoverStyle, 'navItemHoverStyle'),
+    navItemActiveStyle: styleControl(NavLayoutItemActiveStyle, 'navItemActiveStyle'),
   };
   return new MultiCompBuilder(childrenMap, (props) => {
     return null;
@@ -290,6 +291,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   const dataOptionType = comp.children.dataOptionType.getView();
   const onEvent = comp.children.onEvent.getView();
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   // filter out hidden. unauthorised items filtered by server
   const filterItem = useCallback((item: LayoutMenuItemComp): boolean => {
     return !item.children.hidden.getView();

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

@@ -876,7 +876,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
             ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
           }
         : undefined;
-      const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
+      const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
         ? props as ColorMap
         : {} as ColorMap;
 

client/packages/lowcoder/src/util/hooks.ts

@@ -177,7 +177,7 @@ export function useMergeCompStyles(
   const compTheme = theme?.theme?.components?.[compType];
   const themeId = theme?.themeId;
 
-  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style'));
+  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style' || 'styles'));
   const styleProps: Record<string, any> = {};
   styleKeys.forEach((key: string) => {
     styleProps[key] = (props as any)[key];