feat: modal.update() supports functional updating (#27162) (#27163)

* feat: modal.update() supports functional updating (#27162)

* docs: add version tip for modal.update() api

components/modal/__tests__/confirm.test.js

@@ -244,7 +244,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('could be update', () => {
+  it('could be update by new config', () => {
     jest.useFakeTimers();
     ['info', 'success', 'warning', 'error'].forEach(type => {
       const instance = Modal[type]({
@@ -273,6 +273,49 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
+  it('could be update by call function', () => {
+    jest.useFakeTimers();
+    ['info', 'success', 'warning', 'error'].forEach(type => {
+      const instance = Modal[type]({
+        title: 'title',
+        okButtonProps: {
+          loading: true,
+          style: {
+            color: 'red',
+          },
+        },
+      });
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).toContain(
+        'ant-btn-loading',
+      );
+      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
+      instance.update(prevConfig => ({
+        ...prevConfig,
+        okButtonProps: {
+          ...prevConfig.okButtonProps,
+          loading: false,
+        },
+      }));
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).not.toContain(
+        'ant-btn-loading',
+      );
+      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
+      instance.destroy();
+      jest.runAllTimers();
+    });
+    jest.useRealTimers();
+  });
+
   it('could be destroy', () => {
     jest.useFakeTimers();
     ['info', 'success', 'warning', 'error'].forEach(type => {

components/modal/confirm.tsx

@@ -14,11 +14,13 @@ function getRootPrefixCls() {
   return defaultRootPrefixCls;
 }
 
+type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps);
+
 export type ModalFunc = (
   props: ModalFuncProps,
 ) => {
   destroy: () => void;
-  update: (newConfig: ModalFuncProps) => void;
+  update: (configUpdate: ConfigUpdate) => void;
 };
 
 export interface ModalStaticFunctions {
@@ -84,11 +86,15 @@ export default function confirm(config: ModalFuncProps) {
     render(currentConfig);
   }
 
-  function update(newConfig: ModalFuncProps) {
+  function update(configUpdate: ConfigUpdate) {
-    currentConfig = {
+    if (typeof configUpdate === 'function') {
-      ...currentConfig,
+      currentConfig = configUpdate(currentConfig);
-      ...newConfig,
+    } else {
-    };
+      currentConfig = {
+        ...currentConfig,
+        ...configUpdate,
+      };
+    }
     render(currentConfig);
   }
 

components/modal/index.en-US.md

@@ -97,6 +97,12 @@ modal.update({
   content: 'Updated content',
 });
 
+// on 4.8.0 or above, you can pass a function to update modal
+modal.update(prevConfig => ({
+  ...prevConfig,
+  title: `${prevConfig.title} (New)`,
+}));
+
 modal.destroy();
 ```
 

components/modal/index.zh-CN.md

@@ -100,6 +100,12 @@ modal.update({
   content: '修改的内容',
 });
 
+// 在 4.8.0 或更高版本中，可以通过传入函数的方式更新弹窗
+modal.update(prevConfig => ({
+  ...prevConfig,
+  title: `${prevConfig.title}（新）`,
+}));
+
 modal.destroy();
 ```