### ProFormList with actionRef for List Operations

Source: https://procomponents.ant.design/components/group

This example shows how to use actionRef to get a handle on the ProFormList instance, enabling programmatic control over adding, removing, moving, and retrieving list items. It includes buttons to trigger these actions.

```tsx
const actionRef = useRef<
  FormListActionType<{ 
    name: string;
  }>
>();

return (
  <>
    <Space>
      <Button
        type="primary"
        onClick={() => {
          const list = actionRef.current?.getList();
          actionRef.current?.add({
            name: '新增' + list?.length,
          });
        }}
      >
        增加一行
      </Button>
      <Button
        danger
        onClick={() => {
          actionRef.current?.remove(1);
        }}
      >
        删除一行
      </Button>
      <Button
        onClick={() => {
          actionRef.current?.move(1, 0);
        }}
      >
        移动到第一行
      </Button>
      <Button
        type="dashed"
        onClick={() => {
          const row = actionRef.current?.get(1);
          console.log(row);
        }}
      >
        获取一行数据
      </Button>
      <Button
        type="dashed"
        onClick={() => {
          const row = actionRef.current?.getList();
          console.log(row);
        }}
      >
        获取所有数据
      </Button>
    </Space>
    <ProFormList actionGuard={actionGuard} actionRef={actionRef}>
      <ProFormText key="useMode" name="name" label="姓名" />
    </ProFormList>
  </>
```

--------------------------------

### CheckCard Composition Examples

Source: https://procomponents.ant.design/components/check-card

Examples showcasing different combinations of avatar, title, and description in CheckCard.

```APIDOC
## Composition Examples

### Only Avatar
```jsx
<CheckCard avatar="https://example.com/avatar.png" />
```

### Avatar and Description
```jsx
<CheckCard 
  avatar="https://example.com/avatar.png" 
  description="This is a product description."
/>
```

### Title and Description
```jsx
<CheckCard 
  title="Example Title"
  description="This is a content display."
/>
```

### Title and Avatar
```jsx
<CheckCard 
  title="Brand Name"
  avatar="https://example.com/logo.png"
/>
```

### Only Title
```jsx
<CheckCard title="Simple Title" />
```

### Only Description
```jsx
<CheckCard description="This is an explanatory text." />
```
```

--------------------------------

### ProForm Basic Usage Example

Source: https://procomponents.ant.design/components/form

A simple example demonstrating the basic usage of the ProForm component.

```tsx
import React from 'react';
import {
  ProForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';

const BasicForm: React.FC = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
      }}
    >
      <ProForm.Group>
        <ProFormText name="name" label="签约客户名称" />
        <ProFormText name="company" label="我方公司名称" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDateRangePicker name="dateRange" label="合同生效日期" />
        <ProFormSelect
          name="useMode"
          label="生效方式'
          options={[
            { value: 'a', label: '未开始' },
            { value: 'b', label: '活动中' },
          ]}
        />
      </ProForm.Group>
      <ProFormText name="desc" label="合同内容' rules={[{ required: true }]} />
    </ProForm>
  );
};

export default BasicForm;
```

--------------------------------

### Light Filter Usage

Source: https://procomponents.ant.design/components/field-set

Example demonstrating the use of light filtering.

```jsx
<LightFilter>
  <ProFormSelect name="light-filter-select" label="请选择" />
</LightFilter>
```

--------------------------------

### ProForm Method Call with formRef

Source: https://procomponents.ant.design/components/form

Demonstrates how to use formRef to get the form instance and call methods like reset, set values, and get values.

