Merge pull request #988 from MenamAfzal/feature/add-event-handler

Event handler added

Author: raheeliftikhar5

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

@@ -30,13 +30,16 @@ 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";
+import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
   import("antd-mobile/es/components/tab-bar/tab-bar").then((module) => ({
     default: module.TabBarItem,
   }))
 );
+const EventOptions = [clickEvent] as const;
 
 const AppViewContainer = styled.div`
   position: absolute;
@@ -171,6 +174,7 @@ type JsonItemNode = {
 }
 
 type TabBarProps = {
+  onEvent:any;
   tabs: Array<{
     title: string;
     icon?: React.ReactNode;
@@ -224,6 +228,7 @@ function TabBarView(props: TabBarProps & {
         <StyledTabBar
           onChange={(key: string) => {
             if (key) {
+              props.onEvent('click')
               props.onChange(key);
             }
           }}
@@ -250,6 +255,7 @@ const TabOptionComp = (function () {
   return new MultiCompBuilder(
     {
       app: AppSelectComp,
+      action: LayoutActionComp,
       label: StringControl,
       icon: IconControl,
       hidden: BoolCodeControl,
@@ -261,12 +267,16 @@ const TabOptionComp = (function () {
     .setPropertyViewFn((children, dispatch) => {
       return (
         <>
-          {children.app.propertyView({})}
+          {children.action.propertyView({
+            onAppChange: (label:any) => {
+              label && children.label.dispatchChangeValueAction(label);
+            },
+          })}
           {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'),
           })}
         </>
       );
@@ -276,8 +286,9 @@ const TabOptionComp = (function () {
 
 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: [
         {
@@ -328,6 +339,9 @@ let MobileTabLayoutTmp = (function () {
                 })
             }
           </Section>
+          <Section name={trans("eventHandler.eventHandlers")}>
+            { children.onEvent.getPropertyView() }
+          </Section>
           <Section name={sectionNames.layout}>
             {children.backgroundImage.propertyView({
               label: `Background Image`,
@@ -385,6 +399,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   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({
@@ -428,6 +443,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
 
   const tabBarView = (
     <TabBarView
+      onEvent={onEvent}
       tabs={tabViews.map((tab, index) => ({
         key: index,
         title: tab.children.label.getView(),

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, [
       {
@@ -221,6 +224,9 @@ let NavTmpLayout = (function () {
                 })
             }
           </Section>
+          <Section name={trans("eventHandler.eventHandlers")}>
+            { children.onEvent.getPropertyView() }
+          </Section>
           <Section name={sectionNames.layout}>
             { children.width.propertyView({
                 label: trans("navLayout.width"),
@@ -282,7 +288,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   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 = [

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" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
       </TextContainer>
@@ -168,6 +173,7 @@ let TextTmpComp = (function () {
           {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
+              {children.onEvent.getPropertyView()}
             </Section>
           )}