[Feat]: Add Event Handlers on more column types

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

@@ -9,6 +9,7 @@ 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";
 
 const InputNumberWrapper = styled.div`
   .ant-input-number  {
@@ -25,6 +26,15 @@ const InputNumberWrapper = styled.div`
   }
 `;
 
+const NumberViewWrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const NumberEventOptions = [clickEvent] as const;
+
 const childrenMap = {
   text: NumberControl,
   step: withDefault(NumberControl, 1),
@@ -34,6 +44,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   suffix: StringControl,
+  onEvent: eventHandlerControl(NumberEventOptions),
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (props) => props.text;
@@ -46,6 +57,7 @@ type NumberViewProps = {
   suffixIcon: ReactNode;
   float: boolean;
   precision: number;
+  onEvent?: (eventName: string) => void;
 };
 
 type NumberEditProps = {
@@ -66,16 +78,22 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
     return result;
   }, [props.value, props.float, props.precision]);
 
+  const handleClick = useCallback(() => {
+    if (props.onEvent) {
+      props.onEvent("click");
+    }
+  }, [props.onEvent]);
+
   return (
-    <>
+    <NumberViewWrapper onClick={handleClick}>
       {hasIcon(props.prefixIcon) && (
         <span>{props.prefixIcon}</span>
       )}
       <span>{props.prefix + formattedValue + props.suffix}</span>
       {hasIcon(props.suffixIcon) && (
         <span>{props.suffixIcon}</span>
       )}
-    </>
+    </NumberViewWrapper>
   );
 });
 
@@ -197,6 +215,7 @@ export const ColumnNumberComp = (function () {
               children.step.dispatchChangeValueAction(String(newValue));
             }
           })}
+          {children.onEvent.propertyView()}
         </>
       );
     })

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx

@@ -38,6 +38,8 @@ const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignme
   cursor: pointer;
 `;
 
+const AvatarEventOptions = [clickEvent, refreshEvent] as const;
+
 const DropdownOption = new MultiCompBuilder(
   {
     src: StringControl,
@@ -46,6 +48,7 @@ const DropdownOption = new MultiCompBuilder(
     color: ColorControl,
     backgroundColor: ColorControl,
     Tooltip: StringControl,
+    onEvent: eventHandlerControl(AvatarEventOptions),
   },
   (props) => props
 )
@@ -63,6 +66,7 @@ const DropdownOption = new MultiCompBuilder(
       {children.color.propertyView({ label: trans("style.fill") })}
       {children.backgroundColor.propertyView({ label: trans("style.background") })}
       {children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
+      {children.onEvent.propertyView()}
     </>
   );
 })
@@ -83,14 +87,16 @@ const MemoizedAvatar = React.memo(({
   style, 
   autoColor, 
   avatarSize, 
-  onEvent 
+  onEvent,
+  onItemEvent
 }: { 
   item: any; 
   index: number; 
   style: any; 
   autoColor: boolean; 
   avatarSize: number; 
-  onEvent: (event: string) => void; 
+  onEvent: (event: string) => void;
+  onItemEvent?: (event: string) => void;
 }) => {
   const mountedRef = useRef(true);
 
@@ -103,8 +109,15 @@ const MemoizedAvatar = React.memo(({
 
   const handleClick = useCallback(() => {
     if (!mountedRef.current) return;
+
+    // Trigger individual avatar event first
+    if (onItemEvent) {
+      onItemEvent("click");
+    }
+
+    // Then trigger main component event
     onEvent("click");
-  }, [onEvent]);
+  }, [onEvent, onItemEvent]);
 
   return (
     <Tooltip title={item.Tooltip} key={index}>
@@ -114,6 +127,7 @@ const MemoizedAvatar = React.memo(({
         style={{
           color: item.color ? item.color : (style.fill !== '#FFFFFF' ? style.fill : '#FFFFFF'),
           backgroundColor: item.backgroundColor ? item.backgroundColor : (autoColor ? MacaroneList[index % MacaroneList.length] : style.background),
+          cursor: 'pointer',
         }}
         size={avatarSize}
         onClick={handleClick}
@@ -162,6 +176,7 @@ const MemoizedAvatarGroup = React.memo(({
           autoColor={autoColor}
           avatarSize={avatarSize}
           onEvent={onEvent}
+          onItemEvent={item.onEvent}
         />
       ))}
     </Avatar.Group>

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx

@@ -10,20 +10,28 @@ import { withDefault } from "comps/generators";
 import { TacoImage } from "lowcoder-design";
 import styled from "styled-components";
 import { DEFAULT_IMG_URL } from "@lowcoder-ee/util/stringUtils";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
 const childrenMap = {
   src: withDefault(StringControl, "{{currentCell}}"),
   size: withDefault(NumberControl, "50"),
+  onEvent: eventHandlerControl([clickEvent]),
 };
 
 const StyledTacoImage = styled(TacoImage)`
-  pointer-events: auto;
+  pointer-events: auto !important;
+  cursor: pointer !important;
+
+  &:hover {
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+  }
 `;
 
 // Memoized image component
-const ImageView = React.memo(({ src, size }: { src: string; size: number }) => {
+const ImageView = React.memo(({ src, size, onEvent }: { src: string; size: number; onEvent?: (eventName: string) => void }) => {
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -33,10 +41,19 @@ const ImageView = React.memo(({ src, size }: { src: string; size: number }) => {
     };
   }, []);
 
+  const handleClick = useCallback(() => {
+    console.log("Image clicked!", { src, onEvent: !!onEvent }); // Debug log
+    if (mountedRef.current && onEvent) {
+      onEvent("click");
+    }
+  }, [onEvent, src]);
+
   return (
     <StyledTacoImage 
       src={src || DEFAULT_IMG_URL} 
       width={size}
+      onClick={handleClick}
+      style={{ cursor: 'pointer' }} // Inline style as backup
     />
   );
 });
@@ -96,7 +113,7 @@ export const ImageComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return <ImageView src={value} size={props.size} />;
+      return <ImageView src={value} size={props.size} onEvent={props.onEvent} />;
     },
     (nodeValue) => nodeValue.src.value,
     getBaseValue
@@ -118,6 +135,7 @@ export const ImageComp = (function () {
           {children.size.propertyView({
             label: trans("table.imageSize"),
           })}
+          {children.onEvent.propertyView()}
         </>
       );
     })

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

@@ -70,7 +70,7 @@ const OptionItem = new MultiCompBuilder(
   .build();
 
 // Memoized menu item component
-const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
+const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
   const handleClick = useCallback(() => {
     if (!option.disabled) {
       if (option.onClick) {
@@ -79,8 +79,12 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
       if (option.onEvent) {
         option.onEvent("click");
       }
+      // Trigger the main component's event handler
+      if (onMainEvent) {
+        onMainEvent("click");
+      }
     }
-  }, [option.disabled, option.onClick, option.onEvent]);
+  }, [option.disabled, option.onClick, option.onEvent, onMainEvent]);
 
   return (
     <MenuLinkWrapper>
@@ -96,7 +100,7 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
 MenuItem.displayName = 'MenuItem';
 
 // Memoized menu component
-const LinksMenu = React.memo(({ options }: { options: any[] }) => {
+const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => {
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -111,9 +115,9 @@ const LinksMenu = React.memo(({ options }: { options: any[] }) => {
       .filter((o) => !o.hidden)
       .map((option, index) => ({
         key: index,
-        label: <MenuItem option={option} index={index} />
+        label: <MenuItem option={option} index={index} onMainEvent={onEvent} />
       })),
-    [options]
+    [options, onEvent]
   );
 
   return (
@@ -130,11 +134,12 @@ export const ColumnLinksComp = (function () {
     options: manualOptionsControl(OptionItem, {
       initOptions: [{ label: trans("table.option1") }],
     }),
+    onEvent: eventHandlerControl(LinksEventOptions),
   };
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props) => {
-      return <LinksMenu options={props.options} />;
+      return <LinksMenu options={props.options} onEvent={props.onEvent} />;
     },
     () => ""
   )
@@ -144,6 +149,7 @@ export const ColumnLinksComp = (function () {
           newOptionLabel: trans("table.option"),
           title: trans("table.optionList"),
         })}
+        {children.onEvent.propertyView()}
       </>
     ))
     .build();

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx

@@ -9,10 +9,12 @@ import { StringControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import styled from "styled-components";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 const Wrapper = styled.div`
   ${markdownCompCss};
   max-height: 32px;
+  cursor: pointer;
 
   > .markdown-body {
     margin: 0;
@@ -22,16 +24,25 @@ const Wrapper = styled.div`
   }
 `;
 
+const MarkdownEventOptions = [clickEvent] as const;
+
 const childrenMap = {
   text: StringControl,
+  onEvent: eventHandlerControl(MarkdownEventOptions),
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
 
 // Memoized markdown view component
-const MarkdownView = React.memo(({ value }: { value: string }) => {
+const MarkdownView = React.memo(({ value, onEvent }: { value: string; onEvent?: (eventName: string) => void }) => {
+  const handleClick = useCallback(() => {
+    if (onEvent) {
+      onEvent("click");
+    }
+  }, [onEvent]);
+
   return (
-    <Wrapper>
+    <Wrapper onClick={handleClick}>
       <TacoMarkDown>{value}</TacoMarkDown>
     </Wrapper>
   );
@@ -92,7 +103,7 @@ export const ColumnMarkdownComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return <MarkdownView value={value} />;
+      return <MarkdownView value={value} onEvent={props.onEvent} />;
     },
     (nodeValue) => nodeValue.text.value,
     getBaseValue
@@ -110,6 +121,7 @@ export const ColumnMarkdownComp = (function () {
           label: trans("table.columnValue"),
           tooltip: ColumnValueTooltip,
         })}
+        {children.onEvent.propertyView()}
       </>
     ))
     .build();

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx

@@ -116,6 +116,7 @@ const SelectOptionWithEventsControl = optionsControl(SelectOptionWithEvents, {
 const childrenMap = {
   text: StringControl,
   options: SelectOptionWithEventsControl,
+  onEvent: eventHandlerControl(SelectOptionEventOptions),
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
@@ -125,6 +126,7 @@ type SelectEditProps = {
   onChange: (value: string) => void;
   onChangeEnd: () => void;
   options: any[];
+  onMainEvent?: (eventName: string) => void;
 };
 
 const SelectEdit = React.memo((props: SelectEditProps) => {
@@ -150,7 +152,12 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
     if (selectedOption && selectedOption.onEvent) {
       selectedOption.onEvent("click");
     }
-  }, [props.onChange, props.options]);
+
+    // Also trigger the main component's event handler
+    if (props.onMainEvent) {
+      props.onMainEvent("click");
+    }
+  }, [props.onChange, props.options, props.onMainEvent]);
 
   const handleEvent = useCallback(async (eventName: string) => {
     if (!mountedRef.current) return [] as unknown[];
@@ -203,6 +210,7 @@ export const ColumnSelectComp = (function () {
             options={props.otherProps?.options || []}
             onChange={props.onChange}
             onChangeEnd={props.onChangeEnd}
+            onMainEvent={props.otherProps?.onEvent}
           />
         </Wrapper>
       )
@@ -217,6 +225,7 @@ export const ColumnSelectComp = (function () {
           {children.options.propertyView({
             title: trans("optionsControl.optionList"),
           })}
+          {children.onEvent.propertyView()}
         </>
       );
     })