Skip to content

Commit fd94adc

Browse files
author
FalkWolsky
committed
Enable Responsiveness for JSON Schema Form
1 parent c7bddbf commit fd94adc

File tree

2 files changed

+275
-131
lines changed

2 files changed

+275
-131
lines changed

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

Lines changed: 101 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,114 @@
11
import React from 'react';
22
import { Button, Row, Col } from 'antd';
3-
import { ArrayFieldTemplateProps } from '@rjsf/utils';
3+
import { ArrayFieldTemplateProps, getUiOptions, RJSFSchema } from '@rjsf/utils';
44
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+
};
519

620
const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
7-
const { items, canAdd, onAddClick, title } = props;
21+
const { items, canAdd, onAddClick, title, uiSchema, registry } = props;
822

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 || {};
1925

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+
};
3140

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;
4144

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 */}
56110
{canAdd && (
57-
<Col span={24} style={{ textAlign: 'center' }}>
111+
<Col span={24} style={{ textAlign: 'center', marginTop: '16px' }}>
58112
<Button type="dashed" onClick={onAddClick} icon={<PlusOutlined />}>
59113
Add Item
60114
</Button>

0 commit comments

Comments
 (0)