feat: close 支持回调外部 props 方法 (#19)

* feat: close 支持回调外部 props 方法

* test: add unit test

* test: add unit test

* test: add unit test

* feat: 改进默认 TS 类型

* docs: 补充文档

* chore: docs order

* chore: update demo

.dumi/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*"]
+}

docs/faq.md

@@ -0,0 +1,51 @@
+---
+title: 常见问题
+nav:
+  title: FAQ
+  order: 3
+---
+
+## Q: 普通标签控制台报 `enhancedAction` 错误, [#14](https://github.com/Wxh16144/easy-antd-modal/issues/14)
+
+```txt
+React does not recognize the `enhancedAction` prop on a DOM element.
+```
+
+### A: 已知(边界)问题，因为 `easy-antd-modal` 会给弹窗内容添加一个 `enhancedAction` props
+
+```tsx ｜ pure
+import Modal from 'easy-antd-modal';
+
+const Content = (props) => <div {...props}>root 标签是普通标签</div>;
+
+export default () => (
+  <Modal defaultOpen>
+    <Content />
+  </Modal>
+);
+```
+
+#### 两个解决方法
+
+**方案一**： 临时给 `<Content />` 多包装一个 div。
+**方案二**： `<Content >` 组件 omit 掉 enhancedAction。
+
+---
+
+## Q: antd4.x 中，拖拽弹窗关闭后再打开位置没有重置。
+
+### A：预期的 😅
+
+antd4.x 没有提供显隐回调，直到 5.3.0 antd 才为 Modal 提供了 `afterOpenChange`方法， 所以不只是 4.x，在 5.3.0 以下存在同样问题。
+
+---
+
+## Q: 为什么 PC 和 移动端的代码都放在一起，增加依赖体积。[#17](https://github.com/Wxh16144/easy-antd-modal/issues/17)
+
+### A: 这也是规划错误，没有采用 monorepo 的方式，但是问题不是很大，一般构建工具都会对 js 代码 `tree shaking`
+
+---
+
+## Q: 内部通过 `enhancedAction.close()` 关闭不执行 `onClean/onClose` 方法, [#18](https://github.com/Wxh16144/easy-antd-modal/issues/18)
+
+### A: 设计缺陷，起初以为关闭即可，但是使用过程中还是难免会遇到这种需求。[1.6.0](./guide/advanced-close.md) 已经通过另外一种方式解决。可以试试看～

docs/guide/advanced-close.md

@@ -0,0 +1,55 @@
+---
+title: 内部关闭(回调)
+group:
+  title: 进阶使用
+  order: 1
+order: 5
+---
+
+## 快速了解 <Badge>1.6.0+</Badge>
+
+在 [issue#18](https://github.com/Wxh16144/easy-antd-modal/issues/18) 中，遇到需求是内部关闭操作无法执行`onClean/onClose` 方法。想了几个方案都不太满意。最终绕了一圈解决：
+
+内部调用的地方传入一个需要触发的回调函数名即可。后面参数则是该函数的执行参数。
+
+```tsx | pure
+import { Button } from 'antd';
+import type { ModalContentPropsWithEnhanced } from 'easy-antd-modal';
+import React from 'react';
+
+const ContentForm: React.FC<ModalContentPropsWithEnhanced> = ({ enhancedAction }) => {
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    enhancedAction?.close('onCancel', event); // <=== 关键改动
+  }
+
+  return <Button onClick={handleClick}>Close</Button>;
+};
+
+export default ContentForm;
+```
+
+:::warning
+**请注意 `<Modal />` 的关闭回调是 <span style="color:red">onCancel</span>, 而 `<Drawer />` 是 <span style="color:red">onClose</span>.**
+:::
+
+```tsx | pure
+import { Button } from 'antd';
+import type { DrawerContentPropsWithEnhanced } from 'easy-antd-modal';
+import React from 'react';
+
+const ContentForm: React.FC<DrawerContentPropsWithEnhanced> = ({ enhancedAction }) => {
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    enhancedAction?.close('onClose', event); // Drawer 的回调是 onClose
+  }
+
+  return <Button onClick={handleClick}>Close</Button>;
+};
+
+export default ContentForm;
+```
+
+### FAQ
+
+#### Q：为什么我不直接受控，然后将关闭方法传递下去了 🤣？
+
+条条大路通罗马, 确实直接 props 传递下去更直观（前提是你已经用了受控模式）， 但是具体情况需要具体分析 🧐

docs/guide/advanced.md

@@ -1,7 +1,8 @@
 ---
-title: 进阶使用
+title: 内部关闭
 group:
-  title: 快速上手
+  title: 进阶使用
+  order: 1
 order: 4
 ---
 

docs/guide/drag-modal.md

@@ -3,7 +3,7 @@ title: 拖拽 Modal
 group:
   title: 快速上手
   order: 0
-order: 3
+order: 4
 ---
 
 ## 推荐示例

docs/guide/static-method.md

@@ -2,7 +2,7 @@
 title: 静态方法
 group:
   title: Legacy
-order: 5
+  order: 99
 ---
 
 ## 静态方法

docs/guide/why.md

@@ -27,3 +27,7 @@ Ant Design 的 Modal 组件提供了非常多的 API 以便于我们可以灵活
 针对问题 1, 2, 3 封装了 [useModalEnhanced](/api/use-modal-enhanced) hook, 支持对 antd 提供的 API 进行封装, 不需要维护 open 状态, 以及绑定打开事件, 也不需要在 onOk 和 onCancel 中手动修改 open 状态, 一切都是自动的, 代码变得更加优雅。
 
 问题 4 属于一个新功能, 直接基于前面的 1, 2, 3 再次封装, 使得 Modal 可以拖拽。
+
+:::info{title=不是银弹}
+深知**一千个人眼中有一千个哈姆雷特**, 所以没有绝对好的方案，只有更适合自己的。 [看看更多 FAQ ](../faq.md)
+:::

examples/with-antd5/src/App.tsx

@@ -1,5 +1,21 @@
-import { Button, Space, Typography, version } from 'antd';
-import { DragModal, Drawer, Modal } from 'easy-antd-modal';
+import { Button, Divider, Space, Typography, version } from 'antd';
+import type {
+  DrawerContentPropsWithEnhanced,
+  ModalContentPropsWithEnhanced,
+} from 'easy-antd-modal';
+import { DragModal, Drawer, EasyAntdModalProvider, Modal } from 'easy-antd-modal';
+
+const ModalContent = ({ enhancedAction }: ModalContentPropsWithEnhanced) => (
+  <button type="button" onClick={(event) => enhancedAction?.close('onCancel', event)}>
+    Close(ModalContent)
+  </button>
+);
+
+const DrawerContent = ({ enhancedAction }: DrawerContentPropsWithEnhanced) => (
+  <button type="button" onClick={(event) => enhancedAction?.close('onClose', event)}>
+    Close(DrawerContent)
+  </button>
+);
 
 export default () => (
   <>
@@ -23,9 +39,20 @@ export default () => (
       I ❤️ antd
     </DragModal>
 
-    <br />
-    <br />
+    <Divider>Provider</Divider>
 
+    <EasyAntdModalProvider triggerProps="children" contentProps="content">
+      <Modal content="I ❤️ antd">
+        <Button type="primary">Modal(Provider)</Button>
+      </Modal>
+      <br />
+      <br />
+      <Drawer content="I ❤️ antd">
+        <Button type="primary">Drawer(Provider)</Button>
+      </Drawer>
+    </EasyAntdModalProvider>
+
+    <Divider>1.5.0</Divider>
     <Button
       danger
       onClick={() => {
@@ -45,5 +72,23 @@ export default () => (
     >
       Static Methods
     </Button>
+
+    <Divider>1.6.0</Divider>
+    <Modal
+      trigger={<Button>Open Show ModalContent</Button>}
+      onCancel={(event) => console.log('<Modal /> onCancel', { event })}
+    >
+      <ModalContent />
+    </Modal>
+
+    <br />
+    <br />
+
+    <Drawer
+      trigger={<Button>Open Show DrawerContent</Button>}
+      onClose={(event) => console.log('<Drawer /> onClose', { event })}
+    >
+      <DrawerContent />
+    </Drawer>
   </>
 );

package.json

@@ -109,7 +109,7 @@
     "commitlint": "^17",
     "concurrently": "^7",
     "cross-env": "^7",
-    "dumi": "^2",
+    "dumi": "^2.2.17",
     "dumi-theme-antd-style": "latest",
     "eslint": "^8",
     "fast-glob": "^3.3.1",