From 70e1d6a1d087150dd6120ee69fef7376935f5281 Mon Sep 17 00:00:00 2001 From: WeijieChen Date: Thu, 28 Oct 2021 18:41:30 +0800 Subject: [PATCH] feat: Modal.xxx support wrapClassName prop (#32676) Co-authored-by: machixian --- components/modal/ConfirmDialog.tsx | 6 +++++- components/modal/Modal.tsx | 1 + components/modal/index.en-US.md | 3 ++- components/modal/index.zh-CN.md | 5 +++-- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index 0c460e9226..da0eafa568 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -33,6 +33,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { cancelButtonProps, direction, prefixCls, + wrapClassName, rootPrefixCls, iconPrefixCls, bodyStyle, @@ -84,7 +85,10 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { close({ triggerCancel: true })} visible={visible} title="" diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 9b28f9cb2b..6fd9c3191c 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -109,6 +109,7 @@ export interface ModalFuncProps { zIndex?: number; okCancel?: boolean; style?: React.CSSProperties; + wrapClassName?: string; maskStyle?: React.CSSProperties; type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm'; keyboard?: boolean; diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 601a23dccb..b8ec239d37 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -87,6 +87,7 @@ The items listed above are all functions, expecting a settings object as paramet | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | | | title | Title | ReactNode | - | | | width | Width of the modal dialog | string \| number | 416 | | +| wrapClassName | The class name of the container of the modal dialog | string | - | | | zIndex | The `z-index` of the Modal | number | 1000 | | | onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. If the function does not take any parameter (`!onCancel.length`) then modal dialog will be closed unless returned value is `true` (`!!onCancel()`). You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | | | onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. If the function does not take any parameter (`!onOk.length`) then modal dialog will be closed unless returned value is `true` (`!!onOk()`). You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | | @@ -171,4 +172,4 @@ You can config `transitionName=""` and `maskTransitionName=""` to remove motion ### How to set static methods prefixCls ？ -You can config with [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) +You can config with [`ConfigProvider.config`]() diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 6e6ebe4d06..6824a802ac 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -90,6 +90,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | | | title | 标题 | ReactNode | - | | | width | 宽度 | string \| number | 416 | | +| wrapClassName | 对话框外层容器的类名 | string | - | | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | | onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | @@ -128,7 +129,7 @@ browserHistory.listen(() => { ### Modal.useModal() -当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。 +当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。 ```jsx const [modal, contextHolder] = Modal.useModal(); @@ -172,4 +173,4 @@ return ( ### 静态方法如何设置 prefixCls ？ -你可以通过 [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) 进行设置。 +你可以通过 [`ConfigProvider.config`]() 进行设置。