From 3b1f1f93abbfde090c32f5d36fc6160250d61604 Mon Sep 17 00:00:00 2001 From: Kostiantyn Dvornik Date: Tue, 6 Aug 2024 17:48:43 +0300 Subject: [PATCH] fix: ObjectFieldTemplate RJSF --- .../rjsf/templates/ObjectFieldTemplate.js | 27 ++++++------- .../rjsf/templates/ObjectFieldTemplate.tsx | 40 +++++-------------- 2 files changed, 21 insertions(+), 46 deletions(-) diff --git a/dist/other/rjsf/templates/ObjectFieldTemplate.js b/dist/other/rjsf/templates/ObjectFieldTemplate.js index b63dbdd..67be672 100644 --- a/dist/other/rjsf/templates/ObjectFieldTemplate.js +++ b/dist/other/rjsf/templates/ObjectFieldTemplate.js @@ -2,30 +2,27 @@ /* eslint-disable react/no-array-index-key */ import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; -import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from "@rjsf/utils"; +import { canExpand, descriptionId, getTemplate, getUiOptions, } from "@rjsf/utils"; import React from "react"; -function isNumeric(str) { - return (!Number.isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)... - !Number.isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail - ); -} export default function ObjectFieldTemplate(props) { - const { description, title, properties, required, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, } = props; + const { description, properties, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, } = props; const uiOptions = getUiOptions(uiSchema); - const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions); const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema const { ButtonTemplates: { AddButton }, } = registry.templates; + const schemaHasInnerObjects = Object.values(schema.properties || {}).some((schema) => { + return typeof schema === "object" && Boolean(schema.properties); + }); return (React.createElement(Box, { className: "ObjectFieldTemplate" }, - title && !isNumeric(title) && (React.createElement(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (React.createElement(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), React.createElement(Grid, { container: true, spacing: 2 }, - properties.map((element, index) => - // Remove the if the inner element is hidden as the - // itself would otherwise still take up space. - element.hidden ? (element.content) : (React.createElement(Grid, { item: true, xs: 12, sm: 4, - // md={4} - key: index, style: { marginBottom: "10px" } }, element.content))), + properties.map((element, index) => { + // Remove the if the inner element is hidden as the + // itself would otherwise still take up space. + return element.hidden ? (element.content) : (React.createElement(Grid, { item: true, xs: 12, sm: schemaHasInnerObjects ? 12 : 4, + // md={4} + key: index, style: { marginBottom: "10px" } }, element.content)); + }), canExpand(schema, uiSchema, formData) && (React.createElement(Grid, { container: true, justifyContent: "flex-end" }, React.createElement(Grid, { item: true }, React.createElement(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))))))); diff --git a/src/other/rjsf/templates/ObjectFieldTemplate.tsx b/src/other/rjsf/templates/ObjectFieldTemplate.tsx index 8cbfb6b..3c56373 100644 --- a/src/other/rjsf/templates/ObjectFieldTemplate.tsx +++ b/src/other/rjsf/templates/ObjectFieldTemplate.tsx @@ -11,17 +11,9 @@ import { ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema, - titleId, } from "@rjsf/utils"; import React from "react"; -function isNumeric(str: string) { - return ( - !Number.isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)... - !Number.isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail - ); -} - export default function ObjectFieldTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, @@ -29,9 +21,7 @@ export default function ObjectFieldTemplate< >(props: ObjectFieldTemplateProps) { const { description, - title, properties, - required, disabled, readonly, uiSchema, @@ -44,12 +34,6 @@ export default function ObjectFieldTemplate< const uiOptions = getUiOptions(uiSchema); - const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>( - "TitleFieldTemplate", - registry, - uiOptions, - ); - const DescriptionFieldTemplate = getTemplate<"DescriptionFieldTemplate", T, S, F>( "DescriptionFieldTemplate", registry, @@ -61,18 +45,12 @@ export default function ObjectFieldTemplate< ButtonTemplates: { AddButton }, } = registry.templates; + const schemaHasInnerObjects = Object.values(schema.properties || {}).some((schema) => { + return typeof schema === "object" && Boolean(schema.properties); + }); + return ( - {title && !isNumeric(title) && ( - (idSchema)} - title={title} - required={required} - schema={schema} - uiSchema={uiSchema} - registry={registry} - /> - )} {description && ( (idSchema)} @@ -83,23 +61,23 @@ export default function ObjectFieldTemplate< /> )} - {properties.map((element, index) => + {properties.map((element, index) => { // Remove the if the inner element is hidden as the // itself would otherwise still take up space. - element.hidden ? ( + return element.hidden ? ( element.content ) : ( {element.content} - ), - )} + ); + })} {canExpand(schema, uiSchema, formData) && (