feat(useModal): develop useModal (#427)

* feat(useModal): develop useModal and improve example

Author: jin-sir

src/index.ts

@@ -32,3 +32,4 @@ export { default as Table } from './table';
 export { default as TinyTag } from './tinyTag';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useList } from './useList';
+export { default as useModal } from './useModal';

src/useModal/__tests__/useModal.test.ts

@@ -0,0 +1,37 @@
+import { act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import useModal from '..';
+
+describe('Test useModal hook', () => {
+    it('Should ensure initial data', async () => {
+        const { result } = renderHook(() => useModal());
+        expect(result.current.visible).toBeFalsy();
+        expect(result.current.record).toBeUndefined();
+        expect(result.current.open).toBeDefined();
+        expect(result.current.close).toBeDefined();
+    });
+
+    it('Should support open/close modal', async () => {
+        const record = {
+            id: '1',
+            name: 'John Brown',
+            age: 32,
+            address: 'New York No. 1 Lake Park',
+        };
+        const { result } = renderHook(() => useModal());
+        act(() => {
+            result.current.open(record);
+        });
+
+        expect(result.current.visible).toBeTruthy();
+        expect(result.current.record).toEqual(record);
+
+        act(() => {
+            result.current.close();
+        });
+
+        expect(result.current.visible).toBeFalsy();
+        expect(result.current.record).toBeUndefined();
+    });
+});

src/useModal/demos/basic.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect } from 'react';
+import { Button, Form, Input, Modal, Table } from 'antd';
+import type { ColumnType } from 'antd/lib/table';
+
+import useModal from '..';
+
+interface IDataSource {
+    id: string;
+    name: string;
+    age: number;
+    address: string;
+}
+
+const data: IDataSource[] = [
+    {
+        id: '1',
+        name: 'John Brown',
+        age: 32,
+        address: 'New York No. 1 Lake Park',
+    },
+    {
+        id: '2',
+        name: 'Jim Green',
+        age: 42,
+        address: 'London No. 1 Lake Park',
+    },
+    {
+        id: '3',
+        name: 'Joe Black',
+        age: 52,
+        address: 'Sydney No. 1 Lake Park',
+    },
+    {
+        id: '4',
+        name: 'Jim Red',
+        age: 62,
+        address: 'London No. 2 Lake Park',
+    },
+];
+
+export default () => {
+    const modal = useModal<IDataSource>();
+    const [form] = Form.useForm<IDataSource>();
+
+    const columns: ColumnType<IDataSource>[] = [
+        {
+            key: 'name',
+            title: 'name',
+            dataIndex: 'name',
+        },
+        {
+            key: 'age',
+            title: 'age',
+            dataIndex: 'age',
+        },
+        {
+            key: 'address',
+            title: 'address',
+            dataIndex: 'address',
+        },
+        {
+            key: 'operation',
+            title: '操作',
+            render: (_, record) => {
+                return (
+                    <Button
+                        type="link"
+                        onClick={() => {
+                            modal.open(record);
+                        }}
+                    >
+                        编辑
+                    </Button>
+                );
+            },
+        },
+    ];
+
+    useEffect(() => {
+        if (modal.visible) {
+            form.setFieldsValue({
+                name: modal.record?.name,
+                age: modal.record?.age,
+                address: modal.record?.address,
+            });
+        } else {
+            form.resetFields();
+        }
+    }, [modal.record, modal.visible]);
+
+    return (
+        <>
+            <Table
+                columns={columns}
+                size="small"
+                scroll={{ y: 200 }}
+                dataSource={data}
+                rowKey="uuid"
+                bordered
+            />
+            <Modal
+                title="修改信息"
+                visible={modal.visible}
+                onOk={modal.close}
+                onCancel={modal.close}
+            >
+                <Form form={form}>
+                    <Form.Item label="姓名" name="name">
+                        <Input />
+                    </Form.Item>
+                    <Form.Item label="年龄" name="age">
+                        <Input />
+                    </Form.Item>
+                    <Form.Item label="地址" name="address">
+                        <Input />
+                    </Form.Item>
+                </Form>
+            </Modal>
+        </>
+    );
+};

src/useModal/index.md

@@ -0,0 +1,26 @@
+---
+title: useModal 保存当前数据并打开弹框
+group: Hooks
+toc: content
+---
+
+# useModal
+
+## 何时使用
+
+保存当前数据并打开弹框
+
+## 示例
+
+<code src="./demos/basic.tsx" title="基础使用"></code>
+
+## API
+
+### Returns
+
+| 参数    | 说明     | 类型                   | 默认值      |
+| ------- | -------- | ---------------------- | ----------- |
+| visible | 是否可见 | `boolean`              | `false`     |
+| record  | 选中数据 | `T \| undefined`       | `undefined` |
+| open    | 打开     | `(record?: T) => void` | -           |
+| close   | 关闭     | `() => void`           | -           |

src/useModal/index.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+const useModal = <T>() => {
+    const [visible, setVisible] = useState(false);
+    const [record, setRecord] = useState<T | undefined>(undefined);
+
+    const open = (record?: T) => {
+        setRecord(record);
+        setVisible(true);
+    };
+
+    const close = () => {
+        setRecord(undefined);
+        setVisible(false);
+    };
+
+    return { visible, record, open, close };
+};
+
+export default useModal;