From fcf78c9d6a1bbe80f6c4a55a178491e48fcc022a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran.code@gmail.com>
Date: Thu, 11 Sep 2025 14:49:20 +0500
Subject: [PATCH] [Feat]: #1922 add drawer events

---
 .../lowcoder/src/comps/hooks/drawerComp.tsx      | 16 ++++++++++------
 client/packages/lowcoder/src/i18n/locales/en.ts  |  4 ++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index c7e0c9b3f..3b33c3fb9 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -7,7 +7,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { PositionControl, LeftRightControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
-import { closeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { DrawerStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
@@ -34,7 +34,10 @@ import { ToViewReturn } from "../generators/multi";
 import { SimpleContainerComp } from "../comps/containerBase/simpleContainerComp";
 import { JSX } from "react/jsx-runtime";
 
-const EventOptions = [closeEvent] as const;
+const EventOptions = [
+  { label: trans("drawer.open"), value: "open", description: trans("drawer.openDesc") },
+  { label: trans("drawer.close"), value: "close", description: trans("drawer.closeDesc") },
+] as const;
 
 const DEFAULT_SIZE = 378;
 const DEFAULT_PADDING = 16;
@@ -201,12 +204,13 @@ const DrawerView = React.memo((
 
   const onClose = useCallback((e?: React.MouseEvent | React.KeyboardEvent) => {
     props.visible.onChange(false);
-  }, [props.visible]);
+    props.onEvent("close");
+  }, [props.visible, props.onEvent]);
 
   const afterOpenChange = useCallback((visible: boolean) => {
-    if (!visible) {
-      props.onEvent("close");
-    }
+    if (visible) {
+      props.onEvent("open");
+    } 
   }, [props.onEvent]);
 
   const drawerStyles = useMemo(() => ({
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 80f667288..1a1e07e6a 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2345,6 +2345,10 @@ export const en = {
     "titleAlign": "Title Alignment",
     "widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
     "heightTooltip": "Pixel, e.g. 378",
+    "open": "Open",
+    "openDesc": "Triggered When the Drawer is Opened",
+    "close": "Close",
+    "closeDesc": "Triggered When the Drawer is Closed",
     "openDrawerDesc": "Open Drawer",
     "closeDrawerDesc": "Close Drawer",
     "width": "Drawer Width",