Dec 23, 2024 · Dec 20, 2024 · Dec 21, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/client/VERSION b/client/VERSION
 2.5.2
 2.5.3
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
 {
  "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
  uiChildren,
  clickEvent,
  styleControl,
  EchartsStyle,
  EchartDefaultChartStyle,
  EchartDefaultTextStyle
 } from "lowcoder-sdk";
  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
  uiChildren,
  clickEvent,
  styleControl,
  EchartsStyle,
  EchartDefaultChartStyle,
  EchartDefaultTextStyle
 } from "lowcoder-sdk";
  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
      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
 {
  "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
    // 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)) {
      // 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
 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[];
  }
 `;

 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
    <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
  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) =>
                  ? 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?.();
              }}
            />
          );
        })}
 };

 export type SideBarItemType = Omit<SideBarItemProps, "selected"> & {
  onSelected?: (routePath: string, currentPath: string) => boolean; //customize select logic fromurl path
  onSelected?: (routePath: string, currentPath: string) => boolean; //Customize select logic fromURL 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
 }
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-comps",
		"version": "2.5.3",
		"version": "2.5.4",
		"type": "module",
		"license": "MIT",
		"dependencies": {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,7 +16,6 @@ import {
		uiChildren,
		clickEvent,
		styleControl,
		EchartsStyle,
		EchartDefaultChartStyle,
		EchartDefaultTextStyle
		} from "lowcoder-sdk";
Expand DownExpand Up		@@ -279,7 +278,7 @@ let chartJsonModeChildren: any = {
		opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity'))
		}

		if (EchartsStyle) {
		if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
		chartJsonModeChildren = {
		...chartJsonModeChildren,
		chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder",
		"version": "2.5.1",
		"version": "2.5.3",
		"private": true,
		"type": "module",
		"main": "src/index.sdk.ts",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)) {
Expand All		@@ -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_');
		}
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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[];
Expand All		@@ -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
Expand All		@@ -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>
		);
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) =>
Expand All		@@ -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?.();
		}}
		/>
		);
		})}
Expand All		@@ -54,15 +62,17 @@ export const SideBarSection = (props: SideBarSectionProps) => {
		};

		export type SideBarItemType = Omit<SideBarItemProps, "selected"> & {
		onSelected?: (routePath: string, currentPath: string) => boolean; //customize select logic fromurl path
		onSelected?: (routePath: string, currentPath: string) => boolean; //Customize select logic fromURL 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
		}