#ProForm Advanced Form

// Set overall default values
<ProForm initialValues={obj} />

// Set the individual control's
<ProForm
 onValuesChange={(changeValues) => console.log(changeValues)}
>
  <ProFormText initialValue="prop"/>
</ProForm>

// Interdependent component linkage
<ProForm>
  <Form.Item noStyle shouldUpdate>
    {(form) => {
      return (
        <ProFormSelect
          options={[
            {
              value: "chapter",
              label: "Effective when stamped",
            },
          ]}
          width="md"
          name="useMode"
          label={`Agreement with "${form.getFieldValue('name') || '—'}"`}
        />
      );
    }}
  </Form.Item>
</ProForm>;


// Using custom components
<ProForm>
  <Form.Item name="switch" label="Switch" valuePropName="checked">
    <Switch />
  </Form.Item>
</ProForm>

   export type SearchConvertKeyFn =
    (value: any, field: NamePath)=>string | boolean | Record<string, any>;
  /**
   * @name Converts the value when getting it, generally used to format the data into the format received by the component
   * @param value field value
   * @param namePath field name
   * @returns the new value of the field
   *
   * @example a,b => [a,b]
   * convertValue:(value,namePath)=>value.split(",")
   * @example string =>json
   * convertValue:(value,namePath)=>JSON.parse(value)
   * @example number =>date
   * convertValue:(value,namePath)=>Moment(value)
   * @example YYYY-MM-DD => date
   * convertValue:(value,namePath)=>Moment(value,"YYYY-MM-DD")
   * @example  string => object
   * convertValue:(value,namePath)=>({value,label:value})
   */
  convertValue?: SearchConvertKeyFn;

<ProFormDependency>
  {(value, form) => {
    // value is transformed by transform
    // form's current formRef, you can get the unconverted value
    return ReactNode;
  }}
</ProFormDependency>

  /** Get all data formatted by ProForm */
  getFieldsFormatValue?: (nameList?: true) => T;
  /** Get the single data after formatting */
  getFieldFormatValue?: (nameList?: NamePath) => T;
  /** Get the single data after formatting */
  getFieldFormatValueObject?: (nameList?: NamePath) => T;
  /** After validating the fields, return all the data after formatting */
  validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise<T>;

  export type SearchTransformKeyFn = (
    value: any,
    namePath: string[],
    allValues: any,
  ) => string | Record<string, any>;

  /**
   * @name Convert value when submitting, generally used to convert value into submitted data
   * @param value field value
   * @param namePath field name
   * @param allValues ​​all fields
   * The new value of the @returns field, if an object is returned, it will be merged with all values ​​once
   *
   * @example {name:[a,b] => {name:a,b }
   * transform: (value,namePath,allValues)=> value.join(",")
   * @example {name: string => { newName:string }
   * transform: (value,namePath,allValues)=> { newName:value }
   * @example {name:moment} => {name:string
   * transform: (value,namePath,allValues)=> value.format("YYYY-MM-DD")
   * @example {name:moment}=> {name:timestamp}
   * transform: (value,namePath,allValues)=> value.valueOf()
   * @example {name:{value,label}} => { name:string}
   * transform: (value,namePath,allValues)=> value.value
   * @example {name:{value,label}} => { valueName,labelName  }
   * transform: (value)=>{valueName:value.value,labelName:value.name}
   */
  transform?: SearchTransformKeyFn;

<ProFormText name="name" transform={(value) => `${value}:suffix`} />
// Submit: { name: 'xxx:suffix' }

import { set } from '@rc-component/util';

// Write back to the same nested path (recommended)
<ProFormText
  name={['company', 'name']}
  transform={(value) => set({}, ['company', 'name'], `${value}:suffix`)}
/>
// Submit: { company: { name: 'xxx:suffix' } }

// Rename key example: name -> displayName
<ProFormText
  name="name"
  transform={(value) => ({ displayName: value })}