```tsx
import React from 'react';
import {
  ProForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormInstance,
} from '@ant-design/pro-components';

const FormMethods: React.FC = () => {
  const formRef = React.useRef<ProFormInstance>();

  return (
    <ProForm
      formRef={formRef}
      onFinish={async (values) => {
        console.log(values);
      }}
      params={{
        // request will be called when the component is mounted
        request: async () => ({
          name: 'Ant Design Co., Ltd.',
          dateRange: [
            new Date('2023-01-01'),
            new Date('2023-12-31'),
          ],
        }),
      }}
    >
      <ProForm.Group>
        <ProFormText name="name" label="签约客户名称' />
        <ProFormDateRangePicker name="dateRange' label="合同生效日期' />
      </ProForm.Group>
      <button
        type="button"
        onClick={() => {
          formRef.current?.resetFields();
        }}
      >
        重置
      </button>
      <button
        type="button"
        onClick={async () => {
          const values = await formRef.current?.validateFields();
          console.log('Validated values:', values);
        }}
      >
        获取格式化后的所有数据
      </button>
    </ProForm>
  );
};

export default FormMethods;
```

--------------------------------

### ProFormMoney

Source: https://procomponents.ant.design/components/field-set

Example of ProFormMoney for currency input.

```jsx
<ProFormMoney name="money" label="Money" />
```

--------------------------------

### Upload Button - With Extra

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadButton with additional extra content.

```jsx
<ProFormUploadButton name="upload-button-extra" label="Upload" extra="extra" />
```

--------------------------------

### ProFormRate

Source: https://procomponents.ant.design/components/field-set

Example of ProFormRate for star rating input.

```jsx
<ProFormRate name="rate" label="Rate" />
```

--------------------------------

### Basic Data Form - InputNumber

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDigit for numerical input.

```jsx
<ProFormDigit name="input-number-basic" label="InputNumber" />
```

--------------------------------

### ProFormSelect - With Search

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSelect with search functionality enabled.

```jsx
<ProFormSelect name="select-search" label="Select with Search" showSearch options={[
              { label: '520000201604258831', value: '520000201604258831' },
            ]} />
```

--------------------------------

### Query Selector - Options

Source: https://procomponents.ant.design/components/field-set

Example of a query selector using static options.

```jsx
<ProFormSelect name="query-selector-options" label="Query Selector - options" options={[
              { label: '请选择', value: '请选择' },
            ]} />
```

--------------------------------

### Read Only Form - Filter Example

Source: https://procomponents.ant.design/components/field-set

Example of a read-only form with a filter input.

```jsx
<ProFormText name="filter-readonly" label="筛选" readonly> 包含 123 </ProFormText>
```

--------------------------------

### ProFormSwitch

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSwitch for boolean input (true/false).

```jsx
<ProFormSwitch name="switch" label="Switch" />
```

--------------------------------

### Basic Data Form - Dynamic List

Source: https://procomponents.ant.design/components/field-set

Example of ProFormList for dynamically adding items.

```jsx
<ProFormList name="list-dynamic" label="组件列表自动增加">
  <ProForm.Group>
    <ProFormDigit name="digit" />
    <ProFormDigit name="digit-2" />
    <ProFormDigit name="digit-3" />
  </ProForm.Group>
</ProFormList>
```

--------------------------------

### ProFormRadio.Group - Basic

Source: https://procomponents.ant.design/components/field-set

Example of ProFormRadio.Group for single selection from a list of options.

```jsx
<ProFormRadio.Group name="radio-group-basic" label="Radio.Group" options={[
              { label: 'item 1', value: 'item 1' },
              { label: 'item 2', value: 'item 2' },
              { label: 'item 3', value: 'item 3' },
            ]} />
```

--------------------------------

### ProFormUploadDragger - With Extra

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadDragger with additional extra content.

```jsx
<ProFormUploadDragger name="upload-dragger-extra" label="Dragger" extra="单击或拖动文件到此区域进行上传
支持单次或批量上传" />
```

--------------------------------

### Basic Data Form - Switch

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSwitch for boolean input.

```jsx
<ProFormSwitch name="switch-basic" label="Switch" />
```

--------------------------------

### ProFormDigit - InputNumber

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDigit for numerical input, with default formatting.

```jsx
<ProFormDigit label="InputNumber" name="input-number" />
```

--------------------------------

### Update Dependencies

Source: https://procomponents.ant.design/docs/api-changes

