|
1 | 1 | import React from '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 | +import ObjectFieldTemplate from './ObjectFieldTemplate'; // Ensure this is correctly imported |
| 6 | + |
| 7 | +const DEFAULT_RESPONSIVE_COL_SPAN = { |
| 8 | + xs: 24, |
| 9 | + sm: 24, |
| 10 | + md: 12, |
| 11 | + lg: 8, |
| 12 | + xl: 6, |
| 13 | +}; |
| 14 | + |
| 15 | +type UiProps = { |
| 16 | + rowGutter?: number; |
| 17 | + colSpan?: number | Record<string, number>; |
| 18 | +}; |
5 | 19 |
|
6 | 20 | const ArrayFieldTemplate = (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 | | - <Row gutter={[0, 0]}> |
13 | | - {items.map((element: any) => ( |
14 | | - <Col key={element.index} span={24} style={{ display: 'flex', alignItems: 'center' }}> |
15 | | - {/* Content container for the array item */} |
16 | | - <div style={{ 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"] as UiProps || {}; |
19 | 25 |
|
20 | | - {/* Container for the control buttons with vertical alignment */} |
21 | | - <div style={{ 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 | + const calculateResponsiveColSpan = (): { span: number } => { |
| 27 | + if (typeof colSpan === 'number') { |
| 28 | + return { span: colSpan }; |
| 29 | + } else if (typeof colSpan === 'object') { |
| 30 | + // Return span based on screen width |
| 31 | + const width = 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 | + const renderItems = () => { |
| 42 | + return items.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 | + <Col key={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 | + throw new Error('Function not implemented.'); |
| 69 | + } } |
| 70 | + /> |
| 71 | + |
| 72 | + {/* Control buttons */} |
| 73 | + <div style={{ 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 | + <Row gutter={rowGutter}> |
| 109 | + {renderItems()} {/* Render items */} |
56 | 110 | {canAdd && ( |
57 | | - <Col span={24} style={{ textAlign: 'center' }}> |
| 111 | + <Col span={24} style={{ textAlign: 'center',marginTop: '16px' }}> |
58 | 112 | <Button type="dashed" onClick={onAddClick} icon={<PlusOutlined />}> |
59 | 113 | Add Item |
60 | 114 | </Button> |
|
0 commit comments