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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy