lowcoder-org · FalkWolsky · Dec 23, 2024 · Dec 20, 2024 · Dec 21, 2024 · Dec 23, 2024
diff --git a/client/VERSION b/client/VERSION
@@ -1 +1 @@
-2.5.2
+2.5.3
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "type": "module",
   "license": "MIT",
   "dependencies": {

diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -16,7 +16,6 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle,
   EchartDefaultChartStyle,
   EchartDefaultTextStyle
 } from "lowcoder-sdk";
@@ -279,7 +278,7 @@ let chartJsonModeChildren: any = {
   opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity'))
 }
 
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
     chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
@@ -16,7 +16,6 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle,
   EchartDefaultChartStyle,
   EchartDefaultTextStyle
 } from "lowcoder-sdk";
@@ -281,7 +280,7 @@ let chartJsonModeChildren: any = {
   progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
 
 }
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
     chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
@@ -57,6 +57,7 @@
       src="https://tag.clearbitscripts.com/v1/pk_dfbc0aeefb28dc63475b67134facf127/tags.js"
       referrerPolicy="no-referrer"
     ></script>
+    <script async defer src="//js-eu1.hs-scripts.com/144574215.js" type="text/javascript" id="hs-script-loader"></script>
   </head>
   <body>
     <div id="not-supported-browser"></div>

diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -129,10 +129,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
     // we check if we are on the public cloud
     const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
     const isLocalhost = window.location.hostname === 'localhost';
