ball_admin/src/components/form/simple_form.tsx

import { Checkbox, DatePicker, Form, Input, InputNumber, Radio } from "antd";
import { useEffect } from "react";
import { FormType, SimpleFormData } from "./interface";
import { FormSelect } from "./select";
import AliUpload from "../ali_upload";
import MyEditor from "../edittor";
import MapFrom from "../map/MapFrom";
// import VideoSelect from "../video_select";
const { TextArea } = Input;
const SimpleForm = (props: SimpleFormData) => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    props.onFinish(values);
  };
  useEffect(() => {
    if (props.createCallback) {
      props.createCallback();
    }
  }, [props]);

  return (
    <Form
      name={props.formName}
      ref={props.formRef}
      autoComplete="on"
      form={form}
      labelCol={{ span: props.span ?? 4 }}
      wrapperCol={{ span: props.colProps }}
      layout="horizontal"
      initialValues={{ menubar: true }}
      onFinish={onFinish}
    >
      {props.childrenPosi ? null : props.children ?? props.children}
      {props.formDatas.map((v) => {
        switch (v.type) {
          case FormType.input:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input />
              </Form.Item>
            );
          case FormType.inputNumber:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <InputNumber />
              </Form.Item>
            );
          case FormType.password:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input.Password />
              </Form.Item>
            );
          case FormType.cehckbox:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
            );
          case FormType.cehckboxGroup:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Checkbox.Group
                  options={v.checkboxData}
                  onChange={(res) => {
                    form.setFieldValue(v.name, res);
                  }}
                />
              </Form.Item>
            );

          case FormType.select:
            return FormSelect(v);
          case FormType.upload:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                valuePropName="fileList"
                name={v.name}
                rules={v.rules}
                initialValue={v.value}
                getValueFromEvent={(e) => {
                  if (Array.isArray(e)) {
                    return e;
                  }
                  return e && e.fileList;
                }}
              >
                <AliUpload
                  imgList={form.getFieldValue(v.name) ?? []}
                  onChnage={(res) => {
                    form.setFieldValue(v.name, res);
                  }}
                />
              </Form.Item>
            );
          case FormType.textarea:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <TextArea
                  value={v.name}
                  placeholder="Controlled autosize"
                  autoSize={{ minRows: 3, maxRows: 5 }}
                />
              </Form.Item>
            );
          case FormType.editor:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <MyEditor
                  value={v.value}
                  onChange={function (value: string): void {
                    form.setFieldValue(v.name, value);
                  }}
                />
              </Form.Item>
            );
          case FormType.radio:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Radio.Group>
                  {v.radioData?.map((item) => (
                    <Radio key={item.val} value={item.val}>
                      {item.key}
                    </Radio>
                  ))}
                </Radio.Group>
              </Form.Item>
            );
          case FormType.date:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <DatePicker />
              </Form.Item>
            );
          case FormType.map:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <MapFrom
                  onChange={(m) => {
                    form.setFieldValue(v.name, m);
                  }}
                />
              </Form.Item>
            );
          default:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input defaultValue={v.value} value={v.value} />
              </Form.Item>
            );
        }
      })}
      {props.childrenPosi ? props.children ?? props.children : null}
    </Form>
  );
};

export default SimpleForm;