Install the latest versions of antd and ProComponents to align with v3.0 requirements.

```bash
# 更新依赖
npm install antd@^6.0.0
npm install @ant-design/pro-components@^3.0.0-beta.1
```

--------------------------------

### ProFormText - Read Only Example

Source: https://procomponents.ant.design/components/field-set

Demonstrates the read-only display of a ProFormText field.

```jsx
<ProFormText name="readonly-text" label="Edit Read Only" readonly />
```

--------------------------------

### Basic Data Form - Rate

Source: https://procomponents.ant.design/components/field-set

Example of ProFormRate for star rating.

```jsx
<ProFormRate name="rate-basic-data" label="Rate" />
```

--------------------------------

### Basic Data Form - Select

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSelect for country selection.

```jsx
<ProFormSelect name="select" label="Select" valueEnum={{ China: 'China' }} />
```

--------------------------------

### Basic Data Form - Address List

Source: https://procomponents.ant.design/components/field-set

Example of ProFormText for address input in a list.

```jsx
<ProFormText name="address-list-name-1" label="姓名" />
<ProFormText name="address-list-address-1" label="地址" />
<ProFormText name="address-list-name-2" label="姓名" />
<ProFormText name="address-list-address-2" label="地址" />
```

--------------------------------

### Input Group Example

Source: https://procomponents.ant.design/components/field-set

Demonstrates using Input.Group within ProForm for grouped inputs.

```jsx
<ProForm.Group title="组件列表- Input.Group">
  <ProFormText name="group-field-1" />
  <ProFormText name="group-field-2" />
  <ProFormText name="group-field-3" />
</ProForm.Group>
```

--------------------------------

### ProFormDigitRange - InputNumberRange

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDigitRange for inputting a range of numbers.

```jsx
<ProFormDigitRange label="InputNumberRange" name="input-number-range" />
```

--------------------------------

### ProFormUploadButton

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadButton for file uploads using a button interface.

```jsx
<ProFormUploadButton name="upload-button" label="Upload" />
```

--------------------------------

### ProForm with Form Linking

Source: https://procomponents.ant.design/components/form

Example of implementing form linking using ProFormDependency.

```tsx
import React from 'react';
import {
  ProForm,
  ProFormText,
  ProFormSelect,
  ProFormDependency,
} from '@ant-design/pro-components';

const FormLinking: React.FC = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
      }}
    >
      <ProForm.Group>
        <ProFormText name="customerName" label="签约客户名称' />
        <ProFormText name="companyName" label="我方公司名称' />
      </ProForm.Group>
      <ProFormDependency name={['customerName']}>
        {({ customerName }) => {
          return (
            <ProFormSelect
              label="合同名称'
              name="contractName"
              fieldProps={{
                options: [
                  { value: 'contract_1', label: `合同一 for ${customerName}` },
                  { value: 'contract_2', label: `合同二 for ${customerName}` },
                ],
              }}
            />
          );
        }}
      </ProFormDependency>
      <ProFormSelect
        name="effectiveMethod"
        label="合同生效方式'
        options={[
          { value: 'stamp', label: '盖章生效' },
          { value: 'signature', label: '签字生效' },
        ]}
      />
    </ProForm>
  );
};

export default FormLinking;
```

--------------------------------

### Basic Data Form - Upload Button

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadButton for file uploads.

```jsx
<ProFormUploadButton name="upload-button-basic-data" label="Upload" />
```

--------------------------------

### Basic Data Form - Options Select

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSelect using static options.

```jsx
<ProFormSelect name="select-options" label="Select[multiple]" mode="multiple" options={[
              { label: '选项 A', value: '选项 A' },
              { label: '选项 B', value: '选项 B' },
              { label: '选项 C', value: '选项 C' },
            ]} />
```

--------------------------------

### ProFormRadio.Group - Button Style

Source: https://procomponents.ant.design/components/field-set

Example of ProFormRadio.Group using button style for options.

