[example-studio] Add an example of a custom object input that renders its child fields (#152)

Author: bjoerge

packages/example-studio/components/CustomObjectInput.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import FormField from 'part:@sanity/components/formfields/default'
+import {setIfMissing} from '@sanity/form-builder/PatchEvent'
+import {FormBuilderInput} from 'part:@sanity/form-builder'
+
+export default class CustomObjectInput extends React.PureComponent {
+  static propTypes = {
+    type: PropTypes.shape({
+      title: PropTypes.string,
+      name: PropTypes.string
+    }).isRequired,
+    level: PropTypes.number,
+    value: PropTypes.shape({
+      _type: PropTypes.string
+    }),
+    onChange: PropTypes.func.isRequired
+  }
+
+  handleFieldChange = (field, fieldPatchEvent) => {
+    const {onChange, type} = this.props
+    onChange(fieldPatchEvent
+      .prefixAll(field.name)
+      .prepend(
+        setIfMissing({_type: type.name}),
+      )
+    )
+  }
+
+  render() {
+    const {type, value, level} = this.props
+    return (
+      <FormField
+        label={type.title}
+        level={level}
+        description={type.description}
+      >
+        This is my custom object input with fields
+        <fieldset style={{backgroundColor: 'lightblue'}}>
+          {type.fields.map(field => (
+            // Delegate to the generic FormBuilderInput. It will resolve and insert the actual input component
+            // for the given field type
+            <FormBuilderInput
+              key={field.name}
+              type={field.type}
+              value={value && value[field.name]}
+              onChange={patchEvent => this.handleFieldChange(field, patchEvent)}
+            />
+          )
+          )}
+        </fieldset>
+      </FormField>
+    )
+  }
+}

packages/example-studio/schemas/customObject.js

@@ -0,0 +1,30 @@
+import CustomObjectInput from '../components/CustomObjectInput'
+
+export default {
+  type: 'object',
+  name: 'customObject',
+  title: 'Custom object',
+  fields: [
+    {
+      name: 'identifier',
+      type: 'string',
+      title: 'Identifier'
+    },
+    {
+      name: 'metadata',
+      type: 'object',
+      title: 'Some metadata',
+      fields: [
+        {name: 'name', type: 'string'},
+        {name: 'title', type: 'string'}
+      ]
+    },
+    {
+      name: 'image',
+      type: 'image',
+      title: 'Image',
+      description: 'Some image'
+    }
+  ],
+  inputComponent: CustomObjectInput
+}

packages/example-studio/schemas/schema.js

@@ -7,13 +7,15 @@ import videoEmbed from './videoEmbed'
 import localeString from './localeString'
 import localeSlug from './localeSlug'
 import protein from './protein'
+import customObject from './customObject'
 
 export default createSchema({
   name: 'example-blog',
   types: [
     blogpost,
     author,
     code,
+    customObject,
     localeString,
     localeSlug,
     videoEmbed,