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

Commit753b59a

Browse files
authored
Merge pull request#828 from newwork-software/addGenericClassNameProperty
feat(client): class and data-test property to each component to enable advanced styling and e2e testing
2 parentsa69c927 +9c8b97b commit753b59a

File tree

3 files changed

+79
-10
lines changed

3 files changed

+79
-10
lines changed

‎client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx‎

Lines changed: 72 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{BoolCodeControl}from"comps/controls/codeControl";
1+
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
22
importReact,{ReactNode,useContext,useRef}from"react";
33
import{ExternalEditorContext}from"util/context/ExternalEditorContext";
44
import{Comp,CompParams,MultiBaseComp}from"lowcoder-core";
@@ -22,10 +22,14 @@ import {
2222
MethodConfigsType,
2323
withMethodExposing,
2424
}from"./withMethodExposing";
25+
import{Section}from"lowcoder-design";
26+
import{trans}from"i18n";
2527

2628
exporttypeNewChildren<ChildrenCompMapextendsRecord<string,Comp<unknown>>>=
2729
ChildrenCompMap&{
2830
hidden:InstanceType<typeofBoolCodeControl>;
31+
className:InstanceType<typeofStringControl>;
32+
dataTestId:InstanceType<typeofStringControl>;
2933
};
3034

3135
exportfunctionHidableView(props:{
@@ -50,12 +54,51 @@ export function HidableView(props: {
5054
}
5155
}
5256

57+
exportfunctionExtendedComponentView(props:{
58+
children:JSX.Element|React.ReactNode;
59+
className:string;
60+
dataTestId:string;
61+
}){
62+
if(!props.className&&!props.dataTestId){
63+
return<>{props.children}</>;
64+
}
65+
66+
return(
67+
<divclassName={props.className}data-testid={props.dataTestId}>
68+
{props.children}
69+
</div>
70+
);
71+
}
72+
73+
exportfunctionExtendedPropertyView<
74+
ChildrenCompMapextendsRecord<string,Comp<unknown>>,
75+
>(props:{
76+
children:JSX.Element|React.ReactNode,
77+
childrenMap:NewChildren<ChildrenCompMap>
78+
}
79+
){
80+
return(
81+
<>
82+
{props.children}
83+
<Sectionname={trans("prop.component")}>
84+
{props.childrenMap.className?.propertyView({label:trans("prop.className")})}
85+
{props.childrenMap.dataTestId?.propertyView({label:trans("prop.dataTestId")})}
86+
</Section>
87+
</>
88+
);
89+
}
90+
5391
exportfunctionuiChildren<
5492
ChildrenCompMapextendsRecord<string,Comp<unknown>>,
5593
>(
5694
childrenMap:ToConstructor<ChildrenCompMap>
5795
):ToConstructor<NewChildren<ChildrenCompMap>>{
58-
return{ ...childrenMap,hidden:BoolCodeControl}asany;
96+
return{
97+
...childrenMap,
98+
hidden:BoolCodeControl,
99+
className:StringControl,
100+
dataTestId:StringControl
101+
}asany;
59102
}
60103

61104
typeViewReturn=ReactNode;
@@ -89,10 +132,22 @@ export class UICompBuilder<
89132
setPropertyViewFn(
90133
propertyViewFn:PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
91134
){
92-
this.propertyViewFn=propertyViewFn;
135+
this.propertyViewFn=this.decoratePropertyViewFn(propertyViewFn);
93136
returnthis;
94137
}
95138

139+
decoratePropertyViewFn(
140+
propertyViewFn:PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
141+
):PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>{
142+
return(childrenMap,dispatch)=>{
143+
return(
144+
<ExtendedPropertyViewchildrenMap={childrenMap}>
145+
{propertyViewFn(childrenMap,dispatch)}
146+
</ExtendedPropertyView>
147+
);
148+
};
149+
}
150+
96151
setExposeStateConfigs(
97152
configs:ExposingConfig<ChildrenToComp<ChildrenCompMap>>[]
98153
){
@@ -110,8 +165,11 @@ export class UICompBuilder<
110165
}
111166

112167
build(){
113-
if(this.childrenMap.hasOwnProperty("hidden")){
114-
thrownewError("already has hidden");
168+
constreservedProps=["hidden","className","dataTestId"];
169+
for(constreservedPropofreservedProps){
170+
if(this.childrenMap.hasOwnProperty(reservedProp)){
171+
thrownewError(`Property »${reservedProp}« is reserved and must not be implemented in components!`);
172+
}
115173
}
116174
constnewChildrenMap=uiChildren(this.childrenMap);
117175
constbuilder=this;
@@ -122,7 +180,7 @@ export class UICompBuilder<
122180
ToNodeType<NewChildren<ChildrenCompMap>>
123181
>{
124182
ref:React.RefObject<HTMLDivElement>=React.createRef();
125-
183+
126184
overrideparseChildrenFromValue(
127185
params:CompParams<ToDataType<NewChildren<ChildrenCompMap>>>
128186
):NewChildren<ChildrenCompMap>{
@@ -185,8 +243,13 @@ function UIView(props: { comp: any; viewFn: any }) {
185243
//END ADD BY FRED
186244

187245
return(
188-
<HidableViewhidden={childrenProps.hiddenasboolean}>
189-
{props.viewFn(childrenProps,comp.dispatch)}
190-
</HidableView>
246+
<ExtendedComponentView
247+
className={childrenProps.classNameasstring}
248+
dataTestId={childrenProps.dataTestIdasstring}
249+
>
250+
<HidableViewhidden={childrenProps.hiddenasboolean}>
251+
{props.viewFn(childrenProps,comp.dispatch)}
252+
</HidableView>
253+
</ExtendedComponentView>
191254
);
192255
}

‎client/packages/lowcoder/src/i18n/locales/de.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,10 @@ export const de = {
182182
"showBody":"Körper zeigen",
183183
"showFooter":"Fußzeile anzeigen",
184184
"maskClosable":"Zum Schließen auf \"Draußen\" klicken",
185-
"showMask":"Maske zeigen"
185+
"showMask":"Maske zeigen",
186+
"component":"Komponente",
187+
"className":"Klasse",
188+
"dataTestId":"Test ID",
186189
},
187190
"autoHeightProp":{
188191
"auto":"Auto",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,9 @@ export const en = {
211211
"baseURL":"Lowcoder API Base URL",
212212
"horizontal":"Horizontal",
213213
"minHorizontalWidth":"Minimum Horizontal Width",
214+
"component":"Component",
215+
"className":"Class",
216+
"dataTestId":"Test ID",
214217
},
215218
"autoHeightProp":{
216219
"auto":"Auto",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp