Move index label to top when child is an object or array

i-VRESSE · Aug 10, 2022 · c73a9da · c73a9da
1 parent f546cbe
commit c73a9da
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 38 deletions.
diff --git a/packages/form/src/ArrayFieldTemplate.stories.tsx b/packages/form/src/ArrayFieldTemplate.stories.tsx
@@ -11,10 +11,13 @@ const meta: ComponentMeta<typeof Form> = {
 
 export default meta
 
-function render (schema: JSONSchema7, uiSchema: {} = {}): JSX.Element {
-  const formData = {
+function render (
+  schema: JSONSchema7,
+  uiSchema: {} = {},
+  formData: any = {
     nested1: ['a', 'b', 'c', 'd', 'e', 'f']
   }
+): JSX.Element {
   return (
     <Form
       schema={schema}
@@ -71,19 +74,26 @@ export const NoUiSchemaFixed: ComponentStory<typeof Form> = () => {
       nested1: {
         type: 'array',
         title: 'Array of string',
-        items: [{
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }]
+        items: [
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          }
+        ]
       }
     },
     additionalProperties: false
@@ -98,19 +108,26 @@ export const IndexableArrayFixed: ComponentStory<typeof Form> = () => {
       nested1: {
         type: 'array',
         title: 'Array of string',
-        items: [{
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }, {
-          type: 'string'
-        }]
+        items: [
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          },
+          {
+            type: 'string'
+          }
+        ]
       }
     },
     additionalProperties: false
@@ -123,7 +140,33 @@ export const IndexableArrayFixed: ComponentStory<typeof Form> = () => {
   return render(schema, uiSchema)
 }
 
-export const IndexableArrayWithPredefinedLabels: ComponentStory<typeof Form> = () => {
+export const IndexableArrayWithPredefinedLabels: ComponentStory<typeof Form> =
+  () => {
+    const schema: JSONSchema7 = {
+      type: 'object',
+      properties: {
+        nested1: {
+          type: 'array',
+          title: 'Array of string',
+          items: {
+            type: 'string'
+          }
+        }
+      },
+      additionalProperties: false
+    }
+    const uiSchema = {
+      nested1: {
+        'ui:indexable': ['1st', '2nd', '3rd'],
+        'ui:orderable': false
+      }
+    }
+    return render(schema, uiSchema)
+  }
+
+export const IndexableArrayWithLongPredefinedLabels: ComponentStory<
+  typeof Form
+> = () => {
   const schema: JSONSchema7 = {
     type: 'object',
     properties: {
@@ -139,32 +182,64 @@ export const IndexableArrayWithPredefinedLabels: ComponentStory<typeof Form> = (
   }
   const uiSchema = {
     nested1: {
-      'ui:indexable': ['1st', '2nd', '3rd'],
-      'ui:orderable': false
+      'ui:indexable': ['a/very/long_path/to.1st', '2nd', '3rd'],
+      'ui:orderable': true
     }
   }
   return render(schema, uiSchema)
 }
 
-export const IndexableArrayWithLongPredefinedLabels: ComponentStory<typeof Form> = () => {
+export const IndexableArrayWithHighObjectItem: ComponentStory<typeof Form> = () => {
   const schema: JSONSchema7 = {
     type: 'object',
     properties: {
       nested1: {
         type: 'array',
-        title: 'Array of string',
+        title: 'Array of object',
         items: {
-          type: 'string'
+          type: 'object',
+          properties: {
+            prop1: {
+              type: 'string'
+            },
+            prop2: {
+              type: 'string'
+            },
+            prop3: {
+              type: 'string'
+            },
+            prop4: {
+              type: 'string'
+            },
+            prop5: {
+              type: 'string'
+            },
+            prop6: {
+              type: 'string'
+            }
+          }
         }
       }
     },
     additionalProperties: false
   }
   const uiSchema = {
     nested1: {
-      'ui:indexable': ['a/very/long_path/to.1st', '2nd', '3rd'],
+      'ui:indexable': ['1st', '2nd', '3rd'],
       'ui:orderable': true
     }
   }
-  return render(schema, uiSchema)
+  const formData = {
+    nested1: [
+      {
+        prop1: 'a',
+        prop2: 'a',
+        prop3: 'a',
+        prop4: 'a',
+        prop5: 'a',
+        prop6: 'a'
+      }
+    ]
+  }
+  return render(schema, uiSchema, formData)
 }
diff --git a/packages/form/src/ArrayFieldTemplate.tsx b/packages/form/src/ArrayFieldTemplate.tsx
@@ -126,10 +126,13 @@ const DefaultArrayItem = (props: any) => {
     paddingRight: 6,
     fontWeight: 'bold'
   }
+  /* New code not found in https://github.com/rjsf-team/react-jsonschema-form */
+  const childType = props.children.props.schema.type
+  const potentiallyHighChild = (childType === 'object' || childType === 'array')
+  const verticalAlign = potentiallyHighChild ? 'align-items-top' : 'align-items-center'
   return (
     <div key={props.key}>
-      <Row className='mb-2  d-flex align-items-center'>
-        {/* New code not found in https://github.com/rjsf-team/react-jsonschema-form */}
+      <Row className={`mb-2 d-flex ${verticalAlign}`}>
         {props.indexable
           ? (
             <>