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

Commitc7bddbf

Browse files
author
FalkWolsky
committed
Work in Progress for Responsive Layout
1 parent9618206 commitc7bddbf

File tree

2 files changed

+214
-229
lines changed

2 files changed

+214
-229
lines changed

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

Lines changed: 128 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
11
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";
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';
5+
import{useContainerWidth}from"./jsonSchemaFormComp";
6+
importstyledfrom"styled-components";
127

138
constDESCRIPTION_COL_STYLE={
14-
paddingBottom:"8px",
9+
paddingBottom:'8px',
1510
};
1611

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-
3112
constObjectFieldTemplate=(props:ObjectFieldTemplateProps)=>{
3213
const{
3314
title,
@@ -42,59 +23,62 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
4223
readonly,
4324
registry,
4425
}=props;
45-
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-
},[]);
26+
constcontainerWidth=useContainerWidth();
7427

7528
constuiOptions=getUiOptions(uiSchema);
76-
constTitleFieldTemplate=getTemplate("TitleFieldTemplate",registry,uiOptions);
77-
constDescriptionFieldTemplate=getTemplate("DescriptionFieldTemplate",registry,uiOptions);
29+
constTitleFieldTemplate=getTemplate('TitleFieldTemplate',registry,uiOptions);
30+
constDescriptionFieldTemplate=getTemplate('DescriptionFieldTemplate',registry,uiOptions);
7831
const{
7932
ButtonTemplates:{ AddButton},
8033
}=registry.templates;
8134

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

88-
const{ rowGutter=4}=uiSchema?.["ui:props"]||{};
89-
90-
constcalculateResponsiveColSpan=(element:any):{span:number}=>{
44+
const{ rowGutter=4}=uiSchema?.['ui:props']||{};
45+
46+
constcalculateResponsiveColSpan=(element:any,level:number):{span:number}=>{
47+
48+
console.log("Calculating span for",element.name,"at level",level);
49+
50+
// root level
51+
if(level===0)return{span:24};
52+
53+
// Check if the element has a layout definition in ui:grid
54+
constgridColSpan=uiSchema?.['ui:grid']
55+
?.find((row:Record<string,any>)=>row[element.name])
56+
?.[element.name];
57+
58+
if(gridColSpan){
59+
if(typeofgridColSpan==="number"){
60+
return{span:gridColSpan};
61+
}elseif(typeofgridColSpan==="object"){
62+
if(containerWidth>1200&&gridColSpan.xl!==undefined){
63+
return{span:gridColSpan.xl};
64+
}elseif(containerWidth>992&&gridColSpan.lg!==undefined){
65+
return{span:gridColSpan.lg};
66+
}elseif(containerWidth>768&&gridColSpan.md!==undefined){
67+
return{span:gridColSpan.md};
68+
}elseif(containerWidth>576&&gridColSpan.sm!==undefined){
69+
return{span:gridColSpan.sm};
70+
}elseif(gridColSpan.xs!==undefined){
71+
return{span:gridColSpan.xs};
72+
}
73+
}
74+
}
9175

76+
// Fallback to default colSpan or ui:props.colSpan
9277
constuiSchemaProps=getUiOptions(element.content.props.uiSchema)?.["ui:props"]as
9378
|{colSpan?:Record<string,number>|number}
9479
|undefined;
9580

9681
constuiSchemaColSpan=uiSchemaProps?.colSpan;
97-
constdefaultSpan=containerWidth>1200 ?8 :containerWidth>768 ?12 :24;
9882

9983
if(uiSchemaColSpan){
10084
if(typeofuiSchemaColSpan==="number"){
@@ -114,133 +98,94 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
11498
}
11599
}
116100

101+
// Default responsive behavior
102+
constdefaultSpan=containerWidth>1200 ?8 :containerWidth>768 ?12 :24;
117103
return{span:defaultSpan};
118104
};
119105

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-
}
142-
143-
// Default layout if no grid is provided
106+
constrenderProperties=(properties:any[],level:number)=>{
107+
console.log("Rendering level:",level);// Debugging level
144108
return(
145-
<Rowgutter={rowGutter}key={section}>
146-
{properties.map((element)=>(
147-
<Colkey={element.name}{...calculateResponsiveColSpan(element)}>
148-
{element.content}
149-
</Col>
150-
))}
109+
<Row
110+
gutter={rowGutter}
111+
style={level===0 ?{width:"100%"} :{marginLeft:-8,marginRight:-8}}
112+
>
113+
{properties.map((element)=>{
114+
constspan=calculateResponsiveColSpan(element,level);
115+
116+
// Check if the element is an object or array and has nested properties
117+
if(element.content?.props?.schema?.type==="object"&&element.content.props.properties){
118+
// Render nested objects with an incremented level
119+
return(
120+
<Colkey={element.name}span={24}>
121+
<fieldset>
122+
<legend>{element.content.props.title||element.name}</legend>
123+
{renderProperties(element.content.props.properties,level+1)}
124+
</fieldset>
125+
</Col>
126+
);
127+
}
128+
129+
// Render normal elements
130+
return(
131+
<Colkey={element.name}span={span.span}>
132+
{element.content}
133+
</Col>
134+
);
135+
})}
151136
</Row>
152137
);
153138
};
154-
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-
139+
192140
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-
</>
224-
)}
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-
/>
237-
</Col>
238-
</Row>
239-
)}
240-
</fieldset>
241-
)}
242-
</ConfigConsumer>
243-
</div>
141+
<ConfigConsumer>
142+
{(configProps)=>(
143+
<fieldsetid={idSchema.$id}className="form-section">
144+
{/* Render Title */}
145+
{schema.type==="object"&&title&&(
146+
<legend>
147+
<TitleFieldTemplate
148+
id={titleId(idSchema)}
149+
title={title}
150+
required={props.required}
151+
schema={schema}
152+
uiSchema={uiSchema}
153+
registry={registry}
154+
/>
155+
</legend>
156+
)}
157+
{/* Render Description */}
158+
{description&&(
159+
<Row>
160+
<Colspan={24}style={DESCRIPTION_COL_STYLE}>
161+
<DescriptionFieldTemplate
162+
id={descriptionId(idSchema)}
163+
description={description}
164+
schema={schema}
165+
uiSchema={uiSchema}
166+
registry={registry}
167+
/>
168+
</Col>
169+
</Row>
170+
)}
171+
{/* Render Properties */}
172+
{renderProperties(properties,0)}
173+
{/* Expand Button */}
174+
{canExpand(schema,uiSchema,formData)&&(
175+
<Rowjustify="end"style={{width:"100%",marginTop:"24px"}}>
176+
<Col>
177+
<AddButton
178+
className="object-property-expand"
179+
onClick={onAddClick(schema)}
180+
disabled={disabled||readonly}
181+
registry={registry}
182+
/>
183+
</Col>
184+
</Row>
185+
)}
186+
</fieldset>
187+
)}
188+
</ConfigConsumer>
244189
);
245190
};
246191

0 commit comments

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