feat: Modal.xxx supports footer (#39048)

#16644
ant-design · Dec 7, 2022 · a836a3a · a836a3a
1 parent f75cd07
commit a836a3a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -41,7 +41,7 @@ export function ConfirmContent(
     rootPrefixCls,
     type,
     okCancel,
-
+    footer,
     // Legacy for static function usage
     locale: staticLocale,
   } = props;
@@ -107,19 +107,23 @@ export function ConfirmContent(
               )}
               <div className={`${confirmPrefixCls}-content`}>{props.content}</div>
             </div>
-            <div className={`${confirmPrefixCls}-btns`}>
-              {cancelButton}
-              <ActionButton
-                type={okType}
-                actionFn={onOk}
-                close={close}
-                autoFocus={autoFocusButton === 'ok'}
-                buttonProps={okButtonProps}
-                prefixCls={`${rootPrefixCls}-btn`}
-              >
-                {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
-              </ActionButton>
-            </div>
+            {footer !== undefined ? (
+              footer
+            ) : (
+              <div className={`${confirmPrefixCls}-btns`}>
+                {cancelButton}
+                <ActionButton
+                  type={okType}
+                  actionFn={onOk}
+                  close={close}
+                  autoFocus={autoFocusButton === 'ok'}
+                  buttonProps={okButtonProps}
+                  prefixCls={`${rootPrefixCls}-btn`}
+                >
+                  {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
+                </ActionButton>
+              </div>
+            )}
           </div>
         );
       }}

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -131,6 +131,7 @@ export interface ModalFuncProps {
   direction?: DirectionType;
   bodyStyle?: React.CSSProperties;
   closeIcon?: React.ReactNode;
+  footer?: React.ReactNode;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
   focusTriggerAfterClose?: boolean;
 }

diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx
@@ -703,4 +703,28 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
     errSpy.mockRestore();
   });
+
+  it('null of Footer', async () => {
+    Modal.confirm({
+      footer: null,
+    });
+
+    await waitFakeTimer();
+
+    expect($$('.ant-modal-confirm-btns')).toHaveLength(0);
+  });
+
+  it('Update Footer', async () => {
+    Modal.confirm({
+      footer: (
+        <div>
+          <button className="custom-modal-footer" type="button">
+            Custom Modal Footer
+          </button>
+        </div>
+      ),
+    });
+    await waitFakeTimer();
+    expect($$('.custom-modal-footer')).toHaveLength(1);
+  });
 });
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -98,6 +98,7 @@ The items listed above are all functions, expecting a settings object as paramet
 | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
 | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
+| footer | Footer content, set as `footer: null` when you don't need default buttons	| ReactNode | - | 5.1.0 |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | Custom icon | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | Whether support press esc to close | boolean | true |  |

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -101,6 +101,7 @@ demo:
 | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
 | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0  |
 | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |