Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commita87e00b

Browse files
committed
[Fix]: Add backward compatibility for button, link and links
1 parent2798f3f commita87e00b

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
exportconstColumnLink=React.memo(({ disabled, label, onClick, onEvent}:{disabled:boolean;label:string;onClick?:()=>void;onEvent?:(eventName:string)=>void})=>{
4242
consthandleClick=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
constvalue=props.changeValue??getBaseValue(props,dispatch);
113-
return<ColumnLinkdisabled={props.disabled}label={value}onClick={props.onClick}/>;
116+
return<ColumnLinkdisabled={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+
consthasLegacyAction=children.onClick.getView()&&
131+
typeofchildren.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
constLinksEventOptions=[clickEvent]asconst;
4242

43+
// Memoized menu item component
44+
constMenuItem=React.memo(({ option, index, onMainEvent}:{option:any;index:number;onMainEvent?:(eventName:string)=>void})=>{
45+
consthandleClick=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
constOptionItem=newMultiCompBuilder(
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
returnprops;
5486
}
5587
)
5688
.setPropertyViewFn((children)=>{
89+
// Check if there's a legacy action configured for this individual item
90+
consthasLegacyAction=children.onClick.getView()&&
91+
typeofchildren.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-
constMenuItem=React.memo(({ option, index, onMainEvent}:{option:any;index:number;onMainEvent?:(eventName:string)=>void})=>{
74-
consthandleClick=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
constLinksMenu=React.memo(({ options, onEvent}:{options:any[];onEvent?:(eventName:string)=>void})=>{
104111
constmountedRef=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
returnnewColumnTypeCompBuilder(
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
exportconstColumnValueTooltip=trans("table.columnValueTooltip");
1819

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

35+
constButtonEventOptions=[clickEvent]asconst;
36+
3437
constchildrenMap={
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
consticonOnly=!hasText&&(hasPrefixIcon||hasSuffixIcon);
5054

5155
consthandleClick=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
constbuttonStyle=useMemo(()=>({
5663
margin:0,
@@ -82,29 +89,37 @@ export const ButtonComp = (function () {
8289
(props)=><ButtonStyledprops={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+
consthasLegacyAction=children.onClick.getView()&&
95+
typeofchildren.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)

[8]ページ先頭

©2009-2025 Movatter.jp