Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .dumi/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "../tsconfig.json",
"include": ["**/*"]
}
51 changes: 51 additions & 0 deletions docs/faq.md
Original file line number Diff line number Diff line change
@@ -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) 已经通过另外一种方式解决。可以试试看~
55 changes: 55 additions & 0 deletions docs/guide/advanced-close.md
Original file line number Diff line number Diff line change
@@ -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 传递下去更直观(前提是你已经用了受控模式), 但是具体情况需要具体分析 🧐
5 changes: 3 additions & 2 deletions docs/guide/advanced.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
title: 进阶使用
title: 内部关闭
group:
title: 快速上手
title: 进阶使用
order: 1
order: 4
---

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/drag-modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 拖拽 Modal
group:
title: 快速上手
order: 0
order: 3
order: 4
---

## 推荐示例
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/static-method.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: 静态方法
group:
title: Legacy
order: 5
order: 99
---

## 静态方法
Expand Down
4 changes: 4 additions & 0 deletions docs/guide/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
:::
53 changes: 49 additions & 4 deletions examples/with-antd5/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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 () => (
<>
Expand All @@ -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={() => {
Expand All @@ -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>
</>
);
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading
Loading