/>
// Submit: { displayName: 'xxx' } (note: this changes the output shape)

  /**
   * Get all data formatted by ProForm
   * @param nameList boolean
   * @param omitNil boolean whether to ignore null and undefined
   * @returns T
   *
   * @example getFieldsFormatValue() -> returns all data
   * @example getFieldsFormatValue(true) -> returns all data, even if not hosted by form
   * @example getFieldsFormatValue(true, true) -> returns all data, ignoring null and undefined
   */
  getFieldsFormatValue?: (nameList?: true, omitNil?: boolean) => T;
  /**
   * Get a single data formatted by ProForm
   * @param nameList (string|number)[]
   * @returns T
   * @example {a:{b:value}} -> getFieldFormatValue(['a', 'b']) -> value
   */
  /** Get the single data after formatting */
  getFieldFormatValue?: (nameList?: NamePath) => T;
  /**
   * Get the single data formatted by ProForm, including his name
   * @param nameList (string|number)[]
   * @returns T
   * @example
   * {a:{b:value}} -> getFieldFormatValueObject(['a', 'b']) -> {a:{b:value}}
   */
  getFieldFormatValueObject?: (nameList?: NamePath) => T;
  /**
   * Return all data after formatting after field validation
   * @param nameList (string|number)[]
   * @returns T
   *
   * @example validateFieldsReturnFormatValue -> {a:{b:value}}
   */
  validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise<T>;

<ProForm
  submitter={{
    // Configure the button text
    searchConfig: {
      resetText: 'Reset',
      submitText: 'Submit',
    },
    // Configure the properties of the button
    resetButtonProps: {
      style: {
        // Hide the reset button
        display: 'none',
      },
    },
    submitButtonProps: {},

    // Fully customize the entire area
    render: (props, doms) => {
      console.log(props);
      return [
        <button
          type="button"
          key="rest"
          onClick={() => props.form?.resetFields()}
        >
          Reset
        </button>,
        <button
          type="button"
          key="submit"
          onClick={() => props.form?.submit?.()}
        >
          Submit
        </button>,
      ];
    },
  }}
/>

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, message, Space } from 'antd';
import moment from 'dayjs';
import { useRef } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const formRef = useRef<ProFormInstance>();
  const onFill = () => {
    formRef?.current?.setFieldsValue({
      name: 'Zhang San',
      company: 'Ant Financial',
    });
  };

  const getCompanyName = () => {
    message.info(
      `Company name is "${formRef?.current?.getFieldValue('company')}"`,
    );
  };

  const getFormatValues = () => {
    console.log(
      'All data after formatting:',
      formRef.current?.getFieldsFormatValue?.(),
    );
  };

  const validateAndGetFormatValue = async () => {
    const values = await formRef.current?.validateFieldsReturnFormatValue?.();
    console.log('Validate form and return all formatted data:', values);
  };

  return (
    <ProForm
      title="Create Form"
      formRef={formRef}
      submitter={{
        render: (props, doms) => {
          return [
            ...doms,
            <Button htmlType="button" onClick={onFill} key="edit">
              One-click Fill
            </Button>,
            <Button htmlType="button" onClick={getCompanyName} key="read">
              Read Company
            </Button>,
            <Space.Compact key="refs" style={{ display: 'block' }}>
              <Button htmlType="button" onClick={getFormatValues} key="format">
                Get all formatted data
              </Button>
              <Button
                htmlType="button"
                onClick={validateAndGetFormatValue}
                key="format2"
              >
                Validate form and return all formatted data
              </Button>
            </Space.Compact>,
          ];
        },
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        message.success('Submission successful');
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="Contract Customer Name"
        tooltip="Max 24 characters"
        placeholder="Please enter name"
      />

      <ProFormText
        width="md"
        name="company"
        label="Our Company Name"
        placeholder="Please enter name"
      />
      <ProFormDatePicker name="date" initialValue={moment('2021-08-09')} />
    </ProForm>
  );
};