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

Commite14cab9

Browse files
author
hulutter
committed
feat(client): add id and class properties to each component to enable advanced styling capabilities
1 parenta69c927 commite14cab9

File tree

3 files changed

+71
-7
lines changed

3 files changed

+71
-7
lines changed

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

Lines changed: 64 additions & 6 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+
id:InstanceType<typeofStringControl>;
32+
className:InstanceType<typeofStringControl>;
2933
};
3034

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

57+
exportfunctionExtendedComponentView(props:{
58+
children:JSX.Element|React.ReactNode;
59+
id:string;
60+
className:string;
61+
}){
62+
if(!props.id&&!props.className){
63+
return<>{props.children}</>;
64+
}
65+
66+
return(
67+
<divid={props.id}className={props.className}>
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.id?.propertyView({label:trans("prop.id")})}
85+
{props.childrenMap.className?.propertyView({label:trans("prop.className")})}
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{ ...childrenMap,hidden:BoolCodeControl,id:StringControl,className:StringControl}asany;
5997
}
6098

6199
typeViewReturn=ReactNode;
@@ -89,10 +127,22 @@ export class UICompBuilder<
89127
setPropertyViewFn(
90128
propertyViewFn:PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
91129
){
92-
this.propertyViewFn=propertyViewFn;
130+
this.propertyViewFn=this.decoratePropertyViewFn(propertyViewFn);
93131
returnthis;
94132
}
95133

134+
decoratePropertyViewFn(
135+
propertyViewFn:PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
136+
):PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>{
137+
return(childrenMap,dispatch)=>{
138+
return(
139+
<ExtendedPropertyViewchildrenMap={childrenMap}>
140+
{propertyViewFn(childrenMap,dispatch)}
141+
</ExtendedPropertyView>
142+
);
143+
};
144+
}
145+
96146
setExposeStateConfigs(
97147
configs:ExposingConfig<ChildrenToComp<ChildrenCompMap>>[]
98148
){
@@ -113,6 +163,12 @@ export class UICompBuilder<
113163
if(this.childrenMap.hasOwnProperty("hidden")){
114164
thrownewError("already has hidden");
115165
}
166+
if(this.childrenMap.hasOwnProperty("id")){
167+
thrownewError("already has id");
168+
}
169+
if(this.childrenMap.hasOwnProperty("className")){
170+
thrownewError("already has className");
171+
}
116172
constnewChildrenMap=uiChildren(this.childrenMap);
117173
constbuilder=this;
118174

@@ -185,8 +241,10 @@ function UIView(props: { comp: any; viewFn: any }) {
185241
//END ADD BY FRED
186242

187243
return(
188-
<HidableViewhidden={childrenProps.hiddenasboolean}>
189-
{props.viewFn(childrenProps,comp.dispatch)}
190-
</HidableView>
244+
<ExtendedComponentViewid={childrenProps.idasstring}className={childrenProps.classNameasstring}>
245+
<HidableViewhidden={childrenProps.hiddenasboolean}>
246+
{props.viewFn(childrenProps,comp.dispatch)}
247+
</HidableView>
248+
</ExtendedComponentView>
191249
);
192250
}

‎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+
"id":"ID",
188+
"className":"Klasse",
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+
"id":"ID",
216+
"className":"Class",
214217
},
215218
"autoHeightProp":{
216219
"auto":"Auto",

0 commit comments

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