Content-Length: 34692 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1769.patch

thub.com From 2798f3f866105bb1cce5535574dcbfe418c097d4 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 13 Jun 2025 18:42:56 +0500 Subject: [PATCH 1/7] revert back --- .../comps/tableComp/column/simpleColumnTypeComps.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index a7c79032a..3d5096cc8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx @@ -13,7 +13,6 @@ 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"); @@ -32,12 +31,9 @@ export const ButtonTypeOptions = [ }, ] as const; -const ButtonEventOptions = [clickEvent] as const; - const childrenMap = { text: StringControl, buttonType: dropdownControl(ButtonTypeOptions, "primary"), - onEvent: eventHandlerControl(ButtonEventOptions), onClick: ActionSelectorControlInContext, loading: BoolCodeControl, disabled: BoolCodeControl, @@ -54,8 +50,7 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn { props.onClick?.(); - // props.onEvent?.("click"); - }, [props.onClick, props.onEvent]); + }, [props.onClick]); const buttonStyle = useMemo(() => ({ margin: 0, @@ -105,7 +100,6 @@ export const ButtonComp = (function () { })} {loadingPropertyView(children)} {disabledPropertyView(children)} - {/* {children.onEvent.propertyView()} */} {children.onClick.propertyView({ label: trans("table.action"), placement: "table", From a87e00b781154cb486bdcec4619ec8af8d036adc Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 13 Jun 2025 21:49:42 +0500 Subject: [PATCH 2/7] [Fix]: Add backward compatibility for button, link and links --- .../column/columnTypeComps/columnLinkComp.tsx | 48 +++++++----- .../columnTypeComps/columnLinksComp.tsx | 75 ++++++++++--------- .../column/simpleColumnTypeComps.tsx | 65 +++++++++------- 3 files changed, 110 insertions(+), 78 deletions(-) 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 index b9c150c66..3ad4bf275 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -37,12 +37,15 @@ const StyledLink = styled.a<{ $disabled: boolean }>` ${(props) => props.$disabled && disableCss}; `; -// Memoized link component +// Updated link component to handle both legacy and new event handlers export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => { const handleClick = useCallback(() => { - if (disabled) return; - onClick?.(); - // onEvent?.("click"); + if (!disabled) { + // Trigger legacy onClick action for backward compatibility + onClick?.(); + // Trigger new event handlers + onEvent?.("click"); + } }, [disabled, onClick, onEvent]); return ( @@ -110,7 +113,7 @@ export const LinkComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ; }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -122,20 +125,27 @@ export const LinkComp = (function () { onChangeEnd={props.onChangeEnd} /> )) - .setPropertyViewFn((children) => ( - <> - {children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, - })} - {disabledPropertyView(children)} - {/* {children.onEvent.propertyView()} */} - {children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} - - )) + .setPropertyViewFn((children) => { + // Check if there's a legacy action configured + const hasLegacyAction = children.onClick.getView() && + typeof children.onClick.getView() === 'function' && + children.onClick.displayName() !== trans("eventHandler.incomplete"); + + return ( + <> + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {disabledPropertyView(children)} + {children.onEvent.propertyView()} + {hasLegacyAction && children.onClick.propertyView({ + label: trans("table.action"), + placement: "table", + })} + + ); + }) .setStylePropertyViewFn((children) => ( <> {children.style.getPropertyView()} 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 index 7b574eda1..641c9adf9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx @@ -40,65 +40,72 @@ const MenuWrapper = styled.div` const LinksEventOptions = [clickEvent] as const; +// Memoized menu item component +const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => { + const handleClick = useCallback(() => { + if (!option.disabled) { + // Trigger legacy onClick action for backward compatibility + if (option.onClick) { + option.onClick(); + } + // Trigger individual item event handlers + if (option.onEvent) { + option.onEvent("click"); + } + // Trigger the main column's event handler + if (onMainEvent) { + onMainEvent("click"); + } + } + }, [option.disabled, option.onClick, option.onEvent, onMainEvent]); + + return ( + + + + ); +}); + +MenuItem.displayName = 'MenuItem'; + // Update OptionItem to include event handlers const OptionItem = new MultiCompBuilder( { label: StringControl, onClick: ActionSelectorControlInContext, + onEvent: eventHandlerControl(LinksEventOptions), hidden: BoolCodeControl, disabled: BoolCodeControl, - onEvent: eventHandlerControl(LinksEventOptions), }, (props) => { return props; } ) .setPropertyViewFn((children) => { + // Check if there's a legacy action configured for this individual item + const hasLegacyAction = children.onClick.getView() && + typeof children.onClick.getView() === 'function' && + children.onClick.displayName() !== trans("eventHandler.incomplete"); + return ( <> {children.label.propertyView({ label: trans("label") })} - {children.onClick.propertyView({ + {hasLegacyAction && children.onClick.propertyView({ label: trans("table.action"), placement: "table", })} {hiddenPropertyView(children)} {disabledPropertyView(children)} - {/* {children.onEvent.propertyView()} */} + {children.onEvent.propertyView()} ); }) .build(); -// Memoized menu item component -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.onEvent) { - // option.onEvent("click"); - // } - // Trigger the main component's event handler - if (onMainEvent) { - onMainEvent("click"); - } - } - }, [option.disabled, option.onClick, option.onEvent, onMainEvent]); - - return ( - - - - ); -}); - -MenuItem.displayName = 'MenuItem'; - // Memoized menu component const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => { const mountedRef = useRef(true); @@ -134,7 +141,7 @@ export const ColumnLinksComp = (function () { options: manualOptionsControl(OptionItem, { initOptions: [{ label: trans("table.option1") }], }), - onEvent: eventHandlerControl(LinksEventOptions), + onEvent: eventHandlerControl(LinksEventOptions), // Main column level event handlers }; return new ColumnTypeCompBuilder( childrenMap, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index 3d5096cc8..924f1ae0c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/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,13 @@ 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 +53,11 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn { + // Trigger legacy onClick action for backward compatibility props.onClick?.(); - }, [props.onClick]); + // Trigger new event handlers + props.onEvent?.("click"); + }, [props.onClick, props.onEvent]); const buttonStyle = useMemo(() => ({ margin: 0, @@ -82,29 +89,37 @@ export const ButtonComp = (function () { (props) => , (nodeValue) => nodeValue.text.value ) - .setPropertyViewFn((children) => ( - <> - {children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, - })} - {children.prefixIcon.propertyView({ - label: trans("button.prefixIcon"), - })} - {children.suffixIcon.propertyView({ - label: trans("button.suffixIcon"), - })} - {children.buttonType.propertyView({ - label: trans("table.type"), - radioButton: true, - })} - {loadingPropertyView(children)} - {disabledPropertyView(children)} - {children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} - - )) + .setPropertyViewFn((children) => { + // Check if there's a legacy action configured + const hasLegacyAction = children.onClick.getView() && + typeof children.onClick.getView() === 'function' && + children.onClick.displayName() !== trans("eventHandler.incomplete"); + + return ( + <> + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {children.prefixIcon.propertyView({ + label: trans("button.prefixIcon"), + })} + {children.suffixIcon.propertyView({ + label: trans("button.suffixIcon"), + })} + {children.buttonType.propertyView({ + label: trans("table.type"), + radioButton: true, + })} + {loadingPropertyView(children)} + {disabledPropertyView(children)} + {children.onEvent.propertyView()} + {hasLegacyAction && children.onClick.propertyView({ + label: trans("table.action"), + placement: "table", + })} + + ); + }) .build(); })(); From e36129922ffd92c29642b8037999f6e5776a5da4 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Sat, 14 Jun 2025 00:01:11 +0500 Subject: [PATCH 3/7] fix simple column type (btn) --- .../column/simpleColumnTypeComps.tsx | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index 924f1ae0c..0abadf38f 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx @@ -14,7 +14,21 @@ import { CSSProperties } from "react"; import { RecordConstructorToComp } from "lowcoder-core"; import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi"; import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +export const fixOldActionData = (oldData: any) => { + if (!oldData) return oldData; + if (Boolean(oldData.onClick)) { + return { + ...oldData, + onClick: [{ + name: "click", + handler: oldData.onClick, + }], + }; + } + return oldData; +} export const ColumnValueTooltip = trans("table.columnValueTooltip"); export const ButtonTypeOptions = [ @@ -37,8 +51,7 @@ const ButtonEventOptions = [clickEvent] as const; const childrenMap = { text: StringControl, buttonType: dropdownControl(ButtonTypeOptions, "primary"), - onClick: ActionSelectorControlInContext, - onEvent: eventHandlerControl(ButtonEventOptions), + onClick: eventHandlerControl(ButtonEventOptions), loading: BoolCodeControl, disabled: BoolCodeControl, prefixIcon: IconControl, @@ -53,11 +66,8 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn { - // Trigger legacy onClick action for backward compatibility - props.onClick?.(); - // Trigger new event handlers - props.onEvent?.("click"); - }, [props.onClick, props.onEvent]); + props.onClick?.("click"); + }, [props.onClick]); const buttonStyle = useMemo(() => ({ margin: 0, @@ -83,43 +93,34 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn , (nodeValue) => nodeValue.text.value ) - .setPropertyViewFn((children) => { - // Check if there's a legacy action configured - const hasLegacyAction = children.onClick.getView() && - typeof children.onClick.getView() === 'function' && - children.onClick.displayName() !== trans("eventHandler.incomplete"); - - return ( - <> - {children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, - })} - {children.prefixIcon.propertyView({ - label: trans("button.prefixIcon"), - })} - {children.suffixIcon.propertyView({ - label: trans("button.suffixIcon"), - })} - {children.buttonType.propertyView({ - label: trans("table.type"), - radioButton: true, - })} - {loadingPropertyView(children)} - {disabledPropertyView(children)} - {children.onEvent.propertyView()} - {hasLegacyAction && children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} - - ); - }) + .setPropertyViewFn((children) => ( + <> + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {children.prefixIcon.propertyView({ + label: trans("button.prefixIcon"), + })} + {children.suffixIcon.propertyView({ + label: trans("button.suffixIcon"), + })} + {children.buttonType.propertyView({ + label: trans("table.type"), + radioButton: true, + })} + {loadingPropertyView(children)} + {disabledPropertyView(children)} + {children.onClick.propertyView()} + + )) .build(); })(); + +export const ButtonComp = migrateOldData(ButtonCompTmp, fixOldActionData); From 4a2f13bf5284be95129807d64df719fe3f00e5eb Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Sat, 14 Jun 2025 00:02:25 +0500 Subject: [PATCH 4/7] revert link column type --- .../column/columnTypeComps/columnLinkComp.tsx | 53 +++++++------------ 1 file changed, 19 insertions(+), 34 deletions(-) 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 index 3ad4bf275..c82b7326a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -11,16 +11,12 @@ 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), }; @@ -37,16 +33,13 @@ const StyledLink = styled.a<{ $disabled: boolean }>` ${(props) => props.$disabled && disableCss}; `; -// Updated link component to handle both legacy and new event handlers -export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => { +// Memoized link component +export const ColumnLink = React.memo(({ disabled, label, onClick }: { disabled: boolean; label: string; onClick?: () => void }) => { const handleClick = useCallback(() => { - if (!disabled) { - // Trigger legacy onClick action for backward compatibility - onClick?.(); - // Trigger new event handlers - onEvent?.("click"); + if (!disabled && onClick) { + onClick(); } - }, [disabled, onClick, onEvent]); + }, [disabled, onClick]); return ( { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ; }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -125,27 +118,19 @@ export const LinkComp = (function () { onChangeEnd={props.onChangeEnd} /> )) - .setPropertyViewFn((children) => { - // Check if there's a legacy action configured - const hasLegacyAction = children.onClick.getView() && - typeof children.onClick.getView() === 'function' && - children.onClick.displayName() !== trans("eventHandler.incomplete"); - - return ( - <> - {children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, - })} - {disabledPropertyView(children)} - {children.onEvent.propertyView()} - {hasLegacyAction && children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} - - ); - }) + .setPropertyViewFn((children) => ( + <> + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {disabledPropertyView(children)} + {children.onClick.propertyView({ + label: trans("table.action"), + placement: "table", + })} + + )) .setStylePropertyViewFn((children) => ( <> {children.style.getPropertyView()} From 28d37435ce51b095493c98c73828d864017bde6a Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Sat, 14 Jun 2025 00:08:53 +0500 Subject: [PATCH 5/7] add backward compatibility for link type --- .../column/columnTypeComps/columnLinkComp.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) 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 index c82b7326a..a82a760e7 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -4,19 +4,23 @@ import { ColumnTypeCompBuilder, ColumnTypeViewFn, } from "comps/comps/tableComp/column/columnTypeCompBuilder"; -import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; 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"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); +const LinkEventOptions = [clickEvent] as const; + const childrenMap = { text: StringControl, - onClick: ActionSelectorControlInContext, + onClick: eventHandlerControl(LinkEventOptions), disabled: BoolCodeControl, style: styleControl(TableColumnLinkStyle), }; @@ -34,11 +38,10 @@ 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, onClick }: { disabled: boolean; label: string; onClick?: (eventName: string) => void }) => { const handleClick = useCallback(() => { - if (!disabled && onClick) { - onClick(); - } + if (disabled) return; + onClick?.("click"); }, [disabled, onClick]); return ( @@ -101,7 +104,7 @@ LinkEdit.displayName = 'LinkEdit'; const getBaseValue: ColumnTypeViewFn = (props) => props.text; -export const LinkComp = (function () { +const LinkCompTmp = (function () { return new ColumnTypeCompBuilder( childrenMap, (props, dispatch) => { @@ -125,10 +128,7 @@ export const LinkComp = (function () { tooltip: ColumnValueTooltip, })} {disabledPropertyView(children)} - {children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} + {children.onClick.propertyView()} )) .setStylePropertyViewFn((children) => ( @@ -138,3 +138,5 @@ export const LinkComp = (function () { )) .build(); })(); + +export const LinkComp = migrateOldData(LinkCompTmp, fixOldActionData); From 304c2c24573b877b3b5ed64e714546d871e4f3e3 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Sat, 14 Jun 2025 00:09:52 +0500 Subject: [PATCH 6/7] revert links type --- .../columnTypeComps/columnLinksComp.tsx | 42 ++++--------------- 1 file changed, 9 insertions(+), 33 deletions(-) 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 index 641c9adf9..4ecd308dd 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx @@ -10,7 +10,6 @@ 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 { @@ -38,26 +37,13 @@ const MenuWrapper = styled.div` } `; -const LinksEventOptions = [clickEvent] as const; - // Memoized menu item component -const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => { +const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => { const handleClick = useCallback(() => { - if (!option.disabled) { - // Trigger legacy onClick action for backward compatibility - if (option.onClick) { - option.onClick(); - } - // Trigger individual item event handlers - if (option.onEvent) { - option.onEvent("click"); - } - // Trigger the main column's event handler - if (onMainEvent) { - onMainEvent("click"); - } + if (!option.disabled && option.onClick) { + option.onClick(); } - }, [option.disabled, option.onClick, option.onEvent, onMainEvent]); + }, [option.disabled, option.onClick]); return ( @@ -72,12 +58,10 @@ const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; inde MenuItem.displayName = 'MenuItem'; -// Update OptionItem to include event handlers const OptionItem = new MultiCompBuilder( { label: StringControl, onClick: ActionSelectorControlInContext, - onEvent: eventHandlerControl(LinksEventOptions), hidden: BoolCodeControl, disabled: BoolCodeControl, }, @@ -86,28 +70,22 @@ const OptionItem = new MultiCompBuilder( } ) .setPropertyViewFn((children) => { - // Check if there's a legacy action configured for this individual item - const hasLegacyAction = children.onClick.getView() && - typeof children.onClick.getView() === 'function' && - children.onClick.displayName() !== trans("eventHandler.incomplete"); - return ( <> {children.label.propertyView({ label: trans("label") })} - {hasLegacyAction && children.onClick.propertyView({ + {children.onClick.propertyView({ label: trans("table.action"), placement: "table", })} {hiddenPropertyView(children)} {disabledPropertyView(children)} - {children.onEvent.propertyView()} ); }) .build(); // Memoized menu component -const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => { +const LinksMenu = React.memo(({ options }: { options: any[] }) => { const mountedRef = useRef(true); // Cleanup on unmount @@ -122,9 +100,9 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: .filter((o) => !o.hidden) .map((option, index) => ({ key: index, - label: + label: })), - [options, onEvent] + [options] ); return ( @@ -141,12 +119,11 @@ export const ColumnLinksComp = (function () { options: manualOptionsControl(OptionItem, { initOptions: [{ label: trans("table.option1") }], }), - onEvent: eventHandlerControl(LinksEventOptions), // Main column level event handlers }; return new ColumnTypeCompBuilder( childrenMap, (props) => { - return ; + return ; }, () => "" ) @@ -156,7 +133,6 @@ export const ColumnLinksComp = (function () { newOptionLabel: trans("table.option"), title: trans("table.optionList"), })} - {children.onEvent.propertyView()} )) .build(); From 62285ce59bb8a9df18f25e70d19106c4b375ff02 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Sat, 14 Jun 2025 00:14:39 +0500 Subject: [PATCH 7/7] add backward compatibility for links type --- .../columnTypeComps/columnLinksComp.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) 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 index 4ecd308dd..e707eab43 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx @@ -1,7 +1,6 @@ import React, { useState, useRef, useEffect, useCallback, useMemo } from "react"; import { default as Menu } from "antd/es/menu"; import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder"; -import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { manualOptionsControl } from "comps/controls/optionsControl"; import { MultiCompBuilder } from "comps/generators"; @@ -10,6 +9,9 @@ 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"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps"; const MenuLinkWrapper = styled.div` > a { @@ -37,11 +39,13 @@ const MenuWrapper = styled.div` } `; +const LinkEventOptions = [clickEvent] as const; + // 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.onClick("click"); } }, [option.disabled, option.onClick]); @@ -58,10 +62,10 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number }) MenuItem.displayName = 'MenuItem'; -const OptionItem = new MultiCompBuilder( +const OptionItemTmp = new MultiCompBuilder( { label: StringControl, - onClick: ActionSelectorControlInContext, + onClick: eventHandlerControl(LinkEventOptions), hidden: BoolCodeControl, disabled: BoolCodeControl, }, @@ -73,17 +77,16 @@ const OptionItem = new MultiCompBuilder( return ( <> {children.label.propertyView({ label: trans("label") })} - {children.onClick.propertyView({ - label: trans("table.action"), - placement: "table", - })} {hiddenPropertyView(children)} {disabledPropertyView(children)} + {children.onClick.propertyView()} ); }) .build(); +const OptionItem = migrateOldData(OptionItemTmp, fixOldActionData); + // Memoized menu component const LinksMenu = React.memo(({ options }: { options: any[] }) => { const mountedRef = useRef(true); @@ -114,7 +117,7 @@ const LinksMenu = React.memo(({ options }: { options: any[] }) => { LinksMenu.displayName = 'LinksMenu'; -export const ColumnLinksComp = (function () { +const ColumnLinksCompTmp = (function () { const childrenMap = { options: manualOptionsControl(OptionItem, { initOptions: [{ label: trans("table.option1") }], @@ -137,3 +140,5 @@ export const ColumnLinksComp = (function () { )) .build(); })(); + +export const ColumnLinksComp = migrateOldData(ColumnLinksCompTmp, fixOldActionData);

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!