# Modal

This is an example component.

## SelectModal

```tsx
import {SelectModal} from '@chageable/components';
import {Button, message} from "antd";
import {useRef, useState} from "react";

interface UserVO {

}

interface UserPageQry {

}

export default () => {
  const actionRef = useRef<ActionType>();
  const [keyword, setKeyword] = useState<string>();

  const columns: ProColumns<UserVO>[] = [
    {
      title: '用户ID',
      dataIndex: 'userId',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      valueType: 'avatar',
    },
    {
      title: '微信昵称',
      dataIndex: 'nickName',
      valueType: 'text',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      valueType: 'text',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      valueType: 'text',
    },
  ];

  return (
    <SelectModal<UserVO, UserPageQry>
      rowKey={'userId'}
      modalProps={{
        title: '派发优惠券',
        trigger: <Button>派发优惠券</Button>,
      }}
      tableProps={{
        rowKey: 'userId',
        columns: columns,
        columnsState: {
          persistenceType: 'sessionStorage',
          persistenceKey: 'userModalColumnStateKey',
          defaultValue: {
            userId: {show: false},
            avatar: {show: true},
            nickName: {show: true},
            name: {show: true},
            phone: {show: true},
          },
        },
        request: async (params) => {
          return {
            data: [
              {
                userId: 1,
                avatar: 'https://avatars.githubusercontent.com/u/8186664?v=4',
                nickName: 'changeable',
                name: 'changeable',
                phone: '12345678901',
              },
              {
                userId: 2,
                avatar: 'https://avatars.githubusercontent.com/u/8186664?v=4',
                nickName: 'changeable',
                name: 'changeable',
                phone: '12345678901',
              }
            ],
            success: true,
            total: 0,
          }
        },
        actionRef: actionRef,
        params: {keyword: keyword, isAdmin: false},
        toolbar: {
          search: {
            placeholder: '请输入微信昵称/姓名/手机号',
            onSearch: async (value: string) => {
              setKeyword(value);
              // @ts-ignore
              await actionRef.current.reloadAndRest();
            },
          },
        }
      }}
      onFinish={async (userVOList) => {
        message.success('派券成功');
      }}
      num={10}
      type={'checkbox'}
    />
  )
}
```


## TMap

```tsx
/**
 * iframe: true
 * compact: true
 */
import {TMapModal, IAddressProps} from '@chageable/components';
import {Typography} from "antd";

export default () => {
  return (
    <TMapModal
      trigger={<Typography.Link>
        选择地址
      </Typography.Link>}
      onFinish={(
        address?: AddressProps,
      ) => {
        console.log(address)
      }}
    />
  )
}
```
