|
1 | 1 | importReact,{useEffect,useRef,useState}from"react"; |
2 | | -import{Row,Col}from'antd'; |
| 2 | +import{Row,Col,Tabs}from'antd'; |
3 | 3 | import{ObjectFieldTemplateProps,getTemplate,getUiOptions,descriptionId,titleId,canExpand}from'@rjsf/utils'; |
4 | 4 | import{ConfigConsumer}from'antd/es/config-provider/context'; |
5 | 5 | import{useContainerWidth}from"./jsonSchemaFormComp"; |
6 | 6 | importstyledfrom"styled-components"; |
| 7 | +importTabPanefrom"antd/es/tabs/TabPane"; |
| 8 | +import{is}from"core-js/core/object"; |
7 | 9 |
|
8 | 10 | constDESCRIPTION_COL_STYLE={ |
9 | 11 | paddingBottom:'8px', |
@@ -98,6 +100,67 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => { |
98 | 100 | returnfieldName ?registry.fields[fieldName] :undefined; |
99 | 101 | }; |
100 | 102 |
|
| 103 | +constrenderSingleLevel=(level :number)=>{ |
| 104 | +return( |
| 105 | +<Rowgutter={rowGutter}> |
| 106 | +{properties.map((prop)=>{ |
| 107 | +constisArray=prop.content.props.schema.type==="array"; |
| 108 | +constcolSpan=isArray |
| 109 | + ?{span:24} |
| 110 | + :calculateResponsiveColSpan(uiSchema?.[prop.name]||{}); |
| 111 | + |
| 112 | +return( |
| 113 | +<Colkey={prop.name}{...colSpan}> |
| 114 | +{/* Render legend for array fields */} |
| 115 | +{isArray&&( |
| 116 | +<><br/><legendstyle={getLegendStyle(level)}> |
| 117 | +{prop.content.props.schema.title} |
| 118 | +</legend></> |
| 119 | +)} |
| 120 | +{/* Render field content */} |
| 121 | +{prop.content} |
| 122 | +</Col> |
| 123 | +); |
| 124 | +})} |
| 125 | +</Row> |
| 126 | +); |
| 127 | +}; |
| 128 | + |
| 129 | +constrenderCategorization=(elements:any[])=>{ |
| 130 | +return( |
| 131 | +<Tabs> |
| 132 | +{elements.map((category,index)=>( |
| 133 | +<TabPanetab={category.label||`Category${index+1}`}key={category.label||index}> |
| 134 | +{category.elements.map((element:any,elementIndex:number)=>{ |
| 135 | +if(element.type==="HorizontalLayout"){ |
| 136 | +return( |
| 137 | +<Rowkey={elementIndex}gutter={rowGutter}> |
| 138 | +{element.elements.map((field:any,fieldIndex:number)=>{ |
| 139 | +constcolSpan=calculateResponsiveColSpan(field.uiSchema); |
| 140 | +return( |
| 141 | +<Colkey={fieldIndex}{...colSpan}> |
| 142 | +{properties.find((prop)=>prop.name===field.scope.replace("#/properties/","")) |
| 143 | +?.content} |
| 144 | +</Col> |
| 145 | +); |
| 146 | +})} |
| 147 | +</Row> |
| 148 | +); |
| 149 | +} |
| 150 | + |
| 151 | +if(element.type==="Control"){ |
| 152 | +returnproperties.find((prop)=>prop.name===element.scope.replace("#/properties/","")) |
| 153 | +?.content; |
| 154 | +} |
| 155 | + |
| 156 | +returnnull; |
| 157 | +})} |
| 158 | +</TabPane> |
| 159 | +))} |
| 160 | +</Tabs> |
| 161 | +); |
| 162 | +}; |
| 163 | + |
101 | 164 | constrenderFieldsFromSection=(section:any,level:number=0)=>{ |
102 | 165 | const{ formData, schema, uiSchema}=section.content.props; |
103 | 166 |
|
@@ -192,31 +255,38 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => { |
192 | 255 | }; |
193 | 256 |
|
194 | 257 | constrenderSections=(properties:any[],level:number)=>{ |
| 258 | + |
| 259 | +constisMultiLevel=properties.some( |
| 260 | +(prop)=>prop.content.props.schema?.type==="object"&&prop.content.props.schema?.properties |
| 261 | +); |
| 262 | + |
| 263 | +if(!isMultiLevel){ |
| 264 | +returnrenderSingleLevel(level); |
| 265 | +} |
| 266 | + |
195 | 267 | returnproperties.map((section)=>{ |
196 | 268 | constschema=section.content.props.schema; |
197 | 269 | constisArray=typeofsection.content.props.index==='number'; |
198 | 270 | constsectionTitle=schema.title||section.name; |
199 | 271 |
|
200 | | -console.log("Section",sectionTitle,isArray,section); |
201 | | - |
202 | 272 | return( |
203 | | -<Row |
204 | | -key={section.name} |
205 | | -gutter={rowGutter} |
206 | | -style={{marginBottom:"16px",width:"100%"}} |
207 | | -> |
208 | | -<Colspan={24}> |
209 | | -<fieldset> |
210 | | -{/* Always render the legend for the section itself */} |
211 | | -{level===0&&!isArray ?( |
212 | | -<legendstyle={getLegendStyle(level)}>{sectionTitle}</legend> |
213 | | -) :null} |
| 273 | +<Row |
| 274 | +key={section.name} |
| 275 | +gutter={rowGutter} |
| 276 | +style={{marginBottom:"16px",width:"100%"}} |
| 277 | +> |
| 278 | +<Colspan={24}> |
| 279 | +<fieldset> |
| 280 | +{/* Always render the legend for the section itself */} |
| 281 | +{level===0&&!isArray ?( |
| 282 | +<legendstyle={getLegendStyle(level)}>{sectionTitle}</legend> |
| 283 | +) :null} |
214 | 284 |
|
215 | | -{/* Render the section content */} |
216 | | -{renderFieldsFromSection(section,level+1)} |
217 | | -</fieldset> |
218 | | -</Col> |
219 | | -</Row> |
| 285 | +{/* Render the section content */} |
| 286 | +{renderFieldsFromSection(section,level+1)} |
| 287 | +</fieldset> |
| 288 | +</Col> |
| 289 | +</Row> |
220 | 290 | ); |
221 | 291 | }); |
222 | 292 | }; |
|