```jsx
<ProFormRadio.Group name="radio-group-button" label="Radio.Button" options={[
              { label: 'item 1', value: 'item 1' },
              { label: 'item 2', value: 'item 2' },
              { label: 'item 3', value: 'item 3' },
            ]} />
```

--------------------------------

### Upload Button - Custom Text

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadButton with custom button text.

```jsx
<ProFormUploadButton name="upload-button-custom-text" label="Upload" buttonText="上传按钮的文本变啦" />
```

--------------------------------

### ProFormText.Password Input

Source: https://procomponents.ant.design/components/field-set

Example of using ProFormText.Password for a password input field.

```jsx
<ProFormText.Password name="password" label="Password" />
```

--------------------------------

### Query Selector - Request Data

Source: https://procomponents.ant.design/components/field-set

Example of a query selector fetching data via a request.

```jsx
<ProFormSelect name="query-selector-request" label="Query Selector - request" request={async () => [
              { label: '请选择', value: '请选择' },
            ]} />
```

--------------------------------

### Basic Data Form - Radio Button

Source: https://procomponents.ant.design/components/field-set

Example of ProFormRadio.Group using button style.

```jsx
<ProFormRadio.Group name="radio-button-basic-data" label="Radio.Button" options={[
              { label: 'item 1', value: 'item 1' },
            ]} />
```

--------------------------------

### Basic StepsForm Example

Source: https://procomponents.ant.design/components/steps-form

A standard StepsForm with three steps: Create Experiment, Set Parameters, and Publish Experiment. Includes various form fields like experiment name, date, migration type, and deployment units.

```javascript
1
Create Experiment
All basic information is filled in here
2
Set Parameters
Fill in the operation parameters here
3
Publish Experiment
Fill in the release criteria here
Experiment Name
Date
Time Range
Remarks
Migration Type
Structural MigrationFull MigrationIncremental MigrationFull Verification
Business DB Username
Record Retention Time
Migration Type
Complete LOBDo Not Sync LOBRestricted LOB
Deployment Units
Deployment Unit 1Deployment Unit 2Deployment Unit 3
Deployment Group Strategy
Strategy One
Pod Scheduling Strategy
Strategy Two
下一步
```

--------------------------------

### 演示文件目录结构

Source: https://procomponents.ant.design/docs

示例代码应放置在 `demos/` 目录下，并按组件进行分类，便于管理和查找。

```bash
demos/
├── card/
│   ├── basic.tsx
│   └── advanced.tsx
├── form/
│   ├── basic.tsx
│   └── complex.tsx
└── table/
    ├── basic.tsx
    └── search.tsx

```

--------------------------------

### ProFormSelect - Basic Usage

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSelect for single selection, supporting request or valueEnum for options.

```jsx
<ProFormSelect name="select-multiple" label="Select[multiple]" fieldProps={{ mode: 'multiple' }} options={[
              { label: 'Green', value: 'Green' },
              { label: 'Blue', value: 'Blue' },
            ]} />
```

--------------------------------

### ProFormCheckbox.Group

Source: https://procomponents.ant.design/components/field-set

Example of ProFormCheckbox.Group for multiple selections.

```jsx
<ProFormCheckbox.Group name="checkbox-group" label="Checkbox.Group" options={['A', 'B', 'C', 'D', 'E', 'F']} />
```

--------------------------------

### Update Dependencies with pnpm

Source: https://procomponents.ant.design/docs/migration-guide

Example of updating antd and ProComponents to their latest versions using pnpm. Replace with npm or yarn commands if necessary.

```bash
pnpm up antd@^6.0.0
pnpm up @ant-design/pro-components@^3.0.0-beta.1
pnpm install
```

--------------------------------

### ProFormSegmented

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSegmented for segmented control selection.

```jsx
<ProFormSegmented name="segmented" label="Segmented Control" options={['Unresolved', 'Resolved']} />
```

--------------------------------

### ProFormSlider

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSlider for selecting a value within a range.

```jsx
<ProFormSlider name="slider" label="Slider" />
```

--------------------------------

### actionRef - Accessing List Instance

