forked from rjsf-team/react-jsonschema-form
/
index.tsx
121 lines (114 loc) · 3.23 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from "react";
import {
getTemplate,
getUiOptions,
ArrayFieldTemplateProps,
} from "@rjsf/utils";
import classNames from "classnames";
import Col from "antd/lib/col";
import Row from "antd/lib/row";
import { withConfigConsumer } from "antd/lib/config-provider/context";
const DESCRIPTION_COL_STYLE = {
paddingBottom: "8px",
};
// Add in the `prefixCls` element needed by the `withConfigConsumer` HOC
export type AntdArrayFieldTemplateProps = ArrayFieldTemplateProps & {
prefixCls: string;
};
const ArrayFieldTemplate = ({
canAdd,
className,
disabled,
formContext,
idSchema,
items,
onAddClick,
prefixCls,
readonly,
registry,
required,
schema,
title,
uiSchema,
}: AntdArrayFieldTemplateProps) => {
const uiOptions = getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate">(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate">(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
// Button templates are not overridden in the uiSchema
const {
ButtonTemplates: { AddButton },
} = registry.templates;
const { labelAlign = "right", rowGutter = 24 } = formContext;
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return (
<fieldset className={className} id={idSchema.$id}>
<Row gutter={rowGutter}>
{(uiOptions.title || title) && (
<Col className={labelColClassName} span={24}>
<ArrayFieldTitleTemplate
idSchema={idSchema}
required={required}
title={uiOptions.title || title}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
</Col>
)}
{(uiOptions.description || schema.description) && (
<Col span={24} style={DESCRIPTION_COL_STYLE}>
<ArrayFieldDescriptionTemplate
description={uiOptions.description || schema.description || ""}
idSchema={idSchema}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
</Col>
)}
<Col className="row array-item-list" span={24}>
{items &&
items.map(({ key, ...itemProps }) => (
<ArrayFieldItemTemplate key={key} {...itemProps} />
))}
</Col>
{canAdd && (
<Col span={24}>
<Row gutter={rowGutter} justify="end">
<Col flex="192px">
<AddButton
className="array-item-add"
disabled={disabled || readonly}
onClick={onAddClick}
uiSchema={uiSchema}
registry={registry}
/>
</Col>
</Row>
</Col>
)}
</Row>
</fieldset>
);
};
export default withConfigConsumer<AntdArrayFieldTemplateProps>({
prefixCls: "form",
})(ArrayFieldTemplate);