-
-    /* if (isLocalhost || isLowCoderDomain) {
-      posthog.init('phc_lD36OXeppUehLgI33YFhioTpXqThZ5QqR8IWeKvXP7f', { api_host: 'https://eu.i.posthog.com', person_profiles: 'always' });
-    } */
 
     // make sure all users in this app have checked login info
     if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeDataFinished)) {
@@ -143,7 +139,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       // if the user just logged in, we send the event to posthog
       if (isLocalhost || isLowCoderDomain) {
         if (sessionStorage.getItem('_just_logged_in_')) {
-          // posthog.identify(this.props.currentUserId);
           sessionStorage.removeItem('_just_logged_in_');
         }
       }

diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx
@@ -2,13 +2,15 @@ import { Route, Switch } from "react-router-dom";
 import { default as AntdLayout } from "antd/es/layout";
 import { AppHeader } from "pages/common/header";
 import * as React from "react";
-import { ReactElement } from "react";
+import { ReactElement, useState, useEffect } from "react";
 import { HelpDropdown } from "pages/common/help";
 import MainContent from "components/layout/MainContent";
 import SideBar from "components/layout/SideBar";
 import { CNMainContent, CNSidebar } from "constants/styleSelectors";
 import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
 import styled from "styled-components";
+import { MenuOutlined } from "@ant-design/icons";
+import { Drawer, Button } from "antd";
 
 type LayoutProps = {
   sections: SideBarSectionProps[];
@@ -29,9 +31,53 @@ const SideBarV2 = styled(SideBar)`
   }
 `;
 
+const MobileMenuButton = styled(Button)`
+  display: none;
+  position: fixed;
+  top: 75px;
+  right: 22px;
+  z-index: 1000;
+
+  @media screen and (max-width: 720px) {
+    display: block;
+  }
+`;
+
+const DrawerContentWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
 export function Layout(props: LayoutProps) {
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const toggleDrawer = () => {
+    setDrawerVisible(!drawerVisible);
+  };
+
+  const handleMenuClick = () => {
+    setDrawerVisible(false); // Close the drawer
+  };
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 720);
+    handleResize(); // Check on initial render
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const mobileSections = props.sections.map((section) => ({
+    ...section,
+    items: section.items.filter((item) => item.mobileVisible !== false), // Filter mobile-visible items
+  }));
+
+  const desktopSections = props.sections;
+
   const routes: ReactElement[] = [];
-  props.sections.forEach((section) => {
+  desktopSections.forEach((section) => {
     section.items.forEach((item) => {
       routes.push(
         <Route
@@ -48,18 +94,57 @@ export function Layout(props: LayoutProps) {
     <AntdLayout style={{ height: "100%" }}>
       <AppHeader />
       <HelpDropdown />
+
+      {/* Mobile Hamburger Button */}
+      {isMobile && (
+        <MobileMenuButton
+          type="primary"
+          shape="circle"
+          icon={<MenuOutlined />}
+          onClick={toggleDrawer}
+        />
+      )}
+
+      {/* Drawer for Mobile Sidebar */}
+      <Drawer
+        width={"240px"}
+        placement="right"
+        closable={true}
+        onClose={toggleDrawer}
+        visible={drawerVisible}
+        bodyStyle={{ padding: "0px" }}
+        destroyOnClose // Ensure drawer content is removed when closed
+      >
+        <DrawerContentWrapper>
+          <SideBarV2 className={CNSidebar}>
+            {mobileSections
+              .filter((section) => section.items.length > 0)
+              .map((section, index) => (
+                <SideBarSection
+                  key={index}
+                  {...section}
+                  onItemClick={handleMenuClick} // Pass handler to close the drawer
+                />
+              ))}
+          </SideBarV2>
+        </DrawerContentWrapper>
+      </Drawer>
+
+      {/* Desktop Layout */}
       <AntdLayout>
-        <SideBarV2 className={CNSidebar}>
-          {props.sections
-            .filter((section) => section.items.length > 0)
-            .map((section, index) => (
-              <SideBarSection key={index} {...section} />
-            ))}
-        </SideBarV2>
+        {!isMobile && (
+          <SideBarV2 className={`${CNSidebar} desktop-only`}>
+            {desktopSections
+              .filter((section) => section.items.length > 0)
+              .map((section, index) => (
+                <SideBarSection key={index} {...section} />
+              ))}
+          </SideBarV2>
+        )}
         <MainContent className={CNMainContent}>
-          <Switch>{routes} </Switch>
+          <Switch>{routes}</Switch>
         </MainContent>
       </AntdLayout>
     </AntdLayout>
   );
-}
+}
diff --git a/client/packages/lowcoder/src/components/layout/SideBarSection.tsx b/client/packages/lowcoder/src/components/layout/SideBarSection.tsx
@@ -24,9 +24,12 @@ export const SideBarSection = (props: SideBarSectionProps) => {
   const user = useSelector<AppState, User>(getUser);
   const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
   const currentPath = useLocation().pathname;
-  const isShow = props.items.map(item => item.visible ? item.visible({ user: user, applications: applications }) : true).includes(true);
+  const isShow = props.items
+    .map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true))
+    .includes(true);
+
   return (
-    <Wrapper className={ isShow ? CNSidebarSection : ''} style={props.style}>
+    <Wrapper className={isShow ? CNSidebarSection : ""} style={props.style}>
       {props.title}
       {props.items
         .filter((item) =>
@@ -42,10 +45,15 @@ export const SideBarSection = (props: SideBarSectionProps) => {
                   ? item.onSelected(item.routePath, currentPath)
                   : defaultOnSelectedFn(item.routePath, currentPath)
               }
-              onClick={
-                item.onClick ??
-                (() => currentPath !== item.routePath && history.push(item.routePath))
-              }
+              onClick={() => {
+                // Trigger item's onClick if defined
+                item.onClick
+                  ? item.onClick("")
+                  : currentPath !== item.routePath && history.push(item.routePath);
+
+                // Trigger parent onItemClick to close the drawer
+                props.onItemClick?.();
+              }}
             />
           );
         })}
@@ -54,15 +62,17 @@ export const SideBarSection = (props: SideBarSectionProps) => {
 };
 
 export type SideBarItemType = Omit<SideBarItemProps, "selected"> & {
-  onSelected?: (routePath: string, currentPath: string) => boolean; // customize select logic from url path
+  onSelected?: (routePath: string, currentPath: string) => boolean; // Customize select logic from URL path
   routePath: string;
   routePathExact?: boolean;
   visible?: (params: { user: User; applications: ApplicationMeta[] }) => boolean;
   routeComp: React.ComponentType<any>;
+  mobileVisible?: boolean;
 };
 
 export interface SideBarSectionProps {
   title?: ReactNode;
   items: SideBarItemType[];
   style?: CSSProperties;
+  onItemClick?: () => void; // New prop for handling item click
 }