Source: https://procomponents.ant.design/components/group

Demonstrates how to use the `actionRef` to get a reference to the ProFormList instance, enabling programmatic control over list items such as adding, removing, and moving.

```APIDOC
### actionRef 操作项目实例

可用于获取 `ProFormList` 的操作实例，从而进行增删改查等操作。

### Usage
```tsx
const actionRef = useRef<FormListActionType<{ name: string }>>();

return (
  <>
    <Space>
      <Button
        type="primary"
        onClick={() => {
          const list = actionRef.current?.getList();
          actionRef.current?.add({
            name: '新增' + list?.length,
          });
        }}
      >
        增加一行
      </Button>
      <Button
        danger
        onClick={() => {
          actionRef.current?.remove(1);
        }}
      >
        删除一行
      </Button>
      <Button
        onClick={() => {
          actionRef.current?.move(1, 0);
        }}
      >
        移动到第一行
      </Button>
      <Button
        type="dashed"
        onClick={() => {
          const row = actionRef.current?.get(1);
          console.log(row);
        }}
      >
        获取一行数据
      </Button>
      <Button
        type="dashed"
        onClick={() => {
          const row = actionRef.current?.getList();
          console.log(row);
        }}
      >
        获取所有数据
      </Button>
    </Space>
    <ProFormList actionGuard={actionGuard} actionRef={actionRef}>
      <ProFormText key="useMode" name="name" label="姓名" />
    </ProFormList>
  </>
);
```
```

--------------------------------

### ProList Import

Source: https://procomponents.ant.design/components/list

How to import the ProList component into your project.

```APIDOC
## ProList Import

### Description
Import the ProList component from the `@ant-design/pro-components` package.

### Code
```javascript
import { ProList } from '@ant-design/pro-components';
```
```

--------------------------------

### Basic Data Form - Name and Prefix/Suffix

Source: https://procomponents.ant.design/components/field-set

Example of basic form fields including text input with prefix and suffix.

```jsx
<ProFormText name="name" label="name" />
<ProFormText name="prefix-suffix" label="prefix示例科技有限公司suffix" />
```

--------------------------------

### Other Related Group - Input Group

Source: https://procomponents.ant.design/components/field-set

Example of ProForm.Group for input grouping.

```jsx
<ProForm.Group title="组件列表- Input.Group">
  <ProFormText name="group-field-1-other" />
  <ProFormText name="group-field-2-other" />
  <ProFormText name="group-field-3-other" />
</ProForm.Group>
```

--------------------------------

### Basic Data Form - Slider

Source: https://procomponents.ant.design/components/field-set

Example of ProFormSlider for range selection.

```jsx
<ProFormSlider name="slider-basic" label="Slider" />
```

--------------------------------

### Basic ProDescriptions Usage

Source: https://procomponents.ant.design/components/descriptions

A simple example of ProDescriptions displaying order details with various data types including text, currency, percentage, status, dates, and code snippets.

```typescript
<ProDescriptions title="订单详情">
  <ProDescriptions.Item label="提交审核">这是一段文本</ProDescriptions.Item>
  <ProDescriptions.Item label="订单备注">客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进</ProDescriptions.Item>
  <ProDescriptions.Item label="合同金额">¥128,000.00</ProDescriptions.Item>
  <ProDescriptions.Item label="完成进度">75.00%</ProDescriptions.Item>
  <ProDescriptions.Item label="订单状态">处理中</ProDescriptions.Item>
  <ProDescriptions.Item label="付款方式">bank</ProDescriptions.Item>
  <ProDescriptions.Item label="交付进度">75%</ProDescriptions.Item>
  <ProDescriptions.Item label="下单时间">2024-01-15 00:00:00</ProDescriptions.Item>
  <ProDescriptions.Item label="签约日期">2024-01-15</ProDescriptions.Item>
  <ProDescriptions.Item label="服务周期">2024-01-15 00:00:002025-01-14 00:00:00</ProDescriptions.Item>
  <ProDescriptions.Item label="创建时间">00:00:00</ProDescriptions.Item>
  <ProDescriptions.Item label="部署脚本">
    ```
    pnpm install
    pnpm run build
    pnpm run deploy --env production
            
    ```
  </ProDescriptions.Item>
  <ProDescriptions.Item label="服务配置">
    ```json
    {
      "service": {
        "name": "user-auth-service",
        "port": 8080,
        "replicas": 3,
        "healthCheck": "/api/health",
        "env": "production",
        "resources": {
          "cpu": "500m",
          "memory": "512Mi"
        }
      }
    }
    ```
  </ProDescriptions.Item>
</ProDescriptions>
```

