fix: ObjectFieldTemplate RJSF

Exabyte-io · Aug 6, 2024 · 3b1f1f9 · 3b1f1f9
1 parent bebbfa1
commit 3b1f1f9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 46 deletions.
diff --git 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 <Grid> if the inner element is hidden as the <Grid>
-            // 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 <Grid> if the inner element is hidden as the <Grid>
+                // 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
@@ -11,27 +11,17 @@ 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,
     F extends FormContextType = any,
 >(props: ObjectFieldTemplateProps<T, S, F>) {
     const {
         description,
-        title,
         properties,
-        required,
         disabled,
         readonly,
         uiSchema,
@@ -44,12 +34,6 @@ export default function ObjectFieldTemplate<
 
     const uiOptions = getUiOptions<T, S, F>(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 (
         <Box className="ObjectFieldTemplate">
-            {title && !isNumeric(title) && (
-                <TitleFieldTemplate
-                    id={titleId<T>(idSchema)}
-                    title={title}
-                    required={required}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                />
-            )}
             {description && (
                 <DescriptionFieldTemplate
                     id={descriptionId<T>(idSchema)}
@@ -83,23 +61,23 @@ export default function ObjectFieldTemplate<
                 />
             )}
             <Grid container spacing={2}>
-                {properties.map((element, index) =>
+                {properties.map((element, index) => {
                     // Remove the <Grid> if the inner element is hidden as the <Grid>
                     // itself would otherwise still take up space.
-                    element.hidden ? (
+                    return element.hidden ? (
                         element.content
                     ) : (
                         <Grid
                             item
                             xs={12}
-                            sm={4}
+                            sm={schemaHasInnerObjects ? 12 : 4}
                             // md={4}
                             key={index}
                             style={{ marginBottom: "10px" }}>
                             {element.content}
                         </Grid>
-                    ),
-                )}
+                    );
+                })}
                 {canExpand<T, S, F>(schema, uiSchema, formData) && (
                     <Grid container justifyContent="flex-end">
                         <Grid item>