feat: Modal footer support custom render function #44318

RedJue · 2023-08-21T10:07:30Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Modal footer support custom render function
🇨🇳 Chinese	模态框页脚支持自定义函数渲染

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

🚀 Summary

`🤖 Generated by Copilot at 641db8d`

This pull request adds a new feature to the Modal component and its methods, allowing users to customize the footer rendering function with the footer prop. It also refactors the footer buttons into separate components and uses context to pass the props. It updates the documentation, the type definitions, and the test cases accordingly.

🔍 Walkthrough

`🤖 Generated by Copilot at 641db8d`

Add custom footer rendering function feature to Modal and Modal.confirm methods (link, link, link, link, link, link, link, link, link)
Use ConfirmCancelBtn and ConfirmOkBtn components to replace ActionButton in ConfirmContent function (link, link, link)
Use NormalCancelBtn and NormalOkBtn components to replace Button in Footer function (link, link, link)
Use context and context providers to pass props to footer buttons (link, link, link)
Support footer prop as a function that receives origin node and extra components as arguments (link, link, link, link, link, link, link, link, link, link)
Add examples and documentation for the feature in both Chinese and English (link, link, link, link)
Add test cases to check custom footer rendering function feature in Modal and Modal.confirm methods (link, link)
Remove unused import of ActionButton from ConfirmDialog (link)

stackblitz · 2023-08-21T10:07:33Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2023-08-21T10:07:44Z

afc163 · 2023-08-21T10:09:41Z

components/modal/index.zh-CN.md

@@ -54,7 +55,7 @@ demo:
 | confirmLoading | 确定按钮 loading | boolean | false |  |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
 | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
-| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode | (确定取消按钮) |  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | (originNode: React.ReactNode, extra: { ConfirmBtn: FC; CancelBtn: FC }) => React.ReactNode \| React.ReactNode | (确定取消按钮) | 5.9.0 |


感觉需要有个 TS 定义放在 Popover 的交互比较好，这里面越写越长了。

可以，我加一个类型吧，然后链接过去

github-actions · 2023-08-21T10:17:35Z

size-limit report 📦

Path	Size
`./dist/antd.min.js`	390.73 KB (+396 B 🔺)
`./dist/antd-with-locales.min.js`	449.65 KB (+415 B 🔺)

argos-ci · 2023-08-21T10:21:03Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	🧿 Changes detected (Review)	16 changes	Aug 28, 2023, 3:17 AM

afc163 · 2023-08-21T10:25:12Z

体积怎么多了这么多。

RedJue · 2023-08-21T10:29:07Z

体积怎么多了这么多。

代码层面感觉加的不多，是第三方依赖更新？

codecov · 2023-08-21T10:37:00Z

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (68ee322) 100.00% compared to head (134c935) 100.00%.
Report is 11 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #44318   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          663       668    +5     
  Lines        11309     11325   +16     
  Branches      3051      3062   +11     
=========================================
+ Hits         11309     11325   +16

Files Changed	Coverage Δ
components/date-picker/style/index.ts	`100.00% <ø> (ø)`
components/dropdown/dropdown.tsx	`100.00% <ø> (ø)`
components/input/style/index.ts	`100.00% <ø> (ø)`
components/tour/style/index.ts	`100.00% <ø> (ø)`
components/form/style/index.ts	`100.00% <100.00%> (ø)`
components/message/index.tsx	`100.00% <100.00%> (ø)`
components/modal/ConfirmDialog.tsx	`100.00% <100.00%> (ø)`
components/modal/Modal.tsx	`100.00% <100.00%> (ø)`
components/modal/components/ConfirmCancelBtn.tsx	`100.00% <100.00%> (ø)`
components/modal/components/ConfirmOkBtn.tsx	`100.00% <100.00%> (ø)`
... and 6 more

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

afc163 · 2023-08-21T10:37:16Z

不是的，这个体积对比就只对比代码本身的变化。看上去拆了很多新组件文件出来，看下是否有必要。

RedJue · 2023-08-21T11:00:43Z

不是的，这个体积对比就只对比代码本身的变化。看上去拆了很多新组件文件出来，看下是否有必要。

因为这个 API 需要把原来写在一起的 Button 抽离成单个组件，好像也没法避免？

afc163 · 2023-08-22T02:07:06Z

components/modal/ConfirmDialog.tsx

+    close,
+    onCancel,
+    onConfirm,
+  };


这两排属性声明了很多次，蛮占体积，是否是有必要的？

我尝试去掉吧，再优化一下

afc163 · 2023-08-22T02:07:16Z

components/modal/components/ConfirmCancelBtn.tsx

+    rootPrefixCls,
+    close,
+    onCancel,
+    onConfirm,


这里也有一排

Wxh16144 · 2023-08-22T09:42:32Z

components/modal/Modal.tsx

