Function DetailsPanel

packages/form-devtools/src/components/DetailsPanel.tsx:14–140

({ selectedKey }: DetailsPanelProps)

}

export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
  const styles = useStyles()
  const { store } = useFormEventClient()

  const selectedInstance = createMemo(() => {
    const key = selectedKey()
    return key
      ? (store.formState.find((form) => form.id === key) ?? null)
      : null
  })

  const state = createMemo(() => selectedInstance()?.state)
  const history = createMemo(() => selectedInstance()?.history)

  const sections = createMemo(() => [
    {
      title: 'Form options',
      value: selectedInstance()?.options,
    },
    {
      title: 'Form values',
      value: state()?.values,
    },
    {
      title: 'Form Interactions',
      value: {
        isPristine: state()?.isPristine,
        isTouched: state()?.isTouched,
        isDirty: state()?.isDirty,
        isDefaultValue: state()?.isDefaultValue,
        isBlurred: state()?.isBlurred,
      },
    },
    {
      title: 'Form Status',
      value: {
        canSubmit: state()?.canSubmit,
        isFormValid: state()?.isFormValid,
        isFormValidating: state()?.isFormValidating,
        isSubmitted: state()?.isSubmitted,
        isSubmitting: state()?.isSubmitting,
        isSubmitSuccessful: state()?.isSubmitSuccessful,
        submissionAttempts: state()?.submissionAttempts,
        errors: state()?.errors,
        errorMap: state()?.errorMap,
      },
    },
    {
      title: 'Field Status',
      value: {
        isFieldsValid: state()?.isFieldsValid,
        isFieldsValidating: state()?.isFieldsValidating,
        fieldMeta: state()?.fieldMeta,
      },
    },
    {
      title: 'Submission history',
      value: history(),