From eb244e1fa67dc4078a5eabb2bfd5f9900db7a454 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Wed, 26 Jun 2024 01:21:13 +0500 Subject: [PATCH 1/6] event handler added --- client/packages/lowcoder/src/comps/comps/textComp.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 49838b294..21220e7d2 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -20,6 +20,9 @@ import { PaddingControl } from "../controls/paddingControl"; import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl"; + +const EventOptions = [clickEvent] as const; const getStyle = (style: TextStyleType) => { return css` @@ -126,6 +129,7 @@ let TextTmpComp = (function () { "text", trans("textShow.text", { name: "{{currentUser.name}}" }) ), + onEvent: eventHandlerControl(EventOptions), autoHeight: AutoHeightControl, type: dropdownControl(typeOptions, "markdown"), horizontalAlignment: alignWithJustifyControl(), @@ -148,6 +152,7 @@ let TextTmpComp = (function () { textAlign: props.horizontalAlignment, rotate: props.style.rotation }} + onClick={() => props.onEvent("click")} > {props.type === "markdown" ? {value} : value} @@ -168,6 +173,7 @@ let TextTmpComp = (function () { {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)} + {children.onEvent.getPropertyView()}
)} From 3ca594ca598c4581ae7a3f9af43603f7efdeeb92 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 27 Jun 2024 02:06:10 +0500 Subject: [PATCH 2/6] event handler added --- .../src/comps/comps/layout/mobileTabLayout.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index 5d94b3d5e..c04ba6cab 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -30,6 +30,7 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; +import { LayoutActionComp } from "./layoutActionComp"; const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar")); const TabBarItem = React.lazy(() => @@ -250,6 +251,7 @@ const TabOptionComp = (function () { return new MultiCompBuilder( { app: AppSelectComp, + action: LayoutActionComp, label: StringControl, icon: IconControl, hidden: BoolCodeControl, @@ -261,12 +263,17 @@ const TabOptionComp = (function () { .setPropertyViewFn((children, dispatch) => { return ( <> + {children.action.propertyView({ + onAppChange: (label:any) => { + label && children.label.dispatchChangeValueAction(label); + }, + })} {children.app.propertyView({})} {children.label.propertyView({ label: trans("label") })} {hiddenPropertyView(children)} {children.icon.propertyView({ - label: trans("icon"), - tooltip: trans("aggregation.iconTooltip"), + label: trans('icon'), + tooltip: trans('aggregation.iconTooltip'), })} ); From 65b651f02245b9eee4d02217bfa75f20852fea05 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 27 Jun 2024 02:20:23 +0500 Subject: [PATCH 3/6] option hidden --- .../packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index c04ba6cab..c20f67eca 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -268,7 +268,6 @@ const TabOptionComp = (function () { label && children.label.dispatchChangeValueAction(label); }, })} - {children.app.propertyView({})} {children.label.propertyView({ label: trans("label") })} {hiddenPropertyView(children)} {children.icon.propertyView({ From 6d528d5139a9bd7275ed6d6f182996a708d3be13 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 2 Jul 2024 21:00:09 +0500 Subject: [PATCH 4/6] event handler for pc navigation --- .../lowcoder/src/comps/comps/layout/navLayout.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index d77eb94c6..0b299973e 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -40,11 +40,13 @@ import { jsonMenuItems, menuItemStyleOptions } from "./navLayoutConstants"; +import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk"; const { Header } = Layout; const DEFAULT_WIDTH = 240; type MenuItemStyleOptionValue = "normal" | "hover" | "active"; +const EventOptions = [clickEvent] as const; const StyledSide = styled(LayoutSider)` max-height: calc(100vh - ${TopHeaderHeight}); @@ -183,6 +185,7 @@ function convertTreeData(data: any) { let NavTmpLayout = (function () { const childrenMap = { + onEvent: eventHandlerControl(EventOptions), dataOptionType: dropdownControl(DataOptionType, DataOption.Manual), items: withDefault(LayoutMenuItemListComp, [ { @@ -242,6 +245,9 @@ let NavTmpLayout = (function () {
{ children.navStyle.getPropertyView() }
+
+ { children.onEvent.getPropertyView() } +
{controlItem({}, ( { const backgroundImage = comp.children.backgroundImage.getView(); const jsonItems = comp.children.jsonItems.getView(); const dataOptionType = comp.children.dataOptionType.getView(); - + const onEvent = comp.children.onEvent.getView(); + // filter out hidden. unauthorised items filtered by server const filterItem = useCallback((item: LayoutMenuItemComp): boolean => { return !item.children.hidden.getView(); @@ -319,7 +326,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { return generateItemKeyRecord(items) }, [dataOptionType, jsonItems, items, generateItemKeyRecord]); - const onMenuItemClick = useCallback(({key}: {key: string}) => { + const onMenuItemClick = useCallback(({ key }: { key: string }) => { + onEvent('click') const itemComp = itemKeyRecord[key] const url = [ From b6858974c1d089335cc322681b3029bb6a4a0317 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 2 Jul 2024 21:28:47 +0500 Subject: [PATCH 5/6] event handler for mobile navigation --- .../src/comps/comps/layout/mobileTabLayout.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index c20f67eca..09b9c8d3b 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -31,6 +31,7 @@ import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; import { LayoutActionComp } from "./layoutActionComp"; +import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk"; const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar")); const TabBarItem = React.lazy(() => @@ -38,6 +39,7 @@ const TabBarItem = React.lazy(() => default: module.TabBarItem, })) ); +const EventOptions = [clickEvent] as const; const AppViewContainer = styled.div` position: absolute; @@ -172,6 +174,7 @@ type JsonItemNode = { } type TabBarProps = { + onEvent:any; tabs: Array<{ title: string; icon?: React.ReactNode; @@ -225,6 +228,7 @@ function TabBarView(props: TabBarProps & { { if (key) { + props.onEvent('click') props.onChange(key); } }} @@ -282,8 +286,9 @@ const TabOptionComp = (function () { let MobileTabLayoutTmp = (function () { const childrenMap = { + onEvent: eventHandlerControl(EventOptions), dataOptionType: dropdownControl(DataOptionType, DataOption.Manual), - jsonItems: jsonControl(convertTreeData, mobileNavJsonMenuItems), + jsonItems: jsonControl(convertTreeData, mobileNavJsonMenuItems), tabs: manualOptionsControl(TabOptionComp, { initOptions: [ { @@ -350,6 +355,9 @@ let MobileTabLayoutTmp = (function () {
{ children.navStyle.getPropertyView() }
+
+ { children.onEvent.getPropertyView() } +
{controlItem({}, ( { const verticalAlignment = comp.children.verticalAlignment.getView(); const showSeparator = comp.children.showSeparator.getView(); const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; + const onEvent = comp.children.onEvent.getView(); useEffect(() => { comp.children.jsonTabs.dispatchChangeValueAction({ @@ -434,6 +443,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const tabBarView = ( ({ key: index, title: tab.children.label.getView(), From d23fc09be1ff5a4a5783be439b49b73b4e5a9ce9 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 3 Jul 2024 12:06:33 +0500 Subject: [PATCH 6/6] event handler section position changed --- .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx | 6 +++--- .../packages/lowcoder/src/comps/comps/layout/navLayout.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index 09b9c8d3b..25b93966b 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -339,6 +339,9 @@ let MobileTabLayoutTmp = (function () { }) }
+
+ { children.onEvent.getPropertyView() } +
{children.backgroundImage.propertyView({ label: `Background Image`, @@ -355,9 +358,6 @@ let MobileTabLayoutTmp = (function () {
{ children.navStyle.getPropertyView() }
-
- { children.onEvent.getPropertyView() } -
{controlItem({}, ( +
+ { children.onEvent.getPropertyView() } +
{ children.width.propertyView({ label: trans("navLayout.width"), @@ -245,9 +248,6 @@ let NavTmpLayout = (function () {
{ children.navStyle.getPropertyView() }
-
- { children.onEvent.getPropertyView() } -
{controlItem({}, (