-    footer === undefined ? <Footer {...props} onOk={handleOk} onCancel={handleCancel} /> : footer;
+    footer === undefined || typeof footer === 'function' ? (
+      <Footer {...props} onOk={handleOk} onCancel={handleCancel} />
+    ) : (
+      footer
+    );


同上，可以考虑抽象为一个函数来判断，三元运算有点多了

逻辑感觉不是很复杂吧，一个三目感觉可以搞定？

Wxh16144 · 2023-08-22T09:43:04Z

components/modal/ConfirmDialog.tsx

-      {footer === undefined ? (
-        <div className={`${confirmPrefixCls}-btns`}>
-          {cancelButton}
-          <ActionButton
-            isSilent={isSilent}
-            type={okType}
-            actionFn={onOk}
-            close={(...args: any[]) => {
-              close?.(...args);
-              onConfirm?.(true);
-            }}
-            autoFocus={autoFocusButton === 'ok'}
-            buttonProps={okButtonProps}
-            prefixCls={`${rootPrefixCls}-btn`}
-          >
-            {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
-          </ActionButton>
-        </div>
+
+      {footer === undefined || typeof footer === 'function' ? (
+        <ConfirmOkBtnProvider value={confirmBtnCtxValueMemo}>
+          <ConfirmCancelBtnContextProvider value={cancelBtnCtxValueMemo}>
+            <div className={`${confirmPrefixCls}-btns`}>
+              {footer === undefined
+                ? footerOriginNode
+                : footer?.(footerOriginNode, {
+                    ConfirmBtn,
+                    CancelBtn,
+                  })}
+            </div>
+          </ConfirmCancelBtnContextProvider>
+        </ConfirmOkBtnProvider>


这段代码感觉不是那么好阅读

确实，可能嵌套多了，看起来代码不是很直观，但这也是我目前能想到最简洁的了，有优化建议不？

Wxh16144 · 2023-08-22T09:50:39Z

components/modal/index.en-US.md

+## footerRenderParams
+
+<!-- prettier-ignore -->
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| originNode | default node | React.ReactNode                   | -      |
+| extra      | extended options | { ConfirmBtn: FC; CancelBtn: FC } | -      |
+


感觉这里可以直接用 tsx + interface , 比如：（伪代码）

type FooterBuiltinProps = { ConfirmBtn: React.ReactNode; CancelBtn: React.ReactNode; } type RenderFooter = (originNode: FooterProps, extra: FooterBuiltinProps) => React.ReactNode; export type FooterProps = React.ReactNode | RenderFooter;

文档里好像很难显示ts定义

那就先保持你的写法~

Wxh16144 · 2023-08-22T09:50:54Z

components/modal/index.zh-CN.md

+## footerRenderParams
+
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| originNode | 默认节点 | React.ReactNode                   | -      |
+| extra      | 扩展选项 | { ConfirmBtn: FC; CancelBtn: FC } | -      |
+


同上👆🏻

afc163 · 2023-08-23T03:07:16Z

components/modal/shared.tsx

+      <NormalCancelBtn />
+      <NormalOkBtn />
+    </>
+  );


这段代码上面出现过一次？和 components/modal/ConfirmDialog.tsx 里的改动基本一样。

大体逻辑差不多，正常的 Modal 和 Modal.confirm 两边按钮逻辑不太一样，所以又拆了两个按钮出来

components/modal/shared.tsx

Wxh16144 · 2023-08-23T03:10:00Z

components/modal/shared.tsx

+
+  const confirmBtnCtxValueMemo = React.useMemo(
+    () => confirmBtnCtxValue,
+    [...Object.values(confirmBtnCtxValue)],


这样写行不行呢？（其实我也不太熟悉 23333~）

Suggested change

[...Object.values(confirmBtnCtxValue)],

Object.values(confirmBtnCtxValue),

感觉可以，看起来不需要解构

你先本地试试， confirmBtnCtxValue如果是 undefined values 是不是会报错

这是自己定义的，不会是 undefined

Wxh16144 · 2023-08-23T03:10:12Z

components/modal/shared.tsx

+  );
+  const cancelBtnCtxValueMemo = React.useMemo(
+    () => cancelBtnCtxValue,
+    [...Object.values(cancelBtnCtxValue)],


Suggested change

[...Object.values(cancelBtnCtxValue)],

Object.values(cancelBtnCtxValue),

Wxh16144 · 2023-08-23T03:10:35Z

components/modal/index.en-US.md

+## footerRenderParams
+
+<!-- prettier-ignore -->
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| originNode | default node | React.ReactNode                   | -      |
+| extra      | extended options | { ConfirmBtn: FC; CancelBtn: FC } | -      |
+


那就先保持你的写法~

MadCcc · 2023-08-24T03:45:08Z

components/modal/context.ts

+export const NormalCancelBtnContext = React.createContext<NormalCancelBtnProps>(
+  {} as NormalCancelBtnProps,
+);
+export const NormalOkBtnContext = React.createContext<NormalOkBtnProps>({} as NormalOkBtnProps);
+export const ConfirmCancelBtnContext = React.createContext<ConfirmCancelBtnProps>(
+  {} as ConfirmCancelBtnProps,


这里能不能只用一个 context，本身都是 Modal 的内部属性

应该可以收敛成一个，我一会优化一下

MadCcc · 2023-08-24T06:54:31Z

components/modal/shared.tsx

@@ -42,23 +45,46 @@ export const Footer: React.FC<
    onCancel,
    okButtonProps,
    cancelButtonProps,
+    footer,


感觉不应该把 footer 放到 Footer 组件里处理，逻辑应该和 node 一样是整体替换掉的

逻辑应该保持一致，要么都在里面处理，要么都在外面处理

那我都收到里面去统一处理

afc163 · 2023-08-25T03:11:46Z

多了更多了，加这个功能多了 400B ..

RedJue · 2023-08-25T03:17:23Z

多了更多了，加这个功能多了 400B ..

要拆组件出来好像也确实避免不了...😅

MadCcc · 2023-08-25T03:28:11Z

components/modal/shared.tsx

    </DisabledContextProvider>
+  ) : (
+    footer


这个是不是也应该放在 provider 里？

应该不用吧，这个footer应该是用户自己定义的节点，不应该受 provider 的影响

RedJue requested a review from zombieJ August 21, 2023 10:07

RedJue requested a review from kiner-tang August 21, 2023 10:07

RedJue force-pushed the feat-modal-footer branch from 641db8d to 0747936 Compare August 21, 2023 10:08

kiner-tang approved these changes Aug 21, 2023

View reviewed changes

afc163 reviewed Aug 21, 2023

View reviewed changes

RedJue force-pushed the feat-modal-footer branch from 75f96b2 to 6adc8c6 Compare August 22, 2023 01:54

afc163 reviewed Aug 22, 2023

View reviewed changes

components/modal/components/ConfirmCancelBtn.tsx

rootPrefixCls,

close,

onCancel,

onConfirm,

Copy link

Member

afc163 Aug 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也有一排

RedJue force-pushed the feat-modal-footer branch from 24f3ea8 to bded5e8 Compare August 22, 2023 04:21

Wxh16144 reviewed Aug 22, 2023

View reviewed changes

afc163 reviewed Aug 23, 2023

View reviewed changes

Wxh16144 approved these changes Aug 23, 2023

View reviewed changes

RedJue force-pushed the feat-modal-footer branch 2 times, most recently from c39e959 to 01ff711 Compare August 24, 2023 03:32

MadCcc reviewed Aug 24, 2023

View reviewed changes

RedJue force-pushed the feat-modal-footer branch from f5dbd4c to 9db8451 Compare August 24, 2023 05:52

MadCcc reviewed Aug 24, 2023

View reviewed changes

RedJue force-pushed the feat-modal-footer branch from 077ab8d to 4572e9f Compare August 25, 2023 02:18

MadCcc reviewed Aug 25, 2023

View reviewed changes

RedJue force-pushed the feat-modal-footer branch from dcef70a to 134c935 Compare August 28, 2023 02:50

MadCcc approved these changes Aug 28, 2023

View reviewed changes

RedJue merged commit e7c7601 into feature Aug 28, 2023
86 of 87 checks passed

RedJue deleted the feat-modal-footer branch August 28, 2023 03:54

chenshuai2144 mentioned this pull request Sep 7, 2023

docs: add 5.9.0 changelog #44692

Merged

	[...Object.values(confirmBtnCtxValue)],
	Object.values(confirmBtnCtxValue),

	[...Object.values(cancelBtnCtxValue)],
	Object.values(cancelBtnCtxValue),

feat: Modal footer support custom render function #44318

feat: Modal footer support custom render function #44318

Conversation

RedJue commented Aug 21, 2023 • edited by ghost

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

🚀 Summary

🤖 Generated by Copilot at 641db8d

🔍 Walkthrough

🤖 Generated by Copilot at 641db8d

stackblitz bot commented Aug 21, 2023

github-actions bot commented Aug 21, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2023 • edited

size-limit report 📦

argos-ci bot commented Aug 21, 2023 • edited

afc163 commented Aug 21, 2023

RedJue commented Aug 21, 2023

codecov bot commented Aug 21, 2023 • edited

Codecov Report

afc163 commented Aug 21, 2023 • edited

RedJue commented Aug 21, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 Aug 23, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Aug 25, 2023

RedJue commented Aug 25, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RedJue commented Aug 21, 2023 •

edited by ghost

`🤖 Generated by Copilot at 641db8d`

`🤖 Generated by Copilot at 641db8d`

github-actions bot commented Aug 21, 2023 •

edited

github-actions bot commented Aug 21, 2023 •

edited

argos-ci bot commented Aug 21, 2023 •

edited

codecov bot commented Aug 21, 2023 •

edited

afc163 commented Aug 21, 2023 •

edited

RedJue commented Aug 21, 2023 •

edited

afc163 Aug 23, 2023 •

edited