#ProForm 高级表单

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  BetaSchemaForm,
  ModalForm,
  ProCard,
  ProForm,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import { Alert, Button, Space, Tabs, Typography, message } from 'antd';
import { useRef, useState } from 'react';

const toList = (value: Record<string, string>) =>
  Object.entries(value).map(([key, itemValue]) => ({
    key,
    value: itemValue,
  }));

const ListConvertValue = () => {
  const formRef = useRef<ProFormInstance>();
  return (
    <ProForm
      formRef={formRef}
      submitter={false}
      initialValues={{ configs: { first: 'one', second: 'two' } }}
    >
      <Space style={{ marginBlockEnd: 16 }}>
        <Button
          onClick={() =>
            formRef.current?.setFieldsValue({ configs: { third: 'three' } })
          }
        >
          setFieldsValue 写入对象
        </Button>
        <Typography.Text type="secondary">
          对象会在初始值及外部写入时转换为列表。
        </Typography.Text>
      </Space>
      <ProFormList name="configs" convertValue={toList}>
        <ProFormText name="key" label="Key" />
        <ProFormText name="value" label="Value" />
      </ProFormList>
    </ProForm>
  );
};

const RequestReuse = () => {
  const [id, setId] = useState(0);
  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Space>
        {[0, 1, 0].map((value, index) => (
          <Button key={`${value}-${index}`} onClick={() => setId(value)}>
            参数 {value}
          </Button>
        ))}
      </Space>
      <ProForm
        key="request-reuse-form"
        params={{ id }}
        request={async ({ id: requestId }) => ({
          name: `服务端返回：参数 ${requestId}（${new Date().toLocaleTimeString()}）`,
        })}
        submitter={false}
      >
        <ProFormText name="name" label="请求结果" width="lg" />
      </ProForm>
    </Space>
  );
};

const OverlayInitialization = () => {
  const [open, setOpen] = useState(false);
  const [record, setRecord] = useState({ name: 'Alice' });
  return (
    <Space>
      {['Alice', 'Bob'].map((name) => (
        <Button
          key={name}
          onClick={() => {
            setRecord({ name });
            setOpen(true);
          }}
        >
          编辑 {name}
        </Button>
      ))}
      <ModalForm
        open={open}
        onOpenChange={setOpen}
        initialValues={record}
        request={async () => record}
        title="受控弹窗初始化"
        onFinish={async ({ name }) => {
          message.success(`已保存 ${name}`);
          return true;
        }}
      >
        <ProFormText name="name" label="姓名" />
      </ModalForm>
    </Space>
  );
};

export default () => (
  <ProCard direction="column" ghost gutter={[0, 16]}>
    <Alert
      type="info"
      showIcon
      message="表单初始化与转换回归场景"
      description="覆盖弹层初始化、ProFormList convertValue、SchemaForm 独立宽度及重复参数请求。"
    />
    <ProCard>
      <Tabs
        items={[
          {
            key: 'overlay',
            label: '弹层初始化',
            children: <OverlayInitialization />,
          },
          {
            key: 'list',
            label: '列表转换 #8702',
            children: <ListConvertValue />,
          },
          {
            key: 'schema',
            label: 'SchemaForm 宽度 #9061',
            children: (
              <BetaSchemaForm
                submitter={false}
                columns={[
                  {
                    title: '表格列宽 80，表单宽度 328',
                    dataIndex: 'title',
                    width: 80,
                    formWidth: 328,
                  },
                ]}
              />
            ),
          },
          {
            key: 'request',
            label: '重复参数请求 #8375',
            children: <RequestReuse />,
          },
        ]}
      />
    </ProCard>
  </ProCard>
);

import {
  AlipayCircleOutlined,
  LockOutlined,
  PlusOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import {
  DrawerForm,
  LightFilter,
  LoginForm,
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  QueryFilter,
  StepsForm,
} from '@ant-design/pro-components';
import { Button, Space, message } from 'antd';
import { useState } from 'react';

const iconStyles = {
  marginInlineStart: '16px',
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '24px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};

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

const Demo = () => {
  const Components = {
    ProForm,
    ModalForm,
    DrawerForm,
    QueryFilter,
    LightFilter,
    StepsForm,
    LoginForm,
  };
  const [type, setType] = useState<keyof typeof Components>('ProForm');

  if (type === 'StepsForm') {
    return (
      <>
        <ProFormRadio.Group
          style={{
            margin: 16,
          }}
          radioType="button"
          fieldProps={{
            value: type,
            onChange: (e) => setType(e.target.value),
          }}
          options={[
            'LightFilter',
            'ProForm',
            'ModalForm',
            'DrawerForm',
            'QueryFilter',
            'StepsForm',
            'LoginForm',
          ]}
        />
        <StepsForm
          onFinish={async () => {
            await waitTime(2000);

            message.success('Submission successful');
          }}
        >
          <StepsForm.StepForm title="Step One">
            <ProForm.Group>
              <ProFormText
                width="md"
                name="name"
                label="Contract Customer Name"
                tooltip="Up to 24 characters"
                placeholder="Please enter a name"
              />
              <ProFormText
                width="md"
                name="company"
                label="Our Company Name"
                placeholder="Please enter a name"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                name={['contract', 'name']}
                width="md"
                label="Contract Name"
                placeholder="Please enter a name"
              />
              <ProFormDateRangePicker
                width="md"
                name={['contract', 'createTime']}
                label="Contract Effective Time"
              />
            </ProForm.Group>
          </StepsForm.StepForm>
          <StepsForm.StepForm title="Step Two">
            <ProForm.Group>
              <ProFormSelect
                options={[
                  {
                    value: 'chapter',
                    label: 'Effective after stamping',
                  },
                ]}
                readonly
                width="xs"
                name="useMode"
                label="Contract Agreed Effective Method"
              />
              <ProFormSelect
                width="xs"
                options={[
                  {
                    value: 'time',
                    label: 'Terminate after performance',
                  },
                ]}
                name="unusedMode"
                label="Contract Agreed Invalid Method"
              />
            </ProForm.Group>
          </StepsForm.StepForm>
          <StepsForm.StepForm title="Step Three">
            <ProFormText width="sm" name="id" label="Main Contract Number" />
            <ProFormText
              name="project"
              width="md"
              disabled
              label="Project Name"
              initialValue="示例项目"
            />
            <ProFormText
              width="xs"
              name="mangerName"
              disabled
              label="Business Manager"
              initialValue="书琰"
            />
          </StepsForm.StepForm>
        </StepsForm>
      </>
    );
  }

  const FormComponents = Components[type as 'LoginForm'];

  if (type === 'LoginForm') {
    return (
      <>
        <ProFormRadio.Group
          style={{
            margin: 16,
          }}
          radioType="button"
          fieldProps={{
            value: type,
            onChange: (e) => setType(e.target.value),
          }}
          options={[
            'LightFilter',
            'ProForm',
            'ModalForm',
            'DrawerForm',
            'QueryFilter',
            'StepsForm',
            'LoginForm',
          ]}
        />
        <FormComponents
          title="Github"
          subTitle="The world's largest code hosting platform"
          actions={
            <Space>
              Other login methods
              <AlipayCircleOutlined style={iconStyles} />
              <TaobaoCircleOutlined style={iconStyles} />
              <WeiboCircleOutlined style={iconStyles} />
            </Space>
          }
        >
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={'prefixIcon'} />,
            }}
            placeholder={'Username: admin or user'}
            rules={[
              {
                required: true,
                message: 'Please enter your username!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />,
            }}
            placeholder={'Password: ant.design'}
            rules={[
              {
                required: true,
                message: 'Please enter your password!',
              },
            ]}
          />
        </FormComponents>
      </>
    );
  }

  return (
    <>
      <ProFormRadio.Group
        style={{
          margin: 16,
        }}
        radioType="button"
        fieldProps={{
          value: type,
          onChange: (e) => setType(e.target.value),
        }}
        options={[
          'LightFilter',
          'ProForm',
          'ModalForm',
          'DrawerForm',
          'QueryFilter',
          'StepsForm',
          'LoginForm',
        ]}
      />
      <div
        style={{
          margin: 24,
        }}
      >
        <FormComponents
          // @ts-ignore
          labelWidth="auto"
          trigger={
            <Button type="primary">
              <PlusOutlined />
              New Form
            </Button>
          }
          onFinish={async () => {
            await waitTime(500);
            message.success('Submission successful');
          }}
          initialValues={{
            name: 'Ant Design Co., Ltd.',
            useMode: 'chapter',
          }}
        >
          <ProForm.Group>
            <ProFormText
              width="md"
              name="name"
              label="Contract Customer Name"
              tooltip="Up to 24 characters"
              placeholder="Please enter a name"
            />
            <ProFormText
              width="md"
              name="company"
              label="Our Company Name"
              placeholder="Please enter a name"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              name={['contract', 'name']}
              width="md"
              label="Contract Name"
              placeholder="Please enter a name"
            />
            <ProFormDateRangePicker
              width="md"
              name={['contract', 'createTime']}
              label="Contract Effective Time"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSelect
              options={[
                {
                  value: 'chapter',
                  label: 'Effective after stamping',
                },
              ]}
              readonly
              width="xs"
              name="useMode"
              label="Contract Agreed Effective Method"
            />
            <ProFormSelect
              width="xs"
              options={[
                {
                  value: 'time',
                  label: 'Terminate after performance',
                },
              ]}
              name="unusedMode"
              label="Contract Agreed Invalid Method"
            />
          </ProForm.Group>
          <ProFormText width="sm" name="id" label="Main Contract Number" />
          <ProFormText
            name="project"
            width="md"
            disabled
            label="Project Name"
            initialValue="示例项目"
          />
          <ProFormText
            width="xs"
            name="mangerName"
            disabled
            label="Business Manager"
            initialValue="书琰"
          />
          <ProFormDigit
            name="percent"
            label="Percent"
            width="xs"
            min={1}
            max={10}
            fieldProps={{
              precision: 2,
              addonAfter: '%',
            }}
          />
        </FormComponents>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormCascader,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormList,
  ProFormMoney,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { TreeSelect, message } from 'antd';
import moment from 'dayjs';
import { useRef } from 'react';

import { DEMO_AREA_CASCADER, DEMO_DEPARTMENT_TREE } from '../mockData';

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

const Demo = () => {
  const formRef = useRef<
    ProFormInstance<{
      name: string;
      company?: string;
      useMode?: string;
    }>
  >();
  return (
    <ProForm<{
      name: string;
      company?: string;
      useMode?: string;
    }>
      name="base-form-demo"
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        const val1 = await formRef.current?.validateFields();
        console.log('validateFields:', val1);
        const val2 = await formRef.current?.validateFieldsReturnFormatValue?.();
        console.log('validateFieldsReturnFormatValue:', val2);
        message.success('提交成功');
      }}
      formRef={formRef}
      params={{ id: '100' }}
      formKey="base-demo"
      dateFormatter={(value, _valueType) => {
        return value.format('YYYY/MM/DD HH:mm:ss');
      }}
      request={async () => {
        await waitTime(1500);
        return {
          name: '杭州星辰科技有限公司',
          useMode: 'chapter',
        };
      }}
      autoFocusFirstInput
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="name"
          required
          dependencies={[['contract', 'name']]}
          addonBefore={<a>如何获取客户名称？</a>}
          addonAfter={<a>点击查看更多</a>}
          label="签约客户名称"
          tooltip="最长 24 个字符"
          placeholder="请输入客户名称"
          rules={[{ required: true, message: '此项为必填项' }]}
        />
        <ProFormText
          width="md"
          name="company"
          label="我方公司名称"
          placeholder="请输入公司名称"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDigit name="count" label="项目团队人数" width="lg" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          name={['contract', 'name']}
          width="md"
          label="合同名称"
          placeholder="请输入合同名称"
        />
        <ProFormDateRangePicker
          width="md"
          name={['contract', 'createTime']}
          label="合同有效期"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          options={[
            {
              value: 'chapter',
              label: '盖章后生效',
            },
          ]}
          readonly
          width="xs"
          cacheForSwr
          name="useMode"
          label="合同约定生效方式"
        />
        <ProFormSelect.SearchSelect
          width="xs"
          options={[
            {
              value: 'time',
              label: '履行完毕后终止',
              type: 'time',
              options: [
                {
                  value: 'time1',
                  label: '履行完毕后终止（自动续期）',
                },
                {
                  value: 'time2',
                  label: '履行完毕后终止（不续期）',
                },
              ],
            },
          ]}
          name="unusedMode"
          label="合同约定失效方式"
        />
        <ProFormMoney
          width="md"
          name="money"
          label="合同签约金额"
          fieldProps={{
            numberPopoverRender: true,
          }}
        />
      </ProForm.Group>
      <ProFormText width="sm" name="id" label="主合同编号" />
      <ProFormText
        name="project"
        width="md"
        disabled
        label="关联项目"
        initialValue="智慧零售平台"
      />
      <ProFormTextArea
        colProps={{ span: 24 }}
        name="address"
        label="详细办公地址"
      />
      <ProFormText
        width="xs"
        name="mangerName"
        disabled
        label="商务经理"
        initialValue="期贤"
      />
      <ProFormCascader
        width="md"
        request={async () => DEMO_AREA_CASCADER as any}
        name="areaList"
        label="所在地区"
        initialValue={['zhejiang', 'hangzhou', 'binjiang']}
        addonAfter="区县"
      />
      <ProFormTreeSelect
        initialValue={['tech-fe']}
        label="所属部门"
        width={600}
        fieldProps={{
          fieldNames: {
            label: 'title',
          },
          treeData: DEMO_DEPARTMENT_TREE as any,
          treeCheckable: true,
          showCheckedStrategy: TreeSelect.SHOW_PARENT,
          placeholder: '请选择部门',
        }}
      />
      <ProFormDatePicker
        name="date"
        label="签约日期"
        transform={(value) => {
          return {
            date: moment(value).unix(),
          };
        }}
      />
      <ProFormList name="datas" label="补充条款">
        {() => {
          return (
            <>
              <ProFormDatePicker
                name="date"
                label="生效日期"
                transform={(value) => {
                  return {
                    date: moment(value).unix(),
                  };
                }}
              />

              <ProFormList name="innerDatas" label="子条款">
                {() => {
                  return (
                    <>
                      <ProFormDatePicker
                        name="date"
                        label="子条款生效日期"
                        transform={(value) => {
                          return {
                            date: moment(value).unix(),
                          };
                        }}
                      />
                    </>
                  );
                }}
              </ProFormList>
            </>
          );
        }}
      </ProFormList>
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import { ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Col, Row, Space, message } from 'antd';
import { useState } from 'react';

type LayoutType = Parameters<typeof ProForm>[0]['layout'];
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

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

const Demo = () => {
  const [formLayoutType, setFormLayoutType] = useState<LayoutType>(
    LAYOUT_TYPE_HORIZONTAL,
  );

  const formItemLayout =
    formLayoutType === LAYOUT_TYPE_HORIZONTAL
      ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
      : null;

  return (
    <ProForm<{
      name: string;
      company?: string;
      useMode?: string;
    }>
      name="form-layout-demo"
      {...formItemLayout}
      layout={formLayoutType}
      submitter={{
        render: (props, doms) => {
          return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
            <Row>
              <Col span={14} offset={4}>
                <Space>{doms}</Space>
              </Col>
            </Row>
          ) : (
            doms
          );
        },
      }}
      onFinish={async () => {
        await waitTime(2000);

        message.success('Submission successful');
      }}
      params={{}}
      request={async () => {
        await waitTime(100);
        return {
          name: 'Ant Design Co., Ltd.',
          useMode: 'chapter',
        };
      }}
    >
      <ProFormRadio.Group
        style={{
          margin: 16,
        }}
        label="Label Layout"
        radioType="button"
        fieldProps={{
          value: formLayoutType,
          onChange: (e) => setFormLayoutType(e.target.value),
        }}
        options={['horizontal', 'vertical', 'inline']}
      />
      <ProFormText
        width="md"
        name="name"
        label="Contract Customer Name"
        tooltip="Up to 24 characters"
        placeholder="Please enter a name"
      />
      <ProFormText
        width="md"
        name="company"
        label="Our Company Name"
        placeholder="Please enter a name"
      />
      <ProFormText
        name={['contract', 'name']}
        width="md"
        label="Contract Name"
        placeholder="Please enter a name"
      />
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Col, Row, Space, message } from 'antd';
import { useState } from 'react';
import type { FormLayout } from '../../src/utils/antdTypes';

const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

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

const Demo = () => {
  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(
    LAYOUT_TYPE_HORIZONTAL,
  );

  const [grid, setGrid] = useState(true);

  return (
    <ProForm<{
      name: string;
      company?: string;
      useMode?: string;
    }>
      layout={formLayoutType}
      grid={grid}
      rowProps={{
        gutter: [16, formLayoutType === 'inline' ? 16 : 0],
      }}
      submitter={{
        render: (props, doms) => {
          return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
            <Row>
              <Col span={14} offset={4}>
                <Space>{doms}</Space>
              </Col>
            </Row>
          ) : (
            doms
          );
        },
      }}
      onFinish={async () => {
        await waitTime(2000);

        message.success('Submission successful');
      }}
      params={{}}
      request={async () => {
        await waitTime(100);
        return {
          name: 'Ant Design Co., Ltd.',
          useMode: 'chapter',
        };
      }}
    >
      <ProFormRadio.Group
        label="Label Layout"
        radioType="button"
        fieldProps={{
          value: formLayoutType,
          onChange: (e) => setFormLayoutType(e.target.value),
        }}
        colProps={{
          span: 20,
        }}
        options={['horizontal', 'vertical', 'inline']}
      />
      <ProFormSwitch
        colProps={{
          span: 4,
        }}
        fieldProps={{
          onChange: setGrid,
        }}
        initialValue={true}
        label="Grid Switch"
        name="grid"
      />
      <ProFormText
        name="name"
        label="Title"
        tooltip="Up to 24 characters"
        placeholder="Please enter a name"
      />
      <ProFormText colProps={{ md: 12, xl: 8 }} name="company" label="Name" />
      <ProFormDigit colProps={{ md: 12, xl: 8 }} name="phone" label="Phone" />
      <ProFormText colProps={{ md: 12, xl: 8 }} name="email" label="Email" />
      <ProFormTextArea
        colProps={{ span: 24 }}
        name="address"
        label="Detailed Work Address or Home Address"
      />
      <ProFormDatePicker
        colProps={{ xl: 8, md: 12 }}
        label="Entry Date"
        name="date"
      />
      <ProFormDateRangePicker
        colProps={{ xl: 8, md: 12 }}
        label="Work Period"
        name="dateRange"
      />
      <ProFormSelect
        colProps={{ xl: 8, md: 12 }}
        label="Position"
        name="level"
        valueEnum={{
          1: 'Front End',
          2: 'Back End',
          3: 'Full Stack',
        }}
      />
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import {
  ProForm,
  ProFormDependency,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { message } from 'antd';

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

const Demo = () => {
  return (
    <ProForm
      name="form-dependency-demo"
      onFinish={async () => {
        await waitTime(2000);

        message.success('Submission successful');
      }}
      initialValues={{
        name: 'Ant Design Co., Ltd.',
        name2: 'Ant Design Group',
        useMode: 'chapter',
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="Contract Customer Name"
        tooltip="Up to 24 characters"
        placeholder="Please enter a name"
      />
      <ProFormText
        width="md"
        name={['name2', 'text']}
        label="Contract Customer Name"
        tooltip="Up to 24 characters"
        placeholder="Please enter a name"
      />
      {/* ProFormDependency will automatically inject and perform shouldUpdate comparison */}
      <ProFormDependency name={['name', ['name2', 'text']]}>
        {({ name, name2 }) => {
          return (
            <ProFormSelect
              options={[
                {
                  value: 'chapter',
                  label: 'Effective after stamping',
                },
              ]}
              width="md"
              name="useMode"
              label={`Effective method agreed in the contract with "${name || ''}" and "${name2?.text || ''}"`}
            />
          );
        }}
      </ProFormDependency>
      {/* noStyle shouldUpdate is required, writing name will invalidate it */}
      <ProForm.Item noStyle shouldUpdate>
        {(form) => {
          return (
            <ProFormSelect
              options={[
                {
                  value: 'chapter',
                  label: 'Effective after stamping',
                },
              ]}
              width="md"
              name="useMode"
              label={`Effective method agreed in the contract with "${form.getFieldValue('name')}"`}
            />
          );
        }}
      </ProForm.Item>
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

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

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

const Demo = () => {
  const formRef = useRef<ProFormInstance>();
  const onFill = () => {
    formRef?.current?.setFieldsValue({
      name: '书琰',
      company: '杭州星辰科技有限公司',
    });
  };

  const getCompanyName = () => {
    message.info(`公司名称为 "${formRef?.current?.getFieldValue('company')}"`);
  };

  const getFormatValues = () => {
    message.info(
      `格式化后的所有数据：${JSON.stringify(formRef.current?.getFieldsFormatValue?.() ?? {})}`,
    );
  };

  const validateAndGetFormatValue = () => {
    formRef.current?.validateFieldsReturnFormatValue?.().then((values) => {
      message.success(`校验表单并返回格式化后的所有数据：${JSON.stringify(values)}`);
    });
  };

  return (
    <ProForm
      name="formref-demo"
      title="新建表单"
      formRef={formRef}
      submitter={{
        render: (props, doms) => {
          return [
            ...doms,
            <Button htmlType="button" onClick={onFill} key="edit">
              一键填写
            </Button>,
            <Button htmlType="button" onClick={getCompanyName} key="read">
              读取公司
            </Button>,
            <Space.Compact key="refs" style={{ display: 'block' }}>
              <Button htmlType="button" onClick={getFormatValues} key="format">
                获取格式化后的所有数据
              </Button>
              <Button
                htmlType="button"
                onClick={validateAndGetFormatValue}
                key="format2"
              >
                校验表单并返回格式化后的所有数据
              </Button>
            </Space.Compact>,
          ];
        },
      }}
      onFinish={async () => {
        await waitTime(2000);
        message.success('提交成功');
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="签约客户名称"
        tooltip="最长为 24 位"
        placeholder="请输入名称"
      />

      <ProFormText
        width="md"
        name="company"
        label="我方公司名称"
        placeholder="请输入名称"
      />
      <ProFormDatePicker name="date" initialValue={dayjs('2021-08-09')} />
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { message } from 'antd';

const Demo = () => {
  return (
    <ProForm
      name="sync-to-url-demo"
      onFinish={async () => {
        message.success('Submission successful');
      }}
      syncToUrl={(values, type) => {
        if (type === 'get') {
          // To cooperate with transform
          // startTime and endTime are combined into createTimeRanger
          return {
            ...values,
            createTimeRanger:
              values.startTime || values.endTime
                ? [values.startTime, values.endTime]
                : undefined,
          };
        }
        // expirationTime is not synchronized to the URL
        return {
          ...values,
          expirationTime: undefined,
        };
      }}
      initialValues={{
        name: 'Ant Design Co., Ltd.',
        useMode: 'chapter',
      }}
      autoFocusFirstInput
    >
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: 'Effective after stamping',
          },
        ]}
        width="sm"
        name="useMode"
        label="Contract Agreed Effective Method"
      />
      <ProFormDateRangePicker
        transform={(values) => {
          return {
            startTime: values ? values[0] : undefined,
            endTime: values ? values[1] : undefined,
          };
        }}
        width="md"
        name="createTimeRanger"
        label="Contract Effective Time"
      />
      <ProFormDatePicker
        width="md"
        name="expirationTime"
        label="Contract Expiration Time"
      />
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormMoney,
  ProFormSwitch,
} from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef, useState } from 'react';

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

const Demo = () => {
  const formRef = useRef<
    ProFormInstance<{
      name: string;
      company?: string;
      useMode?: string;
    }>
  >();

  const [readonly, setReadonly] = useState(false);
  return (
    <>
      <ProFormSwitch
        checkedChildren="On"
        unCheckedChildren="Off"
        label="Read Only"
        fieldProps={{
          onChange: setReadonly,
        }}
      />
      <ProForm<{
        name: string;
        company?: string;
        useMode?: string;
      }>
        name="money-demo"
        onFinish={async () => {
          await waitTime(2000);
          await formRef.current?.validateFields();
          await formRef.current?.validateFieldsReturnFormatValue?.();
          message.success('Submission successful');
        }}
        formRef={formRef}
        params={{ id: '100' }}
        formKey="money-demo"
        readonly={readonly}
        request={async () => {
          await waitTime(100);
          return {
            name: 'Ant Design Co., Ltd.',
            useMode: 'chapter',
          };
        }}
        autoFocusFirstInput
      >
        <ProFormMoney
          label="No Symbol"
          name="amount0"
          fieldProps={{
            moneySymbol: false,
          }}
          locale="en-US"
          initialValue={22.22}
          min={0}
          width="lg"
        />
        <ProFormMoney
          label="Width"
          name="amount1"
          locale="en-US"
          initialValue={22.22}
          min={0}
          width="lg"
        />
        <ProFormMoney
          label="Minimum Amount 0"
          name="amount2"
          locale="en-US"
          initialValue={22.22}
          min={0}
          trigger="onBlur"
        />
        <ProFormMoney
          label="No Limit"
          name="amount3"
          locale="en-GB"
          initialValue={22.22}
        />
        <ProFormMoney
          label="Follow Global Locale"
          name="amount4"
          initialValue={22.22}
        />
        <ProFormMoney
          label="Locale ms-MY"
          name="amount-ms-My"
          locale="ms-MY"
          initialValue={-22.22}
        />
        <ProFormMoney
          label="Locale zh-TW"
          name="amount-zh-TW"
          locale="zh-TW"
          initialValue={22.22}
        />
        <ProFormMoney
          label="Custom Symbol"
          name="amount5"
          initialValue={22.22}
          customSymbol="💰"
        />
        <ProFormMoney
          label="Precision"
          name="amount6"
          initialValue={2222222222.222222}
          fieldProps={{ precision: 2 }}
          customSymbol="💰"
        />
        <ProFormMoney
          label="Precision 0"
          name="amount7"
          initialValue={2222222222.222222}
          fieldProps={{ precision: 0 }}
          customSymbol="💰"
        />
      </ProForm>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);