Merge 395a42a into 8633d9b

ant-design · Mar 12, 2021 · ad6e8e7 · ad6e8e7
2 parents 8633d9b + 395a42a
commit ad6e8e7
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 26 deletions.
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -38,6 +38,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     closeIcon,
     modalRender,
     focusTriggerAfterClose,
+    footer,
   } = props;
 
   devWarning(
@@ -113,19 +114,23 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
             <div className={`${contentPrefixCls}-content`}>{props.content}</div>
           </div>
         </ConfigProvider>
-        <div className={`${contentPrefixCls}-btns`}>
-          {cancelButton}
-          <ActionButton
-            type={okType}
-            actionFn={onOk}
-            closeModal={close}
-            autoFocus={autoFocusButton === 'ok'}
-            buttonProps={okButtonProps}
-            prefixCls={`${rootPrefixCls}-btn`}
-          >
-            {okText}
-          </ActionButton>
-        </div>
+        {footer === undefined ? (
+          <div className={`${contentPrefixCls}-btns`}>
+            {cancelButton}
+            <ActionButton
+              type={okType}
+              actionFn={onOk}
+              closeModal={close}
+              autoFocus={autoFocusButton === 'ok'}
+              buttonProps={okButtonProps}
+              prefixCls={`${rootPrefixCls}-btn`}
+            >
+              {okText}
+            </ActionButton>
+          </div>
+        ) : (
+          footer
+        )}
       </div>
     </Dialog>
   );

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -102,6 +102,7 @@ export interface ModalFuncProps {
   cancelButtonProps?: ButtonProps;
   centered?: boolean;
   width?: string | number;
+  footer?: React.ReactNode;
   okText?: React.ReactNode;
   okType?: LegacyButtonType;
   cancelText?: React.ReactNode;

diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap
@@ -114,14 +114,39 @@ exports[`renders ./components/modal/demo/dark.md correctly 1`] = `
 `;
 
 exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
 >
-  <span>
-    Open Modal with customized footer
-  </span>
-</button>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Open Modal with customized footer
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  />
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Confirm without footer
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `

diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
@@ -75,6 +75,17 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
+  it('should not render footer when footer is null', () => {
+    jest.useFakeTimers();
+    confirm({
+      content: 'some descriptions',
+      footer: null,
+    });
+    jest.runAllTimers();
+    expect(document.querySelector('.ant-modal-confirm-btns')).toBe(null);
+    jest.useRealTimers();
+  });
+
   it('trigger onCancel once when click on cancel button', () => {
     const onCancel = jest.fn();
     const onOk = jest.fn();

diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
@@ -18,7 +18,7 @@ A more complex example which define a customized footer button bar. The dialog w
 You could set `footer` to `null` if you don't need default footer buttons.
 
 ```jsx
-import { Modal, Button } from 'antd';
+import { Modal, Button, Space } from 'antd';
 
 class App extends React.Component {
   state = {
@@ -43,10 +43,26 @@ class App extends React.Component {
     this.setState({ visible: false });
   };
 
+  openConfirmWithoutFooter = () => {
+    Modal.confirm({
+      content: (
+        <>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </>
+      ),
+      maskClosable: true,
+      footer: null,
+    });
+  };
+
   render() {
     const { visible, loading } = this.state;
     return (
-      <>
+      <Space>
         <Button type="primary" onClick={this.showModal}>
           Open Modal with customized footer
         </Button>
@@ -79,7 +95,11 @@ class App extends React.Component {
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Modal>
-      </>
+
+        <Button type="primary" onClick={this.openConfirmWithoutFooter}>
+          Confirm without footer
+        </Button>
+      </Space>
     );
   }
 }

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -33,7 +33,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | false |  |
 | maskStyle | 遮罩样式 | CSSProperties |  |  |
 | modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
 | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |  |
@@ -128,7 +128,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 +172,4 @@ return (
 
 ### 静态方法如何设置 prefixCls ？
 
-你可以通过 [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) 进行设置。
+你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。