import { useState } from 'react';
import { useDisclosure, Box } from '@chakra-ui/react';
import Button from '../button';
import { Meta, Story, Canvas } from '@storybook/addon-docs';

import AddressModal from '.';

<Meta title="业务/地址对话框 AddressModal" component={AddressModal} />

# 地址对话框 AddressModal

用于构建页面的外部包装，包括页面标题和相关页面元素。

## 导入

```typescript
import { AddressModal } from '@ahri-ui/core';
```

## 使用

<Canvas>
  <Story name="默认">
    {() => {
      const [address, setAddress] = useState();
      const { isOpen, onOpen, onClose } = useDisclosure();
      return (
        <Box>
          <Button onClick={onOpen}>编辑地址</Button>
          <AddressModal
            visible={isOpen}
            value={address}
            onCancel={onClose}
            onOk={addressInfo => {
              console.log('addressInfo', addressInfo);
            }}
            onChange={addressInfo => {
              console.log('addressInfo', addressInfo);
            }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 值 | AddressProps | - |
| extraItem | 额外的 FormItem | ReactNode | - |
| onChange | 更新回调 | (values: AddressProps) => void | - |
| onOk | 确认回调 | (values: AddressProps) => void | - |
| Omit<ModalProps, 'children' \| 'onOk'> | Modal 的属性 | ModalProps | - |