fix memory leaks and convert click event wrapper to hook

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -29,7 +29,7 @@ import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstant
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
-import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
+import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -182,6 +182,7 @@ const ButtonPropertyView = React.memo((props: {
 const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
   const editorState = useContext(EditorContext);
   const mountedRef = useRef<boolean>(true);
+  const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent});
 
   useEffect(() => {
     return () => {
@@ -194,7 +195,8 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
 
     try {
       if (isDefault(props.type)) {
-        ComponentClickHandler({onEvent: props.onEvent})()
+        // ComponentClickHandler({onEvent: props.onEvent})()
+        handleClickEvent();
       } else {
         submitForm(editorState, props.form);
       }

client/packages/lowcoder/src/comps/utils/componentClickHandler.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 
 export enum ClickEventType {
     CLICK = "click",
@@ -10,23 +10,38 @@ interface Props {
 }
 
 const DOUBLE_CLICK_THRESHOLD = 300; // ms
-let lastClickTime = 0;
-let clickTimer: ReturnType<typeof setTimeout>;
 
-export const ComponentClickHandler = (props: Props) => {
-    return () => {
-        const now = Date.now()
-        clearTimeout(clickTimer)
+export const useCompClickEventHandler = (props: Props) => {
+    const lastClickTimeRef = useRef(0);
+    const clickTimerRef = useRef<ReturnType<typeof setTimeout>>();
 
-        if((now - lastClickTime) < DOUBLE_CLICK_THRESHOLD){ 
-            clearTimeout(clickTimer)
-            props.onEvent(ClickEventType.DOUBLE_CLICK)
+    const handleClick = useCallback(() => {
+        const now = Date.now();
+        
+        // Clear any existing timeout
+        if (clickTimerRef.current) {
+            clearTimeout(clickTimerRef.current);
+        }
+
+        if ((now - lastClickTimeRef.current) < DOUBLE_CLICK_THRESHOLD) {
+            props.onEvent(ClickEventType.DOUBLE_CLICK);
         } else {
-            clickTimer = setTimeout(() => {
-                props.onEvent(ClickEventType.CLICK)
-            }, DOUBLE_CLICK_THRESHOLD)
+            clickTimerRef.current = setTimeout(() => {
+                props.onEvent(ClickEventType.CLICK);
+            }, DOUBLE_CLICK_THRESHOLD);
         }
 
-        lastClickTime = now 
-    }
-}
+        lastClickTimeRef.current = now;
+    }, [props.onEvent]);
+
+    // Cleanup on unmount
+    React.useEffect(() => {
+        return () => {
+            if (clickTimerRef.current) {
+                clearTimeout(clickTimerRef.current);
+            }
+        };
+    }, []);
+
+    return handleClick;
+};