# ProForm

This is an example component.

## ProFormUploadMaterial

```tsx
import {ProFormUploadMaterial} from '@chageable/components';
import {ProForm} from "@ant-design/pro-components";

export default () => {
  return (
    <ProForm
      layout={'horizontal'}
      labelAlign={'right'}
      labelCol={{span: 4}}
      wrapperCol={{span: 16}}
      grid={true}
    >
      <ProFormUploadMaterial
        label="Upload"
        name="upload"
        fieldProps={{
          request: async (params, sorter, filter) => {
            const data = [
              {
                key: '1',
                materialId: '1',
                name: 'John Brown',
                url: 'https://placehold.co/400',
              }
            ]

            return {
              data: data || [],
              total: data.length,
              success: true,
            };
          },
          onChange: (fileList) => console.log("fileList", fileList),
          maxCount: 9
        }}

      />
    </ProForm>
  )
}
```

## ProFormTMap

```tsx
import {ProFormTMap} from '@chageable/components';
import {ProForm} from "@ant-design/pro-components";
import {useState} from "react";

export default () => {
  return (
    <ProForm
      layout={'horizontal'}
      labelAlign={'right'}
      labelCol={{span: 4}}
      wrapperCol={{span: 16}}
      grid={true}
    >
      <ProFormTMap
        label="address"
        name="address"
      />
    </ProForm>
  )
}
```