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

Commit54e1b50

Browse files
author
FalkWolsky
committed
Rollback RJSF in Dev to use a feature branch
1 parent9618206 commit54e1b50

File tree

3 files changed

+66
-215
lines changed

3 files changed

+66
-215
lines changed

‎client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,4 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
6565
);
6666
};
6767

68-
exportdefaultArrayFieldTemplate;
68+
exportdefaultArrayFieldTemplate;
Lines changed: 64 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,12 @@
1-
importReact,{useEffect,useRef,useState}from"react";
2-
import{Row,Col}from"antd";
3-
import{
4-
ObjectFieldTemplateProps,
5-
getTemplate,
6-
getUiOptions,
7-
descriptionId,
8-
titleId,
9-
canExpand,
10-
}from"@rjsf/utils";
11-
import{ConfigConsumer}from"antd/es/config-provider/context";
1+
importReactfrom'react';
2+
import{Row,Col}from'antd';
3+
import{ObjectFieldTemplateProps,getTemplate,getUiOptions,descriptionId,titleId,canExpand}from'@rjsf/utils';
4+
import{ConfigConsumer}from'antd/es/config-provider/context';
125

136
constDESCRIPTION_COL_STYLE={
14-
paddingBottom:"8px",
7+
paddingBottom:'8px',
158
};
169

