Merge pull request #1742 from iamfaran/feat/1585-table-events

[Feat]: #1585 Add Event Handlers for more Table Column Types

Author: FalkWolsky

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

@@ -15,6 +15,7 @@ import { ButtonStyle } from "comps/controls/styleControlConstants";
 import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
 import styled from "styled-components";
 import { ButtonType } from "antd/es/button";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 const StyledButton = styled(Button100)`
   display: flex;
@@ -28,18 +29,21 @@ const StyledIconWrapper = styled(IconWrapper)`
   margin: 0;
 `;
 
+const DropdownEventOptions = [clickEvent] as const;
+
 const childrenMap = {
   buttonType: dropdownControl(ButtonTypeOptions, "primary"),
   label: withDefault(StringControl, 'Menu'),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   options: DropdownOptionControl,
+  onEvent: eventHandlerControl(DropdownEventOptions),
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.label;
 
 // Memoized dropdown menu component
-const DropdownMenu = React.memo(({ items, options }: { items: any[]; options: any[] }) => {
+const DropdownMenu = React.memo(({ items, options, onEvent }: { items: any[]; options: any[]; onEvent?: (eventName: string) => void }) => {
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -54,7 +58,9 @@ const DropdownMenu = React.memo(({ items, options }: { items: any[]; options: an
     const item = items.find((o) => o.key === key);
     const itemIndex = options.findIndex(option => option.label === item?.label);
     item && options[itemIndex]?.onEvent("click");
-  }, [items, options]);
+    // Also trigger the dropdown's main event handler
+    onEvent?.("click");
+  }, [items, options, onEvent]);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
@@ -78,6 +84,7 @@ const DropdownView = React.memo((props: {
   prefixIcon: ReactNode;
   suffixIcon: ReactNode;
   options: any[];
+  onEvent?: (eventName: string) => void;
 }) => {
   const mountedRef = useRef(true);
 
@@ -120,8 +127,8 @@ const DropdownView = React.memo((props: {
   const buttonStyle = useStyle(ButtonStyle);
 
   const menu = useMemo(() => (
-    <DropdownMenu items={items} options={props.options} />
-  ), [items, props.options]);
+    <DropdownMenu items={items} options={props.options} onEvent={props.onEvent} />
+  ), [items, props.options, props.onEvent]);
 
   return (
     <Dropdown
@@ -183,6 +190,7 @@ export const ColumnDropdownComp = (function () {
           {children.options.propertyView({
             title: trans("optionsControl.optionList"),
           })}
+          {children.onEvent.propertyView()}
         </>
       );
     })

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

@@ -11,12 +11,15 @@ import { disabledPropertyView } from "comps/utils/propertyUtils";
 import styled, { css } from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
 import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
+const LinkEventOptions = [clickEvent] as const;
+
 const childrenMap = {
   text: StringControl,
-  onClick: ActionSelectorControlInContext,
+  onEvent: eventHandlerControl(LinkEventOptions),
   disabled: BoolCodeControl,
   style: styleControl(TableColumnLinkStyle),
 };
@@ -34,12 +37,12 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
 `;
 
 // Memoized link component
-export const ColumnLink = React.memo(({ disabled, label, onClick }: { disabled: boolean; label: string; onClick?: () => void }) => {
+export const ColumnLink = React.memo(({ disabled, label, onEvent }: { disabled: boolean; label: string; onEvent?: (eventName: string) => void }) => {
   const handleClick = useCallback(() => {
-    if (!disabled && onClick) {
-      onClick();
+    if (!disabled && onEvent) {
+      onEvent("click");
     }
-  }, [disabled, onClick]);
+  }, [disabled, onEvent]);
 
   return (
     <StyledLink
@@ -106,7 +109,7 @@ export const LinkComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} />;
+      return <ColumnLink disabled={props.disabled} label={value} onEvent={props.onEvent} />;
     },
     (nodeValue) => nodeValue.text.value,
     getBaseValue
@@ -125,10 +128,7 @@ export const LinkComp = (function () {
           tooltip: ColumnValueTooltip,
         })}
         {disabledPropertyView(children)}
-        {children.onClick.propertyView({
-          label: trans("table.action"),
-          placement: "table",
-        })}
+        {children.onEvent.propertyView()}
       </>
     ))
     .setStylePropertyViewFn((children) => (

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

@@ -10,6 +10,7 @@ import { trans } from "i18n";
 import styled from "styled-components";
 import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
 import { LightActiveTextColor, PrimaryColor } from "constants/style";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -37,33 +38,16 @@ const MenuWrapper = styled.div`
   }  
 `;
 
-// Memoized menu item component
-const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
-  const handleClick = useCallback(() => {
-    if (!option.disabled && option.onClick) {
-      option.onClick();
-    }
-  }, [option.disabled, option.onClick]);
-
-  return (
-    <MenuLinkWrapper>
-      <ColumnLink
-        disabled={option.disabled}
-        label={option.label}
-        onClick={handleClick}
-      />
-    </MenuLinkWrapper>
-  );
-});
-
-MenuItem.displayName = 'MenuItem';
+const LinksEventOptions = [clickEvent] as const;
 
