ohmyform-ui/components/form/admin/field.card.tsx

import {DeleteOutlined} from '@ant-design/icons/lib'
import {Button, Card, Checkbox, Form, Input, Popconfirm, Tag} from 'antd'
import {FormInstance} from 'antd/lib/form'
import {FieldData} from 'rc-field-form/lib/interface'
import React, {useEffect, useState} from 'react'
import {useTranslation} from 'react-i18next'
import {AdminFormFieldFragment} from '../../../graphql/fragment/admin.form.fragment'
import {adminTypes} from './types'
import {TextType} from './types/text.type'

interface Props {
  form: FormInstance
  fields: AdminFormFieldFragment[]
  onChangeFields: (fields: AdminFormFieldFragment[]) => any
  field: FieldData
  remove: (index: number) => void
  index: number
}

export const FieldCard: React.FC<Props> = props => {
  const { t } = useTranslation()
  const {
    form,
    field,
    fields,
    onChangeFields,
    remove,
    index,
  } = props

  const type = form.getFieldValue(['form', 'fields', field.name as string, 'type'])
  const TypeComponent = adminTypes[type] || TextType

  const [nextTitle, setNextTitle] = useState(form.getFieldValue(['form', 'fields', field.name as string, 'title']))

  useEffect(() => {
    const id = setTimeout(() => {
      onChangeFields(fields.map((field, i) => {
        if (i === index) {
          return {
            ...field,
            title: nextTitle,
          }
        } else {
          return field
        }
      }))
    }, 500)

    return () => clearTimeout(id)
  }, [nextTitle])

  return (
    <Card
      title={nextTitle}
      type={'inner'}
      extra={(
        <div>
          <Tag color={'blue'}>{t(`type:${type}.name`)}</Tag>
          <Popconfirm
            placement={'left'}
            title={t('type:confirmDelete')}
            okText={t('type:deleteNow')}
            okButtonProps={{ danger: true }}
            onConfirm={() => {
              remove(index)
              onChangeFields(fields.filter((e, i) => i !== index))
            }}
          >
            <Button danger><DeleteOutlined /></Button>
          </Popconfirm>
        </div>
      )}
      actions={[
        <DeleteOutlined key={'delete'} onClick={() => remove(index)} />
      ]}
    >
      <Form.Item name={[field.name as string, 'type']} noStyle><Input type={'hidden'} /></Form.Item>
      <Form.Item
        label={t('type:title')}
        name={[field.name as string, 'title']}
        rules={[
          { required: true, message: 'Title is required' }
        ]}
        labelCol={{ span: 6 }}
      >
        <Input onChange={e => setNextTitle(e.target.value)}/>
      </Form.Item>
      <Form.Item
        label={t('type:description')}
        name={[field.name as string, 'description']}
        labelCol={{ span: 6 }}
      >
        <Input.TextArea autoSize />
      </Form.Item>
      <Form.Item
        label={t('type:required')}
        name={[field.name as string, 'required']}
        labelCol={{ span: 6 }}
        valuePropName={'checked'}
        extra={type === 'hidden' && t('type:requiredInfo')}
      >
        <Checkbox />
      </Form.Item>

      <TypeComponent
        field={field}
        form={form}
      />
    </Card>
  )
}