Skip to content

Commit a87e00b

Browse files
iamfaraniamfaran
committed
[Fix]: Add backward compatibility for button, link and links
1 parent 2798f3f commit a87e00b

File tree

3 files changed

+110
-78
lines changed

3 files changed

+110
-78
lines changed

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

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,15 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
3737
${(props) => props.$disabled && disableCss};
3838
`;
3939

40-
// Memoized link component
40+
// Updated link component to handle both legacy and new event handlers
4141
export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => {
4242
const handleClick = useCallback(() => {
43-
if (disabled) return;
44-
onClick?.();
45-
// onEvent?.("click");
43+
if (!disabled) {
44+
// Trigger legacy onClick action for backward compatibility
45+
onClick?.();
46+
// Trigger new event handlers
47+
onEvent?.("click");
48+
}
4649
}, [disabled, onClick, onEvent]);
4750

4851
return (
@@ -110,7 +113,7 @@ export const LinkComp = (function () {
110113
childrenMap,
111114
(props, dispatch) => {
112115
const value = props.changeValue ?? getBaseValue(props, dispatch);
113-
return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} />;
116+
return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} onEvent={props.onEvent} />;
114117
},
115118
(nodeValue) => nodeValue.text.value,
116119
getBaseValue
@@ -122,20 +125,27 @@ export const LinkComp = (function () {
122125
onChangeEnd={props.onChangeEnd}
123126
/>
124127
))
125-
.setPropertyViewFn((children) => (
126-
<>
127-
{children.text.propertyView({
128-
label: trans("table.columnValue"),
129-
tooltip: ColumnValueTooltip,
130-
})}
131-
{disabledPropertyView(children)}
132-
{/* {children.onEvent.propertyView()} */}
133-
{children.onClick.propertyView({
134-
label: trans("table.action"),
135-
placement: "table",
136-
})}
137-
</>
138-
))
128+
.setPropertyViewFn((children) => {
129+
// Check if there's a legacy action configured
130+
const hasLegacyAction = children.onClick.getView() &&
131+
typeof children.onClick.getView() === 'function' &&
132+
children.onClick.displayName() !== trans("eventHandler.incomplete");
133+
134+
return (
135+
<>
136+
{children.text.propertyView({
137+
label: trans("table.columnValue"),
138+
tooltip: ColumnValueTooltip,
139+
})}
140+
{disabledPropertyView(children)}
141+
{children.onEvent.propertyView()}
142+
{hasLegacyAction && children.onClick.propertyView({
143+
label: trans("table.action"),
144+
placement: "table",
145+
})}
146+
</>
147+
);
148+
})
139149
.setStylePropertyViewFn((children) => (
140150
<>
141151
{children.style.getPropertyView()}

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

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -40,65 +40,72 @@ const MenuWrapper = styled.div`
4040

4141
const LinksEventOptions = [clickEvent] as const;
4242

43+
// Memoized menu item component
44+
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
45+
const handleClick = useCallback(() => {
46+
if (!option.disabled) {
47+
// Trigger legacy onClick action for backward compatibility
48+
if (option.onClick) {
49+
option.onClick();
50+
}
51+
// Trigger individual item event handlers
52+
if (option.onEvent) {
53+
option.onEvent("click");
54+
}
55+
// Trigger the main column's event handler
56+
if (onMainEvent) {
57+
onMainEvent("click");
58+
}
59+
}
60+
}, [option.disabled, option.onClick, option.onEvent, onMainEvent]);
61+
62+
return (
63+
<MenuLinkWrapper>
64+
<ColumnLink
65+
disabled={option.disabled}
66+
label={option.label}
67+
onClick={handleClick}
68+
/>
69+
</MenuLinkWrapper>
70+
);
71+
});
72+
73+
MenuItem.displayName = 'MenuItem';
74+
4375
// Update OptionItem to include event handlers
4476
const OptionItem = new MultiCompBuilder(
4577
{
4678
label: StringControl,
4779
onClick: ActionSelectorControlInContext,
80+
onEvent: eventHandlerControl(LinksEventOptions),
4881
hidden: BoolCodeControl,
4982
disabled: BoolCodeControl,
50-
onEvent: eventHandlerControl(LinksEventOptions),
5183
},
5284
(props) => {
5385
return props;
5486
}
5587
)
5688
.setPropertyViewFn((children) => {
89+
// Check if there's a legacy action configured for this individual item
90+
const hasLegacyAction = children.onClick.getView() &&
91+
typeof children.onClick.getView() === 'function' &&
92+
children.onClick.displayName() !== trans("eventHandler.incomplete");
93+
5794
return (
5895
<>
5996
{children.label.propertyView({ label: trans("label") })}
60-
{children.onClick.propertyView({
97+
{hasLegacyAction && children.onClick.propertyView({
6198
label: trans("table.action"),
6299
placement: "table",
63100
})}
64101
{hiddenPropertyView(children)}
65102
{disabledPropertyView(children)}
66-
{/* {children.onEvent.propertyView()} */}
103+
{children.onEvent.propertyView()}
67104
</>
68105
);
69106
})
70107
.build();
71108

72-
// Memoized menu item component
73-
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
74-
const handleClick = useCallback(() => {
75-
if (!option.disabled) {
76-
if (option.onClick) {
77-
option.onClick();
78-
}
79-
// if (option.onEvent) {
80-
// option.onEvent("click");
81-
// }
82-
// Trigger the main component's event handler
83-
if (onMainEvent) {
84-
onMainEvent("click");
85-
}
86-
}
87-
}, [option.disabled, option.onClick, option.onEvent, onMainEvent]);
88-
89-
return (
90-
<MenuLinkWrapper>
91-
<ColumnLink
92-
disabled={option.disabled}
93-
label={option.label}
94-
onEvent={handleClick}
95-
/>
96-
</MenuLinkWrapper>
97-
);
98-
});
99-
100-
MenuItem.displayName = 'MenuItem';
101-
102109
// Memoized menu component
103110
const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => {
104111
const mountedRef = useRef(true);
@@ -134,7 +141,7 @@ export const ColumnLinksComp = (function () {
134141
options: manualOptionsControl(OptionItem, {
135142
initOptions: [{ label: trans("table.option1") }],
136143
}),
137-
onEvent: eventHandlerControl(LinksEventOptions),
144+
onEvent: eventHandlerControl(LinksEventOptions), // Main column level event handlers
138145
};
139146
return new ColumnTypeCompBuilder(
140147
childrenMap,

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

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo } from "react";
1313
import { CSSProperties } from "react";
1414
import { RecordConstructorToComp } from "lowcoder-core";
1515
import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
16+
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
1617

1718
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1819

@@ -31,10 +32,13 @@ export const ButtonTypeOptions = [
3132
},
3233
] as const;
3334

35+
const ButtonEventOptions = [clickEvent] as const;
36+
3437
const childrenMap = {
3538
text: StringControl,
3639
buttonType: dropdownControl(ButtonTypeOptions, "primary"),
3740
onClick: ActionSelectorControlInContext,
41+
onEvent: eventHandlerControl(ButtonEventOptions),
3842
loading: BoolCodeControl,
3943
disabled: BoolCodeControl,
4044
prefixIcon: IconControl,
@@ -49,8 +53,11 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
4953
const iconOnly = !hasText && (hasPrefixIcon || hasSuffixIcon);
5054

5155
const handleClick = useCallback((e: React.MouseEvent) => {
56+
// Trigger legacy onClick action for backward compatibility
5257
props.onClick?.();
53-
}, [props.onClick]);
58+
// Trigger new event handlers
59+
props.onEvent?.("click");
60+
}, [props.onClick, props.onEvent]);
5461

5562
const buttonStyle = useMemo(() => ({
5663
margin: 0,
@@ -82,29 +89,37 @@ export const ButtonComp = (function () {
8289
(props) => <ButtonStyled props={props} />,
8390
(nodeValue) => nodeValue.text.value
8491
)
85-
.setPropertyViewFn((children) => (
86-
<>
87-
{children.text.propertyView({
88-
label: trans("table.columnValue"),
89-
tooltip: ColumnValueTooltip,
90-
})}
91-
{children.prefixIcon.propertyView({
92-
label: trans("button.prefixIcon"),
93-
})}
94-
{children.suffixIcon.propertyView({
95-
label: trans("button.suffixIcon"),
96-
})}
97-
{children.buttonType.propertyView({
98-
label: trans("table.type"),
99-
radioButton: true,
100-
})}
101-
{loadingPropertyView(children)}
102-
{disabledPropertyView(children)}
103-
{children.onClick.propertyView({
104-
label: trans("table.action"),
105-
placement: "table",
106-
})}
107-
</>
108-
))
92+
.setPropertyViewFn((children) => {
93+
// Check if there's a legacy action configured
94+
const hasLegacyAction = children.onClick.getView() &&
95+
typeof children.onClick.getView() === 'function' &&
96+
children.onClick.displayName() !== trans("eventHandler.incomplete");
97+
98+
return (
99+
<>
100+
{children.text.propertyView({
101+
label: trans("table.columnValue"),
102+
tooltip: ColumnValueTooltip,
103+
})}
104+
{children.prefixIcon.propertyView({
105+
label: trans("button.prefixIcon"),
106+
})}
107+
{children.suffixIcon.propertyView({
108+
label: trans("button.suffixIcon"),
109+
})}
110+
{children.buttonType.propertyView({
111+
label: trans("table.type"),
112+
radioButton: true,
113+
})}
114+
{loadingPropertyView(children)}
115+
{disabledPropertyView(children)}
116+
{children.onEvent.propertyView()}
117+
{hasLegacyAction && children.onClick.propertyView({
118+
label: trans("table.action"),
119+
placement: "table",
120+
})}
121+
</>
122+
);
123+
})
109124
.build();
110125
})();

0 commit comments

Comments
 (0)