Thanks for this! Exactly what I needed.

This is useful, but all the inline objects need to be separated out and defined as a global schema type for use with GraphQL which is not ideal since they are specific to the parent object (link in this case).

I found the same issue. Is there a way to use this solution with GraphQL?

Hey! Perfect. Currently, I try to wrap my head around building a custom input component, based on a document.
I still wonder if I need to do it in a class component. However, let me describe my problem.

What I try to achieve: Set a document were I define all the fields that need to be rendered (reviewTemplate).
-> create another document (review) where I select the template and the field will be rendered accordingly.

The Input fields shall show up like a "native" sanity ui component.

It works with an HTML input field. but on every change event, it loses the focus and I have to click the input field again to type any further (just one character at a time).
So I played around with the formbuilderinput. But unfortunately, this error message pops up: func.apply is not a function.

Is this the right place to comment with code? Or where can I ask for help? Do you have documentations for the api to
build such a custom form?

THX. :)

import React, { Component } from 'react'
import { withDocument } from 'part:@sanity/form-builder'
import FormField from 'part:@sanity/components/formfields/default'
import Fieldset from 'part:@sanity/components/fieldsets/default'
import { FormBuilderInput } from 'part:@sanity/form-builder'
import { Document, Type } from '../../@types'
import PatchEvent, { set, unset } from 'part:@sanity/form-builder/patch-event'
import client from 'part:@sanity/base/client'
import { v4 } from 'uuid'
interface InputComponentProps {
  type: Type
  document?: Document
  value: any | any[]
  onChange: Function
  markers: any[]
  level: number
  onBlur: Function
}

interface Evaluation {
  document: {
    productReviewFeatures: any
  }
}

const EvaluationContainer: React.FC = ({
  type,
  document,
  value,
  markers,
  level,
  onChange,
  onBlur,
  onFocus,
  focusPath
}) => {
  const { productReviewFeatures } = document
  const { title, description } = type
  console.log('focus path', focusPath)
  const [isLoading, setIsloading] = React.useState<Boolean>(true)
  const [evaluationFeatures, setEvaluationFeautures] = React.useState([])
  const [evaluation, setEvaluation] = React.useState([])

  const getSubEvaluationStructure = subFeatures => {
    let subFeatureStructure = []
    subFeatures.map(sub => {
      subFeatureStructure.push({
        _type: 'evaluation',
        type: sub.type,
        name: sub.name
      })
    })
    return subFeatureStructure
  }

  const getMainEvaluationStructure = mainFeatures => {
    let mainEvaluationStructure = []
    mainFeatures.map(mainFeature => {
      console.log('mainFeature', mainFeature)
      mainEvaluationStructure.push({
        _type: 'mainFeatureEvaluation',
        name: mainFeature.name,
        subFeatureEvaluation: getSubEvaluationStructure(
          mainFeature.subFeatureEvaluation || mainFeature.subFeatures
        )
      })
    })

    return mainEvaluationStructure
  }

  React.useEffect(async () => {
    if (productReviewFeatures && productReviewFeatures._ref) {
      try {
        const document = await client.fetch(`*[_id =="${productReviewFeatures._ref}"][0]`)
        if (document && document.mainFeatures) {
          console.log('document', document)
          setEvaluationFeautures(document.mainFeatures)
          setEvaluation(
            getMainEvaluationStructure(document.reviewEvaluation || document.mainFeatures)
          )
          setIsloading(false)
        }
      } catch (error) {
        console.log(error)
      }
    }
  }, [productReviewFeatures._ref])

  if (isLoading) {
    return <div>Data Loading</div>
  }

  const handleChange = (event, { j, i }) => {
    const newEvaluation = evaluation

    console.log('handle', (newEvaluation[j].subFeatureEvaluation[i].value = event.target.value))
    setEvaluation([...newEvaluation])
    console.log('evaluation', evaluation)
    onChange(PatchEvent.from(set(evaluation)))
  }

  console.log('value', value)

  return (
    <Fieldset legend={title} description={description}>
      {evaluationFeatures &&
        evaluationFeatures.map((feature, j) => {
          return (
            <div key={v4()}>
              <p>{feature.name}</p>
              {feature.subFeatures &&
                feature.subFeatures.map((subFeature, i) => (
                  <FormField label={subFeature.name} description={subFeature.description}>
                    <input
                      type="text"
                      value={value[j].subFeatureEvaluation[i].value}
                      name={subFeature.name}
                      onChange={event => handleChange(event, { j, i })}
                    />
                    <FormBuilderInput
                      level={level + 1}
                      ref={i === 0 ? React.createRef() : null}
                      key={subFeature.name}
                      type={subFeature.type}
                      value={value[j].subFeatureEvaluation[i].value}
                      onChange={event => handleChange(event, { j, i })}
                      path={[`${j}${i}`]}
                      focusPath={focusPath}
                      onFocus={onFocus}
                      onBlur={onBlur}
                    />
                  </FormField>
                ))}
            </div>
          )
        })}
    </Fieldset>
  )
}

const exportData = [
  {
    type: 'mainFeature',
    title: 'Connectivity',
    subFeature: [{ title: 'Bluetooth', type: 'Boolen', value: true }]
  },
  { type: 'mainFeature', subFeature: [{ title: 'Bluetooth', type: 'Boolen', value: true }] }
]

export default withDocument(EvaluationContainer)