--------------------------------

### Drag Sort Table with Request Data

Source: https://procomponents.ant.design/components/drag-sort-table

This example shows how to use the DragSortTable with data fetched via a `request` function. It includes the necessary configuration for asynchronous data loading.

```javascript
const columns = [
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const request = async (params) => {
  // Simulate API call
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
          { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
          { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
        ],
        success: true,
      });
    }, 1000);
  });
};

<DragSortTable
  rowKey="key"
  columns={columns}
  request={request}
  onDragSortEnd={async (beforeIndex, afterIndex, newDataSource) => {
    console.log('Sorting finished:', { beforeIndex, afterIndex, newDataSource });
    // You can perform further actions here, like saving the new order
  }}
/>;
```

--------------------------------

### ProFormList Basic Usage

Source: https://procomponents.ant.design/components/group

Demonstrates the basic usage of ProFormList for structured data entry, including initial values and custom creator button text.

```APIDOC
## ProFormList

ProFormList与Form.ListAPI基本相同，增加了自带的操作按钮：删除和复制，并且自带了了一个`新建一行`按钮。

### Usage
```tsx
<ProFormList
  name="users"
  initialValue={[
    {
      useMode: 'chapter',
    },
  ]}
  creatorButtonProps={{
    position: 'top',
    creatorButtonText: '再建一行',
  }}
  creatorRecord={{
    useMode: 'none',
  }}
>
  <ProFormSelect
    key="useMode"
    options={[
      {
        value: 'chapter',
        label: '盖章后生效',
      },
      {
        value: 'none',
        label: '不生效',
      },
    ]}
    width="md"
    name="useMode"
    label="合同约定生效方式"
  />
</ProFormList>
```
```

--------------------------------

### Date Related Group - Year

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a year.

```jsx
<ProFormDatePicker name="date-picker-year" label="Year" picker="year" />
```

--------------------------------

### Array dataIndex Example

Source: https://procomponents.ant.design/components/descriptions

Demonstrates how to use array dataIndex for displaying multiple values, such as in a list of items or properties.

```typescript
<ProDescriptions request={fetchData} column={3} title="高级定义列表">
  <ProDescriptions.Item dataIndex="title">这是一段文本</ProDescriptions.Item>
  <ProDescriptions.Item dataIndex="date" valueType="date" meninggal="true">日期2020-07-30</ProDescriptions.Item>
  <ProDescriptions.Item dataIndex="money" valueType="money">money¥12,121.00</ProDescriptions.Item>
</ProDescriptions>
```

--------------------------------

### Date Related Group - Quarter

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a quarter.

```jsx
<ProFormDatePicker name="date-picker-quarter" label="Quarter" picker="quarter" />
```

--------------------------------

### Date Related Group - Month

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a month.

```jsx
<ProFormDatePicker name="date-picker-month" label="Month" picker="month" />
```

--------------------------------

### Date Related Group - Week

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a week.

```jsx
<ProFormDatePicker name="date-picker-week" label="Week" picker="week" />
```

--------------------------------

### Responsive Grid Layout

Source: https://procomponents.ant.design/components/card

Configure responsive grid columns using an object with breakpoint keys (xs, sm, md, lg, xl, xxl) in the `colSpan` prop. This allows cards to adapt their width across different screen sizes.

```jsx
<ProCard title="响应式布局" colSpan={{ xs: 2, sm: 4, md: 10, lg: 12 }}>
  响应式卡片
</ProCard>
```

--------------------------------

### Date Related Group - Time

Source: https://procomponents.ant.design/components/field-set

Example of ProFormTimePicker for selecting a time.

```jsx
<ProFormTimePicker name="time-picker-time" label="Time" />
```

--------------------------------

### Date Related Group - Date

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a date.

```jsx
<ProFormDatePicker name="date-picker-date" label="Date" />
```

--------------------------------

### ProFormUploadDragger

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadDragger for file uploads using a drag-and-drop area.

```jsx
<ProFormUploadDragger name="upload-dragger" label="Drag and Drop Upload" />
```

--------------------------------

### StepsForm for Editing Scenarios

Source: https://procomponents.ant.design/components/steps-form

An example of using StepsForm in an editing context, where existing data might be pre-filled. Features steps like 'Job Information' and 'Sync Table Information'.

```javascript
1
Job Information
2
Sync Table Information
Name
Job Type
State-owned enterprise
Time Range
Title
下一步
```

--------------------------------

### Rollback Dependencies

Source: https://procomponents.ant.design/docs/api-changes

Revert to previous versions of ProComponents and antd if necessary.

```bash
npm install @ant-design/pro-components@^2.8.10
npm install antd@^4.24.0
```

--------------------------------

### CheckCard in a Form

Source: https://procomponents.ant.design/components/check-card

Example of integrating CheckCard with an Ant Design Form.

```APIDOC
## Form Integration

```jsx
import { Form, Button } from 'antd';
import { CheckCard } from '@ant-design/pro-components';

const App = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item name="technology" label="Select Technology">
        <CheckCard.Group>
          <CheckCard value="spring" title="Spring Boot" description="Build Java backend apps." />
          <CheckCard value="sofa" title="SOFA Boot" description="Build distributed backend apps." />
          <CheckCard value="node" title="Node JS" description="Build backend apps with JS." />
        </CheckCard.Group>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;
```
```

--------------------------------

### ActionRef Table Control Example

Source: https://procomponents.ant.design/components/table

Demonstrates how to use ActionRef to manually trigger table operations like reload, reset, and editing.

```tsx
// 示例
const ref = useRef<ActionType>();

<ProTable actionRef={ref} />;

// 刷新
ref.current?.reload();

// 刷新并清空,页码也会重置，不包括表单
ref.current?.reloadAndRest();

// 重置到默认值，包括表单
ref.current?.reset();

// 清空选中项
ref.current?.clearSelected();

// 开始编辑
ref.current?.startEditable(rowKey);

// 结束编辑
ref.current?.cancelEditable(rowKey);
```

--------------------------------

### Date Related Group - Basic Year

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a year.

```jsx
<ProFormDatePicker name="date-picker-basic-year" label="年" picker="year" />
```

--------------------------------

### Date Related Group - Basic Quarter

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a quarter.

```jsx
<ProFormDatePicker name="date-picker-basic-quarter" label="季度" picker="quarter" />
```

--------------------------------

### ProForm with Amount Input

Source: https://procomponents.ant.design/components/form

Demonstrates using ProFormText with a specific format for amount input.

```tsx
import React from 'react';
import {
  ProForm,
  ProFormText,
} from '@ant-design/pro-components';

const AmountForm: React.FC = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
      }}
    >
      <ProFormText
        name="amount"
        label="金额'
        fieldProps={{
          formatter: (value) => `${value}¥`,
          parser: (value) => value.replace('¥', ''),
        }}
      />
    </ProForm>
  );
};

export default AmountForm;
```

--------------------------------

### Date Related Group - Basic Month

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a month.

```jsx
<ProFormDatePicker name="date-picker-basic-month" label="月" picker="month" />
```

--------------------------------

### Import ProDescriptions Component

Source: https://procomponents.ant.design/components/descriptions

Import the ProDescriptions component from '@ant-design/pro-components'.

```javascript
import { ProDescriptions } from '@ant-design/pro-components';
```

