mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: Modal.xxx support wrapClassName prop (#32676)

Browse Source 
Co-authored-by: machixian <machixian@myweimai.com>
This commit is contained in:
WeijieChen 2021-10-28 18:41:30 +08:00 committed by GitHub
parent 16bb5489e6
commit 70e1d6a1d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/modal/ConfirmDialog.tsx
View File

@ -33,6 +33,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
cancelButtonProps,
direction,
prefixCls,
wrapClassName,
rootPrefixCls,
iconPrefixCls,
bodyStyle,
@ -84,7 +85,10 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
<Dialog
prefixCls={prefixCls}
className={classString}
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!props.centered })}
wrapClassName={classNames(
{ [`${contentPrefixCls}-centered`]: !!props.centered },
wrapClassName,
)}
onCancel={() => close({ triggerCancel: true })}
visible={visible}
title=""

1
components/modal/Modal.tsx
View File

@ -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;

3
components/modal/index.en-US.md
View File

@ -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`](</components/config-provider/#ConfigProvider.config()-4.13.0+>)

5
components/modal/index.zh-CN.md
View File

@ -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`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。