Updated Double Click event on all components

kamal-qureshi · kamal-qureshi · commit 4dbce10475a6 · 2025-06-12T20:14:06.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -35,6 +35,8 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
 import { DropdownOptionControl } from "../controls/optionsControl";
 import { ReactElement, useContext, useEffect } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
+
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -182,9 +184,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             shape={shape}
             $style={props.avatarStyle}
             src={src.value}
-            // $cursorPointer={eventsCount > 0}
-            onClick={() => props.onEvent("click")}
-            onDoubleClick={() => props.onEvent("doubleClick")}
+            onClick={ComponentClickHandler({onEvent: props.onEvent})}
           >
             {title.value}
           </AvatarWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -19,6 +19,7 @@ import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { ComponentClickHandler } from "../utils/componentClickHandler";
 
 const MacaroneList = [
   '#fde68a',
@@ -125,12 +126,9 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
                     }}
                     size={props.avatarSize}
                     onClick={() => {
-                      props.onEvent("click")
+                      ComponentClickHandler({onEvent: props.onEvent})();
                       props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
                     }}
-                    onDoubleClick={() => {
-                      props.onEvent("doubleClick")
-                    }}
                   >
                     {item.label}
                   </Avatar>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -29,6 +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";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -193,7 +194,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
     
     try {
       if (isDefault(props.type)) {
-        props.onEvent("click");
+        ComponentClickHandler({onEvent: props.onEvent})()
       } else {
         submitForm(editorState, props.form);
       }
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -17,6 +17,7 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 import { useContext, useEffect } from "react";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const StyledFloatButton = styled(FloatButton)<{
   $animationStyle: AnimationStyleType;
@@ -105,7 +106,7 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
                 $animationStyle={props.animationStyle}
                 key={button?.id}
                 icon={button?.icon}
-                onClick={() => button.onEvent("click")}
+                onClick={ComponentClickHandler({onEvent: button.onEvent})}
                 tooltip={button?.label}
                 description={button?.description}
                 badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -26,10 +26,10 @@ import {
   deleteEvent,
   mentionEvent,
   doubleClickEvent,
-} from "comps/controls/eventHandlerControl";
-
+} from "comps/controls/eventHandlerControl"; 
 import { EditorContext } from "comps/editorState";
 
+
 // Introducing styles
 import {
   AnimationStyle,
@@ -67,6 +67,7 @@ import dayjs from "dayjs";
 // import "dayjs/locale/zh-cn";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 dayjs.extend(relativeTime);
 // dayjs.locale("zh-cn");
@@ -176,7 +177,7 @@ const CommentCompBase = (
   const generateCommentAvatar = (item: commentDataTYPE) => {
     return (
       <Avatar
-        onClick={() => props.onEvent("click")}
+        onClick={ComponentClickHandler({onEvent: props.onEvent})}
         // If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
         style={{
           backgroundColor: item?.user?.avatar
@@ -293,8 +294,7 @@ const CommentCompBase = (
                   avatar={generateCommentAvatar(item)}
                   title={
                     <div 
-                      onClick={() => props.onEvent("click")} 
-                      onDoubleClick={() => props.onEvent("doubleClick")}
+                      onClick={ComponentClickHandler({onEvent: props.onEvent})}
                     >
                       <a>{item?.user?.name}</a>
                       <Tooltip
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -21,6 +21,7 @@ import { optionsControl } from "comps/controls/optionsControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const { Meta } = Card;
 
@@ -196,7 +197,6 @@ export const ContainerBaseComp = (function () {
 
   return new ContainerCompBuilder(childrenMap, (props) => {    
     props.container.showHeader = false;
-    // 注入容器参数
     props.container.style = Object.assign(props.container.style, {
       CONTAINER_BODY_PADDING: props.style.containerBodyPadding,
       border: '#00000000',
@@ -233,7 +233,7 @@ export const ContainerBaseComp = (function () {
         $cardType={props.cardType}
         onMouseEnter={() => props.onEvent('focus')}
         onMouseLeave={() => props.onEvent('blur')}
-        onClick={() => props.onEvent('click')}
+        onClick={ComponentClickHandler({onEvent: props.onEvent})}
       >
         <Card
           style={{ width: width, height: '100%' }}
@@ -249,7 +249,7 @@ export const ContainerBaseComp = (function () {
             props.actionOptions.filter(item => !item.hidden).map(item => {
               return (
                 <IconWrapper
-                  onClick={() => item.onEvent('click')}
+                  onClick={ComponentClickHandler({onEvent: props.onEvent})}
                   disabled={item.disabled}
                   $style={props.style}
                 >
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -33,6 +33,7 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 import { dropdownControl } from "../controls/dropdownControl";
+import { ComponentClickHandler } from "../utils/componentClickHandler";
 
 const Container = styled.div<{
   $sourceMode: string;
@@ -135,8 +136,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
       $sourceMode={props.sourceMode}
       $animationStyle={props.animationStyle}
       style={style}
-      onClick={() => props.onEvent("click")}
-      onDoubleClick={() => props.onEvent("doubleClick")}
+      onClick={ComponentClickHandler({onEvent: props.onEvent})}
     >
       { props.sourceMode === 'standard'
         ? (props.icon || '')
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -38,6 +38,7 @@ import { StringControl } from "../controls/codeControl";
 import { PositionControl } from "comps/controls/dropdownControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { AssetType, IconscoutControl } from "../controls/iconscoutControl";
+import { ComponentClickHandler } from "../utils/componentClickHandler";
 
 const Container = styled.div<{ 
   $style: ImageStyleType | undefined, 
@@ -212,8 +213,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
           draggable={false}
           preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
           fallback={DEFAULT_IMG_URL}
-          onClick={() => props.onEvent("click")}
-          onDoubleClick={() => props.onEvent("doubleClick")}
+          onClick={ComponentClickHandler({onEvent: props.onEvent})}
         />
       </div>
     </Container>
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -41,6 +41,7 @@ import { useResizeDetector } from "react-resize-detector";
 import { useContext } from "react";
 import { Tooltip } from "antd";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -285,7 +286,7 @@ let ButtonTmpComp = (function () {
                   }
                   onClick={() =>
                     isDefault(props.type)
-                      ? props.onEvent("click")
+                      ? ComponentClickHandler({onEvent: props.onEvent})()
                       : submitForm(editorState, props.form)
                   }
                 >
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
@@ -9,7 +9,8 @@ import { withDefault } from "comps/generators";
 import styled from "styled-components";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
-import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const InputNumberWrapper = styled.div`
   .ant-input-number  {
@@ -33,7 +34,7 @@ const NumberViewWrapper = styled.div`
   gap: 4px;
 `;
 
-const NumberEventOptions = [clickEvent] as const;
+const NumberEventOptions = [clickEvent, doubleClickEvent] as const;
 
 const childrenMap = {
   text: NumberControl,
@@ -79,9 +80,7 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
   }, [props.value, props.float, props.precision]);
 
   const handleClick = useCallback(() => {
-    if (props.onEvent) {
-      props.onEvent("click");
-    }
+    props.onEvent && ComponentClickHandler({onEvent: props.onEvent})()
   }, [props.onEvent]);
 
   return (
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
@@ -17,6 +17,7 @@ import { optionsControl } from "comps/controls/optionsControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const MacaroneList = [
   '#fde68a',
@@ -116,14 +117,9 @@ const MemoizedAvatar = React.memo(({
     }
     
     // Then trigger main component event
-    onEvent("click");
+    ComponentClickHandler({onEvent})()
   }, [onEvent, onItemEvent]);
 
-  const handleDoubleClick = useCallback(() => {
-    if (!mountedRef.current) return;
-    onEvent("doubleClick");
-  }, [onEvent]);
-
   return (
     <Tooltip title={item.Tooltip} key={index}>
       <Avatar
@@ -136,7 +132,6 @@ const MemoizedAvatar = React.memo(({
         }}
         size={avatarSize}
         onClick={handleClick}
-        onDoubleClick={handleDoubleClick}
       >
         {item.label}
       </Avatar>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx
@@ -16,6 +16,7 @@ import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
 import styled from "styled-components";
 import { ButtonType } from "antd/es/button";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const StyledButton = styled(Button100)`
   display: flex;
@@ -59,24 +60,18 @@ const DropdownMenu = React.memo(({ items, options, onEvent }: { items: any[]; op
     const itemIndex = options.findIndex(option => option.label === item?.label);
     item && options[itemIndex]?.onEvent("click");
     // Also trigger the dropdown's main event handler
-    onEvent?.("click");
+    onEvent && ComponentClickHandler({onEvent})();
   }, [items, options, onEvent]);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
   }, []);
 
-  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
-    if (!mountedRef.current) return;
-    onEvent?.("doubleClick");
-  }, [onEvent]);
-
   return (
     <Menu
       items={items}
       onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
       onMouseDown={handleMouseDown}
     />
   );
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
@@ -12,6 +12,7 @@ import styled, { css } from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
 import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
@@ -40,21 +41,14 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
 export const ColumnLink = React.memo(({ disabled, label, onEvent }: { disabled: boolean; label: string; onEvent?: (eventName: string) => void }) => {
   const handleClick = useCallback(() => {
     if (!disabled && onEvent) {
-      onEvent("click");
-    }
-  }, [disabled, onEvent]);
-
-  const handleDoubleClick = useCallback(() => {
-    if (!disabled && onEvent) {
-      onEvent("doubleClick");
+      ComponentClickHandler({onEvent})();
     }
   }, [disabled, onEvent]);
 
   return (
     <StyledLink
       $disabled={disabled}
       onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
     >
       {label}
     </StyledLink>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
@@ -11,6 +11,7 @@ import styled from "styled-components";
 import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
 import { LightActiveTextColor, PrimaryColor } from "constants/style";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -73,22 +74,14 @@ const OptionItem = new MultiCompBuilder(
 const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
   const handleClick = useCallback(() => {
     if (!option.disabled) {
-      if (option.onClick) {
-        option.onClick();
-      }
-      if (option.onDoubleClick) {
-        option.onDoubleClick();
-      }
-      if (option.onEvent) {
-        option.onEvent("click");
-      }
-
-      // Trigger the main component's event handler
-      if (onMainEvent) {
-        onMainEvent("click");
-      }
+      // Handle both option's event and main event through ComponentClickHandler
+      const combinedHandler = (event: "click" | "doubleClick") => {
+        option.onEvent?.(event);
+        onMainEvent?.(event);
+      };
+      ComponentClickHandler({onEvent: combinedHandler})();
     }
-  }, [option.disabled, option.onClick, option.onEvent, onMainEvent, option.onDoubleClick]);
+  }, [option.disabled, option.onEvent, onMainEvent]);
 
   return (
     <MenuLinkWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
@@ -7,10 +7,11 @@ import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import React, { useCallback, useMemo } from "react";
 import { RecordConstructorToComp } from "lowcoder-core";
-import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { clickEvent, doubleClickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import styled from "styled-components";
+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
 
-const TextEventOptions = [clickEvent] as const;
+const TextEventOptions = [clickEvent, doubleClickEvent] as const;
 
 const TextWrapper = styled.div`
   cursor: pointer;
@@ -50,9 +51,8 @@ interface SimpleTextEditViewProps {
 
 const SimpleTextContent = React.memo(({ value, prefixIcon, suffixIcon, onEvent }: SimpleTextContentProps) => {
   const handleClick = useCallback(() => {
-    if (onEvent) {
-      onEvent("click");
-    }
+      console.log("This comp");
+     onEvent && ComponentClickHandler({onEvent})()
   }, [onEvent]);
 
   return (
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
diff --git a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx
diff --git a/client/packages/lowcoder/src/comps/utils/componentClickHandler.tsx b/client/packages/lowcoder/src/comps/utils/componentClickHandler.tsx

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ import { useResizeDetector } from "react-resize-detector";`
`41`	`41`	`import { useContext } from "react";`
`42`	`42`	`import { Tooltip } from "antd";`
`43`	`43`	`import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";`
	`44`	`+import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";`
`44`	`45`
`45`	`46`	const Container = styled.div<{ $style: any }>`
`46`	`47`	`height: 100%;`
`@@ -285,7 +286,7 @@ let ButtonTmpComp = (function () {`
`285`	`286`	`}`
`286`	`287`	`onClick={() =>`
`287`	`288`	`isDefault(props.type)`
`288`		`- ? props.onEvent("click")`
	`289`	`+ ? ComponentClickHandler({onEvent: props.onEvent})()`
`289`	`290`	`: submitForm(editorState, props.form)`
`290`	`291`	`}`
`291`	`292`	`>`