--------------------------------

### Date Related Group - Basic Week

Source: https://procomponents.ant.design/components/field-set

Example of ProFormDatePicker for selecting a week.

```jsx
<ProFormDatePicker name="date-picker-basic-week" label="周" picker="week" />
```

--------------------------------

### CheckCard with Different Sizes

Source: https://procomponents.ant.design/components/check-card

Demonstrates how to use the `size` prop to change the appearance of CheckCards.

```APIDOC
## Different Sizes

```jsx
import { CheckCard } from '@ant-design/pro-components';

const App = () => (
  <>
    <CheckCard size="large" title="Large Card" description="This is a large card."/>
    <CheckCard size="default" title="Default Card" description="This is a default card."/>
    <CheckCard size="small" title="Small Card" description="This is a small card."/>
  </>
);

export default App;
```
```

--------------------------------

### Date Related Group - Basic Time

Source: https://procomponents.ant.design/components/field-set

Example of ProFormTimePicker for selecting time.

```jsx
<ProFormTimePicker name="time-picker-basic-time" label="时间" />
```

--------------------------------

### Basic Data Form - Dragger Upload

Source: https://procomponents.ant.design/components/field-set

Example of ProFormUploadDragger for file uploads.

```jsx
<ProFormUploadDragger name="dragger-basic-data" label="Dragger" />
```

--------------------------------

### Import LoginForm and LoginFormPage

Source: https://procomponents.ant.design/components/login-form

Import the necessary components from '@ant-design/pro-components' to use LoginForm and LoginFormPage in your project.

```javascript
import { LoginForm,PageForm } from '@ant-design/pro-components';
```

--------------------------------

### ProSkeleton Component Usage

Source: https://procomponents.ant.design/components/skeleton

This snippet demonstrates how to import and use the ProSkeleton component with a 'list' type. Note that the documentation states this is an internal component and not intended for direct use.

```APIDOC
## ProSkeleton - Skeleton Screen

> This component is an internal component and should not be used directly.

### Installation and Initialization

```typescript
import Skeleton from '@ant-design/pro-skeleton';

return <Skeleton type="list" />;
```

### API

| Parameter | Description | Type | Default Value |
|---|---|---|---|
| type | Different types of skeleton screens | `'list' | 'result' | 'descriptions'` | `list` |
| active | Whether to show dynamic animations | `boolean` | `true` |
| pageHeader | Whether to show the pageHeader skeleton screen (descriptions and list are valid) | `boolean` | `true` |
| statistic | The number of statistic skeleton screens | `number` | `false` (4) |
| list | The number of list skeleton screens | `number` | `false` (5) |
| toolbar | The toolbar skeleton screen for lists | `boolean` | `true` |
| formItemRender | Custom DOM rendering for `mode=update` or `mode=edit`, generally used for rendering edit boxes | `(item: any, config: any) => ReactNode` | `-` |
| render | Custom DOM rendering for `mode=read`, purely for display | `(item: any, config: any) => ReactNode` | `-` |
```

--------------------------------

### Basic Data Form - Checkbox Group

Source: https://procomponents.ant.design/components/field-set

Example of ProFormCheckbox.Group for multiple selections.

```jsx
<ProFormCheckbox.Group name="checkbox-group-basic-data" label="Checkbox.Group" options={['A', 'B']} />
```

--------------------------------

### Use ActionRef to Reload ProDescriptions

Source: https://procomponents.ant.design/components/descriptions

This snippet shows how to use the ActionRef to manually reload the ProDescriptions component. It demonstrates setting up a ref using `useRef` and calling the `reload` method at intervals or on demand.

```tsx
const ref = useRef<ActionType>();

// 两秒刷新一次
useEffect(() => {
  setInterval(() => {
    ref.current.reload();
  }, 2000);
}, []);

// hooks 绑定
<ProDescriptions actionRef={ref} />;

// class
<ProDescriptions actionRef={(ref) => (this.ref = ref)} />;
```

```tsx
// 刷新
ref.current.reload();
```