+// Update OptionItem to include event handlers
 const OptionItem = new MultiCompBuilder(
   {
     label: StringControl,
     onClick: ActionSelectorControlInContext,
     hidden: BoolCodeControl,
     disabled: BoolCodeControl,
+    onEvent: eventHandlerControl(LinksEventOptions),
   },
   (props) => {
     return props;
@@ -79,11 +63,38 @@ const OptionItem = new MultiCompBuilder(
         })}
         {hiddenPropertyView(children)}
         {disabledPropertyView(children)}
+        {children.onEvent.propertyView()}
       </>
     );
   })
   .build();
 
+// Memoized menu item component
+const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
+  const handleClick = useCallback(() => {
+    if (!option.disabled) {
+      if (option.onClick) {
+        option.onClick();
+      }
+      if (option.onEvent) {
+        option.onEvent("click");
+      }
+    }
+  }, [option.disabled, option.onClick, option.onEvent]);
+
+  return (
+    <MenuLinkWrapper>
+      <ColumnLink
+        disabled={option.disabled}
+        label={option.label}
+        onEvent={handleClick}
+      />
+    </MenuLinkWrapper>
+  );
+});
+
+MenuItem.displayName = 'MenuItem';
+
 // Memoized menu component
 const LinksMenu = React.memo(({ options }: { options: any[] }) => {
   const mountedRef = useRef(true);

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

@@ -1,13 +1,17 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 
 import { SelectUIView } from "comps/comps/selectInputComp/selectCompConstants";
-import { SelectOptionControl } from "comps/controls/optionsControl";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, BoolCodeControl } from "comps/controls/codeControl";
+import { IconControl } from "comps/controls/iconControl";
+import { MultiCompBuilder } from "comps/generators";
+import { optionsControl } from "comps/controls/optionsControl";
+import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { styled } from "styled-components";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 const Wrapper = styled.div`
   display: inline-flex;
@@ -75,9 +79,43 @@ const Wrapper = styled.div`
   }
 `;
 
+const SelectOptionEventOptions = [clickEvent] as const;
+
+// Create a new option type with event handlers for each option
+const SelectOptionWithEvents = new MultiCompBuilder(
+  {
+    value: StringControl,
+    label: StringControl,
+    prefixIcon: IconControl,
+    disabled: BoolCodeControl,
+    hidden: BoolCodeControl,
+    onEvent: eventHandlerControl(SelectOptionEventOptions),
+  },
+  (props) => props
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.label.propertyView({ label: trans("label") })}
+      {children.value.propertyView({ label: trans("value") })}
+      {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+      {disabledPropertyView(children)}
+      {hiddenPropertyView(children)}
+      {children.onEvent.propertyView()}
+    </>
+  ))
+  .build();
+
+const SelectOptionWithEventsControl = optionsControl(SelectOptionWithEvents, {
+  initOptions: [
+    { label: trans("optionsControl.optionI", { i: 1 }), value: "1" },
+    { label: trans("optionsControl.optionI", { i: 2 }), value: "2" },
+  ],
+  uniqField: "value",
+});
+
 const childrenMap = {
   text: StringControl,
-  options: SelectOptionControl,
+  options: SelectOptionWithEventsControl,
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
@@ -106,7 +144,13 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
     if (!mountedRef.current) return;
     props.onChange(val);
     setCurrentValue(val);
-  }, [props.onChange]);
+    
+    // Trigger the specific option's event handler
+    const selectedOption = props.options.find(option => option.value === val);
+    if (selectedOption && selectedOption.onEvent) {
+      selectedOption.onEvent("click");
+    }
+  }, [props.onChange, props.options]);
 
   const handleEvent = useCallback(async (eventName: string) => {
     if (!mountedRef.current) return [] as unknown[];

client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx

@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo } from "react";
 import { CSSProperties } from "react";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
@@ -31,10 +32,12 @@ export const ButtonTypeOptions = [
   },
 ] as const;
 
+const ButtonEventOptions = [clickEvent] as const;
+
 const childrenMap = {
   text: StringControl,
   buttonType: dropdownControl(ButtonTypeOptions, "primary"),
-  onClick: ActionSelectorControlInContext,
+  onEvent: eventHandlerControl(ButtonEventOptions),
   loading: BoolCodeControl,
   disabled: BoolCodeControl,
   prefixIcon: IconControl,
@@ -49,8 +52,8 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
   const iconOnly = !hasText && (hasPrefixIcon || hasSuffixIcon);
 
   const handleClick = useCallback((e: React.MouseEvent) => {
-    props.onClick?.();
-  }, [props.onClick]);
+    props.onEvent("click");
+  }, [props.onEvent]);
 
   const buttonStyle = useMemo(() => ({
     margin: 0,
@@ -100,10 +103,7 @@ export const ButtonComp = (function () {
         })}
         {loadingPropertyView(children)}
         {disabledPropertyView(children)}
-        {children.onClick.propertyView({
-          label: trans("table.action"),
-          placement: "table",
-        })}
+        {children.onEvent.propertyView()}
       </>
     ))
     .build();