102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
import {
|
|
type FormContextType,
|
|
type ObjectFieldTemplatePropertyType,
|
|
type ObjectFieldTemplateProps,
|
|
type RJSFSchema,
|
|
type StrictRJSFSchema,
|
|
canExpand,
|
|
descriptionId,
|
|
getTemplate,
|
|
getUiOptions,
|
|
titleId,
|
|
} 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,
|
|
);
|
|
|
|
/* if (properties.length === 0) {
|
|
return null;
|
|
} */
|
|
const _canExpand = canExpand(schema, uiSchema, formData);
|
|
if (properties.length === 0 && !_canExpand) {
|
|
return null;
|
|
}
|
|
//console.log("multi:properties", uiSchema, props, options);
|
|
|
|
// Button templates are not overridden in the uiSchema
|
|
const {
|
|
ButtonTemplates: { AddButton },
|
|
} = registry.templates;
|
|
|
|
return (
|
|
<>
|
|
<fieldset id={idSchema.$id} className="object-field">
|
|
{title && (
|
|
<TitleFieldTemplate
|
|
id={titleId<T>(idSchema)}
|
|
title={title}
|
|
required={required}
|
|
schema={schema}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
{description && (
|
|
<DescriptionFieldTemplate
|
|
id={descriptionId<T>(idSchema)}
|
|
description={description}
|
|
schema={schema}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
|
|
{properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
|
|
{_canExpand && (
|
|
<AddButton
|
|
className="object-property-expand"
|
|
onClick={onAddClick(schema)}
|
|
disabled={disabled || readonly}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
</fieldset>
|
|
</>
|
|
);
|
|
}
|