17-
interfaceColSpan{
18-
xs:number;
19-
sm:number;
20-
md:number;
21-
lg:number;
22-
xl:number;
23-
}
24-
25-
interfaceUiOptions{
26-
colSpan:ColSpan;
27-
rowGutter:number;
28-
// other properties...
29-
}
30-
3110
constObjectFieldTemplate=(props:ObjectFieldTemplateProps)=>{
3211
const{
3312
title,
@@ -43,205 +22,81 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
4322
registry,
4423
}=props;
4524

46-
constcontainerRef=useRef<HTMLDivElement>(null);
47-
const[containerWidth,setContainerWidth]=useState(0);
48-
49-
// Monitor the container's width
50-
useEffect(()=>{
51-
constupdateWidth=()=>{
52-
if(containerRef.current){
53-
setContainerWidth(containerRef.current.offsetWidth);
54-
}
55-
};
56-
57-
// Create a ResizeObserver to watch for width changes
58-
constresizeObserver=newResizeObserver(()=>{
59-
updateWidth();
60-
});
61-
62-
if(containerRef.current){
63-
resizeObserver.observe(containerRef.current);
64-
}
65-
66-
// Initial update
67-
updateWidth();
68-
69-
// Cleanup observer on unmount
70-
return()=>{
71-
resizeObserver.disconnect();
72-
};
73-
},[]);
74-
7525
constuiOptions=getUiOptions(uiSchema);
76-
constTitleFieldTemplate=getTemplate("TitleFieldTemplate",registry,uiOptions);
77-
constDescriptionFieldTemplate=getTemplate("DescriptionFieldTemplate",registry,uiOptions);
26+
constTitleFieldTemplate=getTemplate('TitleFieldTemplate',registry,uiOptions);
27+
constDescriptionFieldTemplate=getTemplate('DescriptionFieldTemplate',registry,uiOptions);
7828
const{
7929
ButtonTemplates:{ AddButton},
8030
}=registry.templates;
8131

82-
constdefaultResponsiveColSpan=(width:number)=>{
83-
if(width>1200)return8;// Wide screens
84-
if(width>768)return12;// Tablets
85-
return24;// Mobile
32+
// Define responsive column spans based on the ui:props or fallback to defaults
33+
constdefaultResponsiveColSpan={
34+
xs:24,// Extra small devices
35+
sm:24,// Small devices
36+
md:12,// Medium devices
37+
lg:12,// Large devices
38+
xl:8,// Extra large devices
8639
};
8740

88-
const{ rowGutter=4}=uiSchema?.["ui:props"]||{};
41+
const{ rowGutter=4, colSpan=defaultResponsiveColSpan}=uiSchema?.['ui:props']||{};
8942

90-
constcalculateResponsiveColSpan=(element:any):{span:number}=>{
43+
// Generate responsive colSpan props for each element
44+
constcalculateResponsiveColSpan=(element:any)=>{
45+
const{ type}=element.content.props.schema;
46+
constwidget=getUiOptions(element.content.props.uiSchema).widget;
9147

92-
constuiSchemaProps=getUiOptions(element.content.props.uiSchema)?.["ui:props"]as
93-
|{colSpan?:Record<string,number>|number}
94-
|undefined;
95-
96-
constuiSchemaColSpan=uiSchemaProps?.colSpan;
97-
constdefaultSpan=containerWidth>1200 ?8 :containerWidth>768 ?12 :24;
98-
99-
if(uiSchemaColSpan){
100-
if(typeofuiSchemaColSpan==="number"){
101-
return{span:uiSchemaColSpan};
102-
}elseif(typeofuiSchemaColSpan==="object"){
103-
if(containerWidth>1200&&uiSchemaColSpan.xl!==undefined){
104-
return{span:uiSchemaColSpan.xl};
105-
}elseif(containerWidth>992&&uiSchemaColSpan.lg!==undefined){
106-
return{span:uiSchemaColSpan.lg};
107-
}elseif(containerWidth>768&&uiSchemaColSpan.md!==undefined){
108-
return{span:uiSchemaColSpan.md};
109-
}elseif(containerWidth>576&&uiSchemaColSpan.sm!==undefined){
110-
return{span:uiSchemaColSpan.sm};
111-
}elseif(uiSchemaColSpan.xs!==undefined){
112-
return{span:uiSchemaColSpan.xs};
113-
}
114-
}
115-
}
116-
117-
return{span:defaultSpan};
118-
};
119-
120-
constrenderSectionLayout=(properties:any[],uiGrid:any,section:string)=>{
121-
122-
if(uiGrid&&Array.isArray(uiGrid)){
123-
return(
124-
<Rowgutter={rowGutter}key={section}>
125-
{uiGrid.map((ui_row:Record<string,any>)=>
126-
Object.keys(ui_row).map((row_item)=>{
127-
constelement=properties.find((p)=>p.name===row_item);
128-
if(element){
129-
constspan=calculateResponsiveColSpan(element).span;
130-
return(
131-
<Colkey={element.name}span={span}>
132-
{element.content}
133-
</Col>
134-
);
135-
}
136-
returnnull;
137-
})
138-
)}
139-
</Row>
140-
);
141-
}
48+
constdefaultSpan=widget==='textarea'||type==='object'||type==='array' ?24 :colSpan;
14249

143-
// Default layout if no grid is provided
144-
return(
145-
<Rowgutter={rowGutter}key={section}>
146-
{properties.map((element)=>(
147-
<Colkey={element.name}{...calculateResponsiveColSpan(element)}>
148-
{element.content}
149-
</Col>
150-
))}
151-
</Row>
152-
);
50+
// Ensure the returned object is properly formatted for AntD responsive properties
51+
returntypeofdefaultSpan==='object' ?defaultSpan :{span:defaultSpan};
15352
};
15453

155-
constrenderCustomLayout=()=>{
156-
constschemaType=schema.typeasstring;
157-
switch(schemaType){
158-
case"Group":
159-
return(
160-
<divstyle={{border:"1px solid #ccc",padding:"15px",marginBottom:"10px"}}>
161-
<h3>{schema.label||"Group"}</h3>
162-
{renderSectionLayout(properties,uiSchema?.["ui:grid"],schema.label)}
163-
</div>
164-
);
165-
case"HorizontalLayout":
166-
return(
167-
<Rowgutter={rowGutter}style={{display:"flex",gap:"10px"}}>
168-
{properties.map((element)=>(
169-
<Colkey={element.name}{...calculateResponsiveColSpan(element)}>
170-
{element.content}
171-
</Col>
172-
))}
173-
</Row>
174-
);
175-
case"VerticalLayout":
176-
return(
177-
<divstyle={{display:"flex",flexDirection:"column",gap:"10px"}}>
178-
{properties.map((element)=>(
179-
<divkey={element.name}>{element.content}</div>
180-
))}
181-
</div>
182-
);
183-
default:
184-
returnnull;// Fall back to default rendering if no match
185-
}
186-
};
187-
188-
// Check if the schema is a custom layout type
189-
constschemaType=schema.typeasstring;// Extract schema type safely
190-
constisCustomLayout=["Group","HorizontalLayout","VerticalLayout"].includes(schemaType);
191-
19254
return(
193-
<divref={containerRef}>
194-
<ConfigConsumer>
195-
{(configProps)=>(
196-
<fieldsetid={idSchema.$id}className="form-section">
197-
{!isCustomLayout&&(
198-
<>
199-
{schema.type==="object"&&title&&(
200-
<legend>
201-
<TitleFieldTemplate
202-
id={titleId(idSchema)}
203-
title={title}
204-
required={props.required}
205-
schema={schema}
206-
uiSchema={uiSchema}
207-
registry={registry}
208-
/>
209-
</legend>
210-
)}
211-
{description&&(
212-
<Colspan={24}style={DESCRIPTION_COL_STYLE}>
213-
<DescriptionFieldTemplate
214-
id={descriptionId(idSchema)}
215-
description={description}
216-
schema={schema}
217-
uiSchema={uiSchema}
218-
registry={registry}
219-
/>
220-
</Col>
221-
)}
222-
{renderSectionLayout(properties,uiSchema?.["ui:grid"],"root")}
223-
</>
55+
<ConfigConsumer>
56+
{(configProps)=>(
57+
<fieldsetid={idSchema.$id}className="form-section">
58+
<Rowgutter={rowGutter}>
59+
{schema.type==='object'&&title&&(
60+
<legend>
61+
<TitleFieldTemplateid={titleId(idSchema)}title={title}required={props.required}schema={schema}uiSchema={uiSchema}registry={registry}/>
62+
</legend>
22463
)}
225-
226-
{isCustomLayout&&renderCustomLayout()}
227-
228-
{canExpand(schema,uiSchema,formData)&&(
229-
<Rowjustify="end"style={{marginTop:"24px"}}>
230-
<Col>
231-
<AddButton
232-
className="object-property-expand"
233-
onClick={onAddClick(schema)}
234-
disabled={disabled||readonly}
235-
registry={registry}
236-
/>
64+
{description&&(
65+
<Colspan={24}style={DESCRIPTION_COL_STYLE}>
66+
<DescriptionFieldTemplateid={descriptionId(idSchema)}description={description}schema={schema}uiSchema={uiSchema}registry={registry}/>
67+
</Col>
68+
)}
69+
{uiSchema?.['ui:grid']&&Array.isArray(uiSchema['ui:grid']) ?(
70+
uiSchema['ui:grid'].map((ui_row:Record<string,any>)=>{
71+
returnObject.keys(ui_row).map((row_item)=>{
72+
constelement=properties.find((p)=>p.name===row_item);
73+
returnelement ?(
74+
// Pass responsive colSpan props using the calculated values
75+
<Colkey={element.name}{...ui_row[row_item]}>
76+
{element.content}
77+
</Col>
78+
) :null;
79+
});
80+
})
81+
) :(
82+
properties.map((element)=>(
83+
<Colkey={element.name}{...calculateResponsiveColSpan(element)}>
84+
{element.content}
23785
</Col>
238-
</Row>
86+
))
23987
)}
240-
</fieldset>
241-
)}
242-
</ConfigConsumer>
243-
</div>
88+
</Row>
89+
{canExpand(schema,uiSchema,formData)&&(
90+
<Rowjustify="end"style={{marginTop:'24px'}}>
91+
<Col>
92+
<AddButtonclassName="object-property-expand"onClick={onAddClick(schema)}disabled={disabled||readonly}registry={registry}/>
93+
</Col>
94+
</Row>
95+
)}
96+
</fieldset>
97+
)}
98+
</ConfigConsumer>
24499
);
245100
};
246101

247-
exportdefaultObjectFieldTemplate;
102+
exportdefaultObjectFieldTemplate;

‎client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import { useContext, useEffect } from "react";
2626
import{EditorContext}from"comps/editorState";
2727
importObjectFieldTemplatefrom'./ObjectFieldTemplate';
2828
importArrayFieldTemplatefrom'./ArrayFieldTemplate';
29-
// import { LayoutFieldTemplate } from "./LayoutFieldTemplate";
3029
import{Select}from'antd';
3130
importTitlefrom'antd/es/typography/Title';
3231

@@ -83,8 +82,6 @@ const Container = styled.div<{
8382
.help-block {
8483
margin-bottom: 0px;
8584
}
86-
87-
8885
`;
8986

9087
functionconvertData(schema?:JSONSchema7,data?:any){
@@ -265,7 +262,6 @@ let FormBasicComp = (function () {
265262
templates={{
266263
ObjectFieldTemplate:ObjectFieldTemplate,
267264
ArrayFieldTemplate:ArrayFieldTemplate,
268-
// FieldTemplate: LayoutFieldTemplate,
269265
}}
270266
widgets={{searchableSelect:SearchableSelectWidget}}
271267
// ErrorList={ErrorList}
@@ -444,4 +440,4 @@ FormTmpComp = withMethodExposing(FormTmpComp, [
444440
},
445441
]);
446442

447-
exportconstJsonSchemaFormComp=FormTmpComp;
443+
exportconstJsonSchemaFormComp=FormTmpComp;

0 commit comments

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