// _app.js

import React from 'react'
import App from 'next/app'
import { Tina, TinaCMS } from 'tinacms'
import { GitClient } from '@tinacms/git-client'
/*
 ** 1. 导入自定义字段组件
 */
import RangeInput from '../components/RangeInput'

/*
 ** 2. 定义字段插件
 */
const customFieldPlugin = {
  name: 'range-input',
  Component: RangeInput,
}

export default class Site extends App {
  constructor() {
    super()
    this.cms = new TinaCMS({
      enabled: process.env.NODE_ENV !== 'production',
      apis: {
        git: new GitClient('/___tina'),
      },
      sidebar: {
        position: 'overlay',
      },
    })
    /*
     ** 3. 将插件注册到cms
     */
    this.cms.fields.add(customFieldPlugin)
  }

  render() {
    //...
  }
}

interface FieldPlugin {
  name: string
  Component: React.FC<any>
  type?: string
  validate?(
    value: any,
    allValues: any,
    meta: any,
    field: Field
  ): string | object | undefined
  parse?: (value: any, name: string, field: Field) => any
  format?: (value: any, name: string, field: Field) => any
}

/*
** 1. 移除自定义字段组件的导入
*/
- import RangeInput from '../components/RangeInput'
import React from 'react'
import { useLocalJsonForm } from 'next-tinacms-json'

export default function Index(props) {
  //...
}

const formOptions = {
 fields: [
   /*
   ** 2. 引用字段插件`name`而不是直接传递自定义组件
   */
   {
     label: '图像饱和度',
     name: 'saturation',
-    component: RangeInput
+    component: 'range-input'
   }
 ]
}

Index.getInitialProps = async function() {
  //...
}