|
1 | 1 | importReactfrom'react'; |
2 | 2 | import{Button,Row,Col}from'antd'; |
3 | | -import{ArrayFieldTemplateProps}from'@rjsf/utils'; |
| 3 | +import{ArrayFieldTemplateProps,getUiOptions,RJSFSchema}from'@rjsf/utils'; |
4 | 4 | import{ArrowDownOutlined,ArrowUpOutlined,DeleteOutlined,PlusOutlined}from'@ant-design/icons'; |
| 5 | +importObjectFieldTemplatefrom'./ObjectFieldTemplate';// Ensure this is correctly imported |
| 6 | + |
| 7 | +constDEFAULT_RESPONSIVE_COL_SPAN={ |
| 8 | +xs:24, |
| 9 | +sm:24, |
| 10 | +md:12, |
| 11 | +lg:8, |
| 12 | +xl:6, |
| 13 | +}; |
| 14 | + |
| 15 | +typeUiProps={ |
| 16 | +rowGutter?:number; |
| 17 | +colSpan?:number|Record<string,number>; |
| 18 | +}; |
5 | 19 |
|
6 | 20 | constArrayFieldTemplate=(props:ArrayFieldTemplateProps)=>{ |
7 | | -const{ items, canAdd, onAddClick, title}=props; |
| 21 | +const{ items, canAdd, onAddClick, title, uiSchema, registry}=props; |
8 | 22 |
|
9 | | -return( |
10 | | -<fieldset> |
11 | | -{title&&<legend>{title}</legend>} |
12 | | -<Rowgutter={[0,0]}> |
13 | | -{items.map((element:any)=>( |
14 | | -<Colkey={element.index}span={24}style={{display:'flex',alignItems:'center'}}> |
15 | | -{/* Content container for the array item */} |
16 | | -<divstyle={{flexGrow:1}}> |
17 | | -{element.children} |
18 | | -</div> |
| 23 | +// Get UI schema configuration |
| 24 | +const{ rowGutter=8, colSpan=DEFAULT_RESPONSIVE_COL_SPAN}=getUiOptions(uiSchema)?.["ui:props"]asUiProps||{}; |
19 | 25 |
|
20 | | -{/* Container for the control buttons with vertical alignment */} |
21 | | -<divstyle={{display:'flex',flexDirection:'row',justifyContent:'flex-end',paddingTop:"58px"}}> |
22 | | -{/* Move down button */} |
23 | | -{element.hasMoveDown&&( |
24 | | -<Button |
25 | | -type="default" |
26 | | -icon={<ArrowDownOutlined/>} |
27 | | -onClick={element.onReorderClick(element.index,element.index+1)} |
28 | | -style={{marginLeft:'4px'}} |
29 | | -/> |
30 | | -)} |
| 26 | +constcalculateResponsiveColSpan=():{span:number}=>{ |
| 27 | +if(typeofcolSpan==='number'){ |
| 28 | +return{span:colSpan}; |
| 29 | +}elseif(typeofcolSpan==='object'){ |
| 30 | +// Return span based on screen width |
| 31 | +constwidth=window.innerWidth; |
| 32 | +if(width>1200&&colSpan.xl!==undefined)return{span:colSpan.xl}; |
| 33 | +if(width>992&&colSpan.lg!==undefined)return{span:colSpan.lg}; |
| 34 | +if(width>768&&colSpan.md!==undefined)return{span:colSpan.md}; |
| 35 | +if(width>576&&colSpan.sm!==undefined)return{span:colSpan.sm}; |
| 36 | +return{span:colSpan.xs||DEFAULT_RESPONSIVE_COL_SPAN.xs}; |
| 37 | +} |
| 38 | +return{span:DEFAULT_RESPONSIVE_COL_SPAN.xs}; |
| 39 | +}; |
31 | 40 |
|
32 | | -{/* Move up button */} |
33 | | -{element.hasMoveUp&&( |
34 | | -<Button |
35 | | -type="default" |
36 | | -icon={<ArrowUpOutlined/>} |
37 | | -onClick={element.onReorderClick(element.index,element.index-1)} |
38 | | -style={{marginLeft:'4px'}} |
39 | | -/> |
40 | | -)} |
| 41 | +constrenderItems=()=>{ |
| 42 | +returnitems.map((element)=>{ |
| 43 | +const{ schema, uiSchema, formData, idSchema, name}=element.children.props; |
41 | 44 |
|
42 | | -{/* Remove button */} |
43 | | -{element.hasRemove&&( |
44 | | -<Button |
45 | | -type="default" |
46 | | -icon={<DeleteOutlined/>} |
47 | | -danger |
48 | | -onClick={element.onDropIndexClick(element.index)} |
49 | | -style={{marginLeft:'4px'}} |
50 | | -/> |
51 | | -)} |
52 | | -</div> |
53 | | -</Col> |
54 | | -))} |
55 | | -{/* Add button for the array */} |
| 45 | +return( |
| 46 | +<Colkey={element.index}span={24}> |
| 47 | +{/* Use ObjectFieldTemplate to render each array item */} |
| 48 | +<ObjectFieldTemplate |
| 49 | +title="" |
| 50 | +description={schema.description} |
| 51 | +properties={[ |
| 52 | +{ |
| 53 | +content:element.children, |
| 54 | + name, |
| 55 | +readonly:element.children.props.readonly, |
| 56 | +disabled:element.children.props.disabled, |
| 57 | +hidden:false |
| 58 | +}, |
| 59 | +]} |
| 60 | +schema={schema} |
| 61 | +uiSchema={uiSchema} |
| 62 | +formData={formData} |
| 63 | +idSchema={idSchema} |
| 64 | +registry={registry} |
| 65 | +readonly={element.children.props.readonly} |
| 66 | +disabled={element.children.props.disabled} |
| 67 | +onAddClick={function(schema:RJSFSchema):()=>void{ |
| 68 | +thrownewError('Function not implemented.'); |
| 69 | +}} |
| 70 | +/> |
| 71 | + |
| 72 | +{/* Control buttons */} |
| 73 | +<divstyle={{display:'flex',justifyContent:'flex-end',marginTop:'8px'}}> |
| 74 | +{element.hasMoveDown&&( |
| 75 | +<Button |
| 76 | +type="default" |
| 77 | +icon={<ArrowDownOutlined/>} |
| 78 | +onClick={element.onReorderClick(element.index,element.index+1)} |
| 79 | +style={{marginLeft:'4px'}} |
| 80 | +/> |
| 81 | +)} |
| 82 | +{element.hasMoveUp&&( |
| 83 | +<Button |
| 84 | +type="default" |
| 85 | +icon={<ArrowUpOutlined/>} |
| 86 | +onClick={element.onReorderClick(element.index,element.index-1)} |
| 87 | +style={{marginLeft:'4px'}} |
| 88 | +/> |
| 89 | +)} |
| 90 | +{element.hasRemove&&( |
| 91 | +<Button |
| 92 | +type="default" |
| 93 | +icon={<DeleteOutlined/>} |
| 94 | +danger |
| 95 | +onClick={element.onDropIndexClick(element.index)} |
| 96 | +style={{marginLeft:'4px'}} |
| 97 | +/> |
| 98 | +)} |
| 99 | +</div> |
| 100 | +</Col> |
| 101 | +); |
| 102 | +}); |
| 103 | +}; |
| 104 | + |
| 105 | +return( |
| 106 | +<fieldset> |
| 107 | + |
| 108 | +<Rowgutter={rowGutter}> |
| 109 | +{renderItems()}{/* Render items */} |
56 | 110 | {canAdd&&( |
57 | | -<Colspan={24}style={{textAlign:'center'}}> |
| 111 | +<Colspan={24}style={{textAlign:'center',marginTop:'16px'}}> |
58 | 112 | <Buttontype="dashed"onClick={onAddClick}icon={<PlusOutlined/>}> |
59 | 113 | Add Item |
60 | 114 | </Button> |
|