From 5ac3f57b7c6f18350d3b6501249f0062e9fc4e74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2?= <wxh1220@gmail.com>
Date: Wed, 8 Nov 2023 11:10:35 +0800
Subject: [PATCH] feat(modal): PureRender support custom footer callback
 (#44985)

* demo: update debug demo

* chore: improve typo

* Revert "chore: improve typo"

This reverts commit d5163f98ececa6266d34d68d9d4bc9f83cf06095.

* chore: update

* chore: update demo

* chore: update snapshots

* chore: update
---
 components/modal/PurePanel.tsx                |   7 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 158 ++++++++++++++++++
 .../__snapshots__/demo.test.tsx.snap          | 158 ++++++++++++++++++
 components/modal/demo/render-panel.tsx        |  28 +++-
 4 files changed, 347 insertions(+), 4 deletions(-)

diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx
index 66ee59fcf2..7abde56479 100644
--- a/components/modal/PurePanel.tsx
+++ b/components/modal/PurePanel.tsx
@@ -13,8 +13,8 @@ import { Footer, renderCloseIcon } from './shared';
 import useStyle from './style';
 
 export interface PurePanelProps
-  extends Omit<PanelProps, 'prefixCls'>,
-    Pick<ModalFuncProps, 'type'> {
+  extends Omit<PanelProps, 'prefixCls' | 'footer'>,
+    Pick<ModalFuncProps, 'type' | 'footer'> {
   prefixCls?: string;
   style?: React.CSSProperties;
 }
@@ -28,6 +28,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     type,
     title,
     children,
+    footer,
     ...restProps
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -60,7 +61,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     additionalProps = {
       closable: closable ?? true,
       title,
-      footer: props.footer === undefined ? <Footer {...props} /> : props.footer,
+      footer: footer !== null && <Footer {...props} />,
       children,
     };
   }
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 334b02a824..e214278cd9 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -972,6 +972,164 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
       tabindex="0"
     />
   </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width: 380px; height: 200px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Custom Footer Render
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-typography"
+        >
+          <a
+            class="ant-typography"
+            href="https://github.com/ant-design/ant-design/pull/44318"
+          >
+            Feature #44318
+          </a>
+        </div>
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <div
+          class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+        >
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-dangerous"
+                  type="button"
+                >
+                  <span>
+                    Custom
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index 35b06a86c9..6cb2a465a4 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -938,6 +938,164 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
       tabindex="0"
     />
   </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:380px;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Custom Footer Render
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-typography"
+        >
+          <a
+            class="ant-typography"
+            href="https://github.com/ant-design/ant-design/pull/44318"
+          >
+            Feature #44318
+          </a>
+        </div>
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <div
+          class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+        >
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-dangerous"
+                  type="button"
+                >
+                  <span>
+                    Custom
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/modal/demo/render-panel.tsx b/components/modal/demo/render-panel.tsx
index 8e6ac8e5e8..b58784fe2a 100644
--- a/components/modal/demo/render-panel.tsx
+++ b/components/modal/demo/render-panel.tsx
@@ -1,9 +1,23 @@
 import React from 'react';
-import { Modal } from 'antd';
+import { Button, Modal, Space, Typography } from 'antd';
+import type { ModalFuncProps } from 'antd/es/modal/interface';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
 
+const customFooterFn: ModalFuncProps['footer'] = (originNode, { OkBtn, CancelBtn }) => (
+  <Space direction="vertical">
+    <Space>{originNode}</Space>
+    <Space>
+      <CancelBtn />
+      <Button danger type="primary">
+        Custom
+      </Button>
+      <OkBtn />
+    </Space>
+  </Space>
+);
+
 export default () => (
   <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
     <InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
@@ -15,5 +29,17 @@ export default () => (
     <InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
       Some descriptions.
     </InternalPanel>
+
+    <InternalPanel
+      title="Custom Footer Render"
+      style={{ width: 380, height: 200 }}
+      footer={customFooterFn}
+    >
+      <Typography.Paragraph>
+        <Typography.Link href="https://github.com/ant-design/ant-design/pull/44318">
+          Feature #44318
+        </Typography.Link>
+      </Typography.Paragraph>
+    </InternalPanel>
   </div>
 );