From 8f8129802758d529fe9048484e46f0012bed8f01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 16 Jan 2023 23:48:26 +0800 Subject: [PATCH] docs: Adjust Modal demos (#40274) * docs: Adjust modal demo * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 120 +++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 120 +++++++++--------- components/modal/demo/info.md | 7 - components/modal/demo/locale.tsx | 39 +++--- components/modal/demo/manual.md | 4 +- components/modal/demo/manual.tsx | 43 ++++--- components/modal/demo/static-info.md | 7 + .../modal/demo/{info.tsx => static-info.tsx} | 0 components/modal/index.en-US.md | 8 +- components/modal/index.zh-CN.md | 6 +- components/modal/useModal/index.tsx | 5 +- 11 files changed, 190 insertions(+), 169 deletions(-) delete mode 100644 components/modal/demo/info.md create mode 100644 components/modal/demo/static-info.md rename components/modal/demo/{info.tsx => static-info.tsx} (100%) diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap index c252f2f0f2..b594415add 100644 --- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -195,66 +195,6 @@ exports[`renders ./components/modal/demo/hooks.tsx extend context correctly 1`] `; -exports[`renders ./components/modal/demo/info.tsx extend context correctly 1`] = ` -
-
- -
-
- -
-
- -
-
- -
-
-`; - exports[`renders ./components/modal/demo/locale.tsx extend context correctly 1`] = `
`; +exports[`renders ./components/modal/demo/static-info.tsx extend context correctly 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + exports[`renders ./components/modal/demo/width.tsx extend context correctly 1`] = ` -
-
- -
-
- -
-
- -
- -`; - exports[`renders ./components/modal/demo/locale.tsx correctly 1`] = `
`; +exports[`renders ./components/modal/demo/static-info.tsx correctly 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + exports[`renders ./components/modal/demo/width.tsx correctly 1`] = ` + + {contextHolder} + + ); }; -const App: React.FC = () => ( - - - - -); - export default App; diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md index 012d00ce48..54fc67d055 100644 --- a/components/modal/demo/manual.md +++ b/components/modal/demo/manual.md @@ -1,7 +1,7 @@ ## zh-CN -手动更新和关闭 `Modal.method` 方式创建的对话框。 +通过返回的 instance 手动更新和关闭对话框。 ## en-US -Manually updating and destroying a modal from `Modal.method`. +Manually updating and destroying a modal through instance. diff --git a/components/modal/demo/manual.tsx b/components/modal/demo/manual.tsx index e471bcfed4..c2634309f8 100644 --- a/components/modal/demo/manual.tsx +++ b/components/modal/demo/manual.tsx @@ -1,27 +1,36 @@ -import React from 'react'; import { Button, Modal } from 'antd'; +import React from 'react'; -const countDown = () => { - let secondsToGo = 5; +const App: React.FC = () => { + const [modal, contextHolder] = Modal.useModal(); - const modal = Modal.success({ - title: 'This is a notification message', - content: `This modal will be destroyed after ${secondsToGo} second.`, - }); + const countDown = () => { + let secondsToGo = 5; - const timer = setInterval(() => { - secondsToGo -= 1; - modal.update({ + const instance = modal.success({ + title: 'This is a notification message', content: `This modal will be destroyed after ${secondsToGo} second.`, }); - }, 1000); - setTimeout(() => { - clearInterval(timer); - modal.destroy(); - }, secondsToGo * 1000); + const timer = setInterval(() => { + secondsToGo -= 1; + instance.update({ + content: `This modal will be destroyed after ${secondsToGo} second.`, + }); + }, 1000); + + setTimeout(() => { + clearInterval(timer); + instance.destroy(); + }, secondsToGo * 1000); + }; + + return ( + <> + + {contextHolder} + + ); }; -const App: React.FC = () => ; - export default App; diff --git a/components/modal/demo/static-info.md b/components/modal/demo/static-info.md new file mode 100644 index 0000000000..53a4143f74 --- /dev/null +++ b/components/modal/demo/static-info.md @@ -0,0 +1,7 @@ +## zh-CN + +在绝大多数场景，都不需要静态方法。它无法消费 context，例如无法响应动态主题。请优先使用 hooks 版本或者 `App` 组件提供的 Modal 实例。 + +## en-US + +In most case, you do not need static method. It can not consume context like dynamic theme. Please use hooks version or `App` provided instance first. diff --git a/components/modal/demo/info.tsx b/components/modal/demo/static-info.tsx similarity index 100% rename from components/modal/demo/info.tsx rename to components/modal/demo/static-info.tsx diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 5e0409eacc..72e5635086 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -11,7 +11,9 @@ Modal dialogs. ## When To Use -When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on. +When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. + +Additionally, if you need show a simple confirmation dialog, you can use [`App.useApp`](/components/app/) hooks. ## Examples @@ -20,16 +22,16 @@ When requiring users to interact with the application, but without jumping to a Asynchronously close Customized Footer Confirmation modal dialog -Information modal dialog Internationalization Manual to update destroy To customize the position of modal -destroy confirmation modal dialog Dark Bg Customize footer buttons props Use hooks to get context Custom modal content render To customize the width of modal +Static Method +destroy confirmation modal dialog \_InternalPanelDoNotUseOrYouWillBeFired Control modal's animation origin position Wireframe diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index eaebbdf1a3..a297de303a 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -14,7 +14,7 @@ demo: 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。 -另外当需要一个简洁的确认框询问用户时，可以使用 `Modal.confirm()` 等语法糖方法。 +另外当需要一个简洁的确认框询问用户时，可以使用 [`App.useApp`](/components/app-cn/) 封装的语法糖方法。 ## 代码演示 @@ -23,16 +23,16 @@ demo: 异步关闭 自定义页脚 确认对话框 -信息提示 国际化 手动更新和移除 自定义位置 -销毁确认对话框 暗背景 自定义页脚按钮属性 使用 hooks 获得上下文 自定义渲染对话框 自定义模态的宽度 +静态方法 +销毁确认对话框 \_InternalPanelDoNotUseOrYouWillBeFired 控制弹框动画原点 线框风格 diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx index db9b6e7818..1d89750889 100644 --- a/components/modal/useModal/index.tsx +++ b/components/modal/useModal/index.tsx @@ -27,7 +27,10 @@ const ElementsHolder = React.memo( }), ); -function useModal(): readonly [Omit, React.ReactElement] { +function useModal(): readonly [ + instance: Omit, + contextHolder: React.ReactElement, +] { const holderRef = React.useRef(null); // ========================== Effect ==========================