Skip to content

Commit 100d845

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1411 from lowcoder-org/dev
Dev -> Main v2.5.3
2 parents 5cdf061 + dcaa670 commit 100d845

File tree

16 files changed

+194
-177
lines changed

16 files changed

+194
-177
lines changed

‎client/VERSION

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.5.2
1+
2.5.3

‎client/packages/lowcoder-comps/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "2.5.3",
3+
"version": "2.5.4",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle,
2019
EchartDefaultChartStyle,
2120
EchartDefaultTextStyle
2221
} from "lowcoder-sdk";
@@ -279,7 +278,7 @@ let chartJsonModeChildren: any = {
279278
opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity'))
280279
}
281280

282-
if (EchartsStyle) {
281+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
283282
chartJsonModeChildren = {
284283
...chartJsonModeChildren,
285284
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle,
2019
EchartDefaultChartStyle,
2120
EchartDefaultTextStyle
2221
} from "lowcoder-sdk";
@@ -281,7 +280,7 @@ let chartJsonModeChildren: any = {
281280
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
282281

283282
}
284-
if (EchartsStyle) {
283+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
285284
chartJsonModeChildren = {
286285
...chartJsonModeChildren,
287286
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

‎client/packages/lowcoder/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
src="https://tag.clearbitscripts.com/v1/pk_dfbc0aeefb28dc63475b67134facf127/tags.js"
5858
referrerPolicy="no-referrer"
5959
></script>
60+
<script async defer src="//js-eu1.hs-scripts.com/144574215.js" type="text/javascript" id="hs-script-loader"></script>
6061
</head>
6162
<body>
6263
<div id="not-supported-browser"></div>

‎client/packages/lowcoder/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder",
3-
"version": "2.5.1",
3+
"version": "2.5.3",
44
"private": true,
55
"type": "module",
66
"main": "src/index.sdk.ts",

‎client/packages/lowcoder/src/app.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -129,10 +129,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
129129
// we check if we are on the public cloud
130130
const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
131131
const isLocalhost = window.location.hostname === 'localhost';
132-
133-
/* if (isLocalhost || isLowCoderDomain) {
134-
posthog.init('phc_lD36OXeppUehLgI33YFhioTpXqThZ5QqR8IWeKvXP7f', { api_host: 'https://eu.i.posthog.com', person_profiles: 'always' });
135-
} */
136132

137133
// make sure all users in this app have checked login info
138134
if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeDataFinished)) {
@@ -143,7 +139,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
143139
// if the user just logged in, we send the event to posthog
144140
if (isLocalhost || isLowCoderDomain) {
145141
if (sessionStorage.getItem('_just_logged_in_')) {
146-
// posthog.identify(this.props.currentUserId);
147142
sessionStorage.removeItem('_just_logged_in_');
148143
}
149144
}

‎client/packages/lowcoder/src/components/layout/Layout.tsx

+96-11
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import { Route, Switch } from "react-router-dom";
22
import { default as AntdLayout } from "antd/es/layout";
33
import { AppHeader } from "pages/common/header";
44
import * as React from "react";
5-
import { ReactElement } from "react";
5+
import { ReactElement, useState, useEffect } from "react";
66
import { HelpDropdown } from "pages/common/help";
77
import MainContent from "components/layout/MainContent";
88
import SideBar from "components/layout/SideBar";
99
import { CNMainContent, CNSidebar } from "constants/styleSelectors";
1010
import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
1111
import styled from "styled-components";
12+
import { MenuOutlined } from "@ant-design/icons";
13+
import { Drawer, Button } from "antd";
1214

1315
type LayoutProps = {
1416
sections: SideBarSectionProps[];
@@ -29,9 +31,53 @@ const SideBarV2 = styled(SideBar)`
2931
}
3032
`;
3133

34+
const MobileMenuButton = styled(Button)`
35+
display: none;
36+
position: fixed;
37+
top: 75px;
38+
right: 22px;
39+
z-index: 1000;
40+
41+
@media screen and (max-width: 720px) {
42+
display: block;
43+
}
44+
`;
45+
46+
const DrawerContentWrapper = styled.div`
47+
height: 100%;
48+
display: flex;
49+
flex-direction: column;
50+
`;
51+
3252
export function Layout(props: LayoutProps) {
53+
54+
const [drawerVisible, setDrawerVisible] = useState(false);
55+
const [isMobile, setIsMobile] = useState(false);
56+
57+
const toggleDrawer = () => {
58+
setDrawerVisible(!drawerVisible);
59+
};
60+
61+
const handleMenuClick = () => {
62+
setDrawerVisible(false); // Close the drawer
63+
};
64+
65+
useEffect(() => {
66+
const handleResize = () => setIsMobile(window.innerWidth <= 720);
67+
handleResize(); // Check on initial render
68+
window.addEventListener("resize", handleResize);
69+
return () => window.removeEventListener("resize", handleResize);
70+
}, []);
71+
72+
const mobileSections = props.sections.map((section) => ({
73+
...section,
74+
items: section.items.filter((item) => item.mobileVisible !== false), // Filter mobile-visible items
75+
}));
76+
77+
const desktopSections = props.sections;
78+
3379
const routes: ReactElement[] = [];
34-
props.sections.forEach((section) => {
80+
desktopSections.forEach((section) => {
3581
section.items.forEach((item) => {
3682
routes.push(
3783
<Route
@@ -48,18 +94,57 @@ export function Layout(props: LayoutProps) {
4894
<AntdLayout style={{ height: "100%" }}>
4995
<AppHeader />
5096
<HelpDropdown />
97+
98+
{/* Mobile Hamburger Button */}
99+
{isMobile && (
100+
<MobileMenuButton
101+
type="primary"
102+
shape="circle"
103+
icon={<MenuOutlined />}
104+
onClick={toggleDrawer}
105+
/>
106+
)}
107+
108+
{/* Drawer for Mobile Sidebar */}
109+
<Drawer
110+
width={"240px"}
111+
placement="right"
112+
closable={true}
113+
onClose={toggleDrawer}
114+
visible={drawerVisible}
115+
bodyStyle={{ padding: "0px" }}
116+
destroyOnClose // Ensure drawer content is removed when closed
117+
>
118+
<DrawerContentWrapper>
119+
<SideBarV2 className={CNSidebar}>
120+
{mobileSections
121+
.filter((section) => section.items.length > 0)
122+
.map((section, index) => (
123+
<SideBarSection
124+
key={index}
125+
{...section}
126+
onItemClick={handleMenuClick} // Pass handler to close the drawer
127+
/>
128+
))}
129+
</SideBarV2>
130+
</DrawerContentWrapper>
131+
</Drawer>
132+
133+
{/* Desktop Layout */}
51134
<AntdLayout>
52-
<SideBarV2 className={CNSidebar}>
53-
{props.sections
54-
.filter((section) => section.items.length > 0)
55-
.map((section, index) => (
56-
<SideBarSection key={index} {...section} />
57-
))}
58-
</SideBarV2>
135+
{!isMobile && (
136+
<SideBarV2 className={`${CNSidebar} desktop-only`}>
137+
{desktopSections
138+
.filter((section) => section.items.length > 0)
139+
.map((section, index) => (
140+
<SideBarSection key={index} {...section} />
141+
))}
142+
</SideBarV2>
143+
)}
59144
<MainContent className={CNMainContent}>
60-
<Switch>{routes} </Switch>
145+
<Switch>{routes}</Switch>
61146
</MainContent>
62147
</AntdLayout>
63148
</AntdLayout>
64149
);
65-
}
150+
}

‎client/packages/lowcoder/src/components/layout/SideBarSection.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,12 @@ export const SideBarSection = (props: SideBarSectionProps) => {
2424
const user = useSelector<AppState, User>(getUser);
2525
const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
2626
const currentPath = useLocation().pathname;
27-
const isShow = props.items.map(item => item.visible ? item.visible({ user: user, applications: applications }) : true).includes(true);
27+
const isShow = props.items
28+
.map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true))
29+
.includes(true);
30+
2831
return (
29-
<Wrapper className={ isShow ? CNSidebarSection : ''} style={props.style}>
32+
<Wrapper className={isShow ? CNSidebarSection : ""} style={props.style}>
3033
{props.title}
3134
{props.items
3235
.filter((item) =>
@@ -42,10 +45,15 @@ export const SideBarSection = (props: SideBarSectionProps) => {
4245
? item.onSelected(item.routePath, currentPath)
4346
: defaultOnSelectedFn(item.routePath, currentPath)
4447
}
45-
onClick={
46-
item.onClick ??
47-
(() => currentPath !== item.routePath && history.push(item.routePath))
48-
}
48+
onClick={() => {
49+
// Trigger item's onClick if defined
50+
item.onClick
51+
? item.onClick("")
52+
: currentPath !== item.routePath && history.push(item.routePath);
53+
54+
// Trigger parent onItemClick to close the drawer
55+
props.onItemClick?.();
56+
}}
4957
/>
5058
);
5159
})}
@@ -54,15 +62,17 @@ export const SideBarSection = (props: SideBarSectionProps) => {
5462
};
5563

5664
export type SideBarItemType = Omit<SideBarItemProps, "selected"> & {
57-
onSelected?: (routePath: string, currentPath: string) => boolean; // customize select logic from url path
65+
onSelected?: (routePath: string, currentPath: string) => boolean; // Customize select logic from URL path
5866
routePath: string;
5967
routePathExact?: boolean;
6068
visible?: (params: { user: User; applications: ApplicationMeta[] }) => boolean;
6169
routeComp: React.ComponentType<any>;
70+
mobileVisible?: boolean;
6271
};
6372

6473
export interface SideBarSectionProps {
6574
title?: ReactNode;
6675
items: SideBarItemType[];
6776
style?: CSSProperties;
77+
onItemClick?: () => void; // New prop for handling item click
6878
}

0 commit comments

Comments
 (0)