Support centered settings

components/modal/Modal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Dialog from 'rc-dialog';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Button from '../button';
 import { ButtonType, NativeButtonProps } from '../button/button';
@@ -11,6 +12,7 @@ let mousePosition: { x: number, y: number } | null;
 let mousePositionEventBinded: boolean;
 
 export interface ModalProps {
+  prefixCls?: string;
   /** 对话框是否可见*/
   visible?: boolean;
   /** 确定按钮 loading*/
@@ -24,6 +26,8 @@ export interface ModalProps {
   /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
   onCancel?: (e: React.MouseEvent<any>) => void;
   afterClose?: () => void;
+  /** 居中 */
+  centered?: boolean;
   /** 宽度*/
   width?: string | number;
   /** 底部内容*/
@@ -61,6 +65,7 @@ export interface ModalFuncProps {
   content?: React.ReactNode;
   onOk?: (...args: any[]) => any | PromiseLike<any>;
   onCancel?: (...args: any[]) => any | PromiseLike<any>;
+  centered?: boolean;
   width?: string | number;
   iconClassName?: string;
   okText?: string;
@@ -111,6 +116,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
     onCancel: PropTypes.func,
     okText: PropTypes.node,
     cancelText: PropTypes.node,
+    centered: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     confirmLoading: PropTypes.bool,
     visible: PropTypes.bool,
@@ -175,7 +181,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
   }
 
   render() {
-    const { footer, visible } = this.props;
+    const { footer, visible, className, centered, prefixCls, ...restProps } = this.props;
 
     const defaultFooter = (
       <LocaleReceiver
@@ -188,7 +194,8 @@ export default class Modal extends React.Component<ModalProps, {}> {
 
     return (
       <Dialog
-        {...this.props}
+        {...restProps}
+        className={classNames({ [`${prefixCls}-centered`]: centered }, className)}
         footer={footer === undefined ? defaultFooter : footer}
         visible={visible}
         mousePosition={mousePosition}

components/modal/confirm.tsx

@@ -32,6 +32,9 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
   const classString = classNames(
     prefixCls,
     `${prefixCls}-${props.type}`,
+    {
+      [`${prefixCls}-centered`]: props.centered,
+    },
     props.className,
   );
 

components/modal/demo/position.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
+`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `centered` 或类似 `style.top` 等样式来设置对话框位置。
 
 ## en-US
 
-After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
+After release `1.0`, Modal's `align` prop was removed. You can use `centered`、`style.top` or other styles to
 set position of modal dialog.
 
 ````jsx
@@ -50,7 +50,7 @@ class App extends React.Component {
         <Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
         <Modal
           title="Vertically centered modal dialog"
-          wrapClassName="vertical-center-modal"
+          centered
           visible={this.state.modal2Visible}
           onOk={() => this.setModal2Visible(false)}
           onCancel={() => this.setModal2Visible(false)}
@@ -66,39 +66,3 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ````
-
-````css
-/* use css to set position of modal */
-.vertical-center-modal {
-  text-align: center;
-  white-space: nowrap;
-}
-
-.vertical-center-modal:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 0;
-}
-
-.vertical-center-modal .ant-modal {
-  display: inline-block;
-  vertical-align: middle;
-  top: 0;
-  text-align: left;
-}
-
-/*
-// Use flex which not working in IE
-.vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vertical-center-modal .ant-modal {
-  top: 0;
-}
-*/
-````

components/modal/index.en-US.md

@@ -21,6 +21,7 @@ and so on.
 | afterClose | Specify a function that will be called when modal is closed completely. | function | - |
 | bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
 | cancelText | Text of the Cancel button | string | `Cancel` |
+| centered | Centered Modal | Boolean | `false` |
 | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
 | destroyOnClose | Whether to unmount child compenents on onClose | boolean | false |
@@ -62,6 +63,7 @@ The properties of the object are follows:
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | cancelText | Text of the Cancel button | string | `Cancel` |
+| centered | Centered Modal | Boolean | `false` |
 | className | className of container | string | - |
 | content | Content | string\|ReactNode | - |
 | iconType | Icon `type` of the Icon component | string | `question-circle` |

components/modal/index.zh-CN.md

@@ -20,6 +20,7 @@ title: Modal
 | afterClose | Modal 完全关闭后的回调 | function | 无 |
 | bodyStyle | Modal body 样式 | object | {} |
 | cancelText | 取消按钮文字 | string | 取消 |
+| centered | 垂直居中展示 Modal | Boolean | `false` |
 | closable | 是否显示右上角的关闭按钮 | boolean | true |
 | confirmLoading | 确定按钮 loading | boolean | 无 |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |

components/modal/style/modal.less

@@ -1,4 +1,5 @@
 @dialog-prefix-cls: ~"@{ant-prefix}-modal";
+@table-prefix-cls: ~"@{ant-prefix}-table";
 
 .@{dialog-prefix-cls} {
   .reset-component;
@@ -133,12 +134,35 @@
   }
 }
 
+.@{dialog-prefix-cls}-centered {
+  text-align: center;
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    width: 0;
+  }
+  .@{dialog-prefix-cls} {
+    display: inline-block;
+    vertical-align: middle;
+    top: 0;
+    text-align: left;
+  }
+  .@{table-prefix-cls} {
+    &-body {
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+  }
+}
+
 @media (max-width: @screen-sm-max) {
   .@{dialog-prefix-cls} {
     width: auto !important;
     margin: 10px;
   }
-  .vertical-center-modal {
+  .@{dialog-prefix-cls}-centered {
     .@{dialog-prefix-cls} {
       flex: 1;
     }