forked from rjsf-team/react-jsonschema-form
/
ObjectFieldTemplate.tsx
87 lines (86 loc) · 2.33 KB
/
ObjectFieldTemplate.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
import React from "react";
import {
FormContextType,
ObjectFieldTemplatePropertyType,
ObjectFieldTemplateProps,
RJSFSchema,
StrictRJSFSchema,
canExpand,
getTemplate,
getUiOptions,
} from "@rjsf/utils";
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
* title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
* the properties.
*
* @param props - The `ObjectFieldTemplateProps` for this component
*/
export default function ObjectFieldTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
>(props: ObjectFieldTemplateProps<T, S, F>) {
const {
description,
disabled,
formData,
idSchema,
onAddClick,
properties,
readonly,
registry,
required,
schema,
title,
uiSchema,
} = props;
const options = getUiOptions<T, S, F>(uiSchema);
const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>(
"TitleFieldTemplate",
registry,
options
);
const DescriptionFieldTemplate = getTemplate<
"DescriptionFieldTemplate",
T,
S,
F
>("DescriptionFieldTemplate", registry, options);
// Button templates are not overridden in the uiSchema
const {
ButtonTemplates: { AddButton },
} = registry.templates;
return (
<fieldset id={idSchema.$id}>
{(options.title || title) && (
<TitleFieldTemplate
id={`${idSchema.$id}__title`}
title={options.title || title}
required={required}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
{(options.description || description) && (
<DescriptionFieldTemplate
id={`${idSchema.$id}__description`}
description={options.description || description!}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
{properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
{canExpand<T, S, F>(schema, uiSchema, formData) && (
<AddButton
className="object-property-expand"
onClick={onAddClick(schema)}
disabled={disabled || readonly}
uiSchema={uiSchema}
registry={registry}
/>
)}
</fieldset>
);
}