From d749fc9f222b2cf81b0cc305474af4256d87e15c Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 18 Sep 2021 15:40:08 +0800
Subject: [PATCH] feat: confirm support reactively

---
 components/modal/ConfirmDialog.tsx | 247 ++++++++++++++++-------------
 components/modal/Modal.tsx         |   7 +-
 components/modal/locale.ts         |  11 +-
 3 files changed, 151 insertions(+), 114 deletions(-)

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index b414bc751..a7864474b 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -3,7 +3,7 @@ import type { ModalFuncProps } from './Modal';
 import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
-import type { FunctionalComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -18,113 +18,146 @@ function renderSomeContent(_name, someContent) {
   return someContent;
 }
 
-const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
-  const {
-    icon,
-    onCancel,
-    onOk,
-    close,
-    closable = false,
-    zIndex,
-    afterClose,
-    visible,
-    keyboard,
-    centered,
-    getContainer,
-    maskStyle,
-    okButtonProps,
-    cancelButtonProps,
-    // closable = false,
-  } = props;
-  const okType = props.okType || 'primary';
-  const prefixCls = props.prefixCls || 'ant-modal';
-  const contentPrefixCls = `${prefixCls}-confirm`;
-  // 默认为 true，保持向下兼容
-  const okCancel = 'okCancel' in props ? props.okCancel : true;
-  const width = props.width || 416;
-  const style = props.style || {};
-  const mask = props.mask === undefined ? true : props.mask;
-  // 默认为 false，保持旧版默认行为
-  const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
-  const runtimeLocale = getConfirmLocale();
-  const okText =
-    renderSomeContent('okText', props.okText) ||
-    (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
-  const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText;
-  const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
-  const transitionName = props.transitionName || 'zoom';
-  const maskTransitionName = props.maskTransitionName || 'fade';
+export default defineComponent<ConfirmDialogProps>({
+  name: 'ConfirmDialog',
+  inheritAttrs: false,
+  props: [
+    'icon',
+    'onCancel',
+    'onOk',
+    'close',
+    'closable',
+    'zIndex',
+    'afterClose',
+    'visible',
+    'keyboard',
+    'centered',
+    'getContainer',
+    'maskStyle',
+    'okButtonProps',
+    'cancelButtonProps',
+    'okType',
+    'prefixCls',
+    'okCancel',
+    'width',
+    'mask',
+    'maskClosable',
+    'okText',
+    'cancelText',
+    'autoFocusButton',
+    'transitionName',
+    'maskTransitionName',
+    'type',
+    'title',
+    'content',
+  ] as any,
+  setup(props, { attrs }) {
+    const runtimeLocale = computed(() => getConfirmLocale());
+    return () => {
+      const {
+        icon,
+        onCancel,
+        onOk,
+        close,
+        closable = false,
+        zIndex,
+        afterClose,
+        visible,
+        keyboard,
+        centered,
+        getContainer,
+        maskStyle,
+        okButtonProps,
+        cancelButtonProps,
+        okCancel = true,
+        width = 416,
+        mask = true,
+        maskClosable = false,
+        maskTransitionName = 'fade',
+        transitionName = 'zoom',
+        type,
+        title,
+        content,
+        // closable = false,
+      } = props;
+      const okType = props.okType || 'primary';
+      const prefixCls = props.prefixCls || 'ant-modal';
+      const contentPrefixCls = `${prefixCls}-confirm`;
+      const style = attrs.style || {};
+      const okText =
+        renderSomeContent('okText', props.okText) ||
+        (okCancel ? runtimeLocale.value.okText : runtimeLocale.value.justOkText);
+      const cancelText =
+        renderSomeContent('cancelText', props.cancelText) || runtimeLocale.value.cancelText;
+      const autoFocusButton =
+        props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
 
-  const classString = classNames(
-    contentPrefixCls,
-    `${contentPrefixCls}-${props.type}`,
-    `${prefixCls}-${props.type}`,
-    props.class,
-  );
+      const classString = classNames(
+        contentPrefixCls,
+        `${contentPrefixCls}-${type}`,
+        `${prefixCls}-${type}`,
+        attrs.class,
+      );
 
-  const cancelButton = okCancel && (
-    <ActionButton
-      actionFn={onCancel}
-      closeModal={close}
-      autofocus={autoFocusButton === 'cancel'}
-      buttonProps={cancelButtonProps}
-    >
-      {cancelText}
-    </ActionButton>
-  );
+      const cancelButton = okCancel && (
+        <ActionButton
+          actionFn={onCancel}
+          closeModal={close}
+          autofocus={autoFocusButton === 'cancel'}
+          buttonProps={cancelButtonProps}
+        >
+          {cancelText}
+        </ActionButton>
+      );
 
-  return (
-    <Dialog
-      prefixCls={prefixCls}
-      class={classString}
-      wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
-      onCancel={e => close({ triggerCancel: true }, e)}
-      visible={visible}
-      title=""
-      transitionName={transitionName}
-      footer=""
-      maskTransitionName={maskTransitionName}
-      mask={mask}
-      maskClosable={maskClosable}
-      maskStyle={maskStyle}
-      style={style}
-      width={width}
-      zIndex={zIndex}
-      afterClose={afterClose}
-      keyboard={keyboard}
-      centered={centered}
-      getContainer={getContainer}
-      closable={closable}
-    >
-      <div class={`${contentPrefixCls}-body-wrapper`}>
-        <div class={`${contentPrefixCls}-body`}>
-          {renderSomeContent('icon', icon)}
-          {props.title === undefined ? null : (
-            <span class={`${contentPrefixCls}-title`}>
-              {renderSomeContent('title', props.title)}
-            </span>
-          )}
-          <div class={`${contentPrefixCls}-content`}>
-            {renderSomeContent('content', props.content)}
+      return (
+        <Dialog
+          prefixCls={prefixCls}
+          class={classString}
+          wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
+          onCancel={e => close({ triggerCancel: true }, e)}
+          visible={visible}
+          title=""
+          transitionName={transitionName}
+          footer=""
+          maskTransitionName={maskTransitionName}
+          mask={mask}
+          maskClosable={maskClosable}
+          maskStyle={maskStyle}
+          style={style}
+          width={width}
+          zIndex={zIndex}
+          afterClose={afterClose}
+          keyboard={keyboard}
+          centered={centered}
+          getContainer={getContainer}
+          closable={closable}
+        >
+          <div class={`${contentPrefixCls}-body-wrapper`}>
+            <div class={`${contentPrefixCls}-body`}>
+              {renderSomeContent('icon', icon)}
+              {title === undefined ? null : (
+                <span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
+              )}
+              <div class={`${contentPrefixCls}-content`}>
+                {renderSomeContent('content', content)}
+              </div>
+            </div>
+            <div class={`${contentPrefixCls}-btns`}>
+              {cancelButton}
+              <ActionButton
+                type={okType}
+                actionFn={onOk}
+                closeModal={close}
+                autofocus={autoFocusButton === 'ok'}
+                buttonProps={okButtonProps}
+              >
+                {okText}
+              </ActionButton>
+            </div>
           </div>
-        </div>
-        <div class={`${contentPrefixCls}-btns`}>
-          {cancelButton}
-          <ActionButton
-            type={okType}
-            actionFn={onOk}
-            closeModal={close}
-            autofocus={autoFocusButton === 'ok'}
-            buttonProps={okButtonProps}
-          >
-            {okText}
-          </ActionButton>
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-
-ConfirmDialog.inheritAttrs = false;
-
-export default ConfirmDialog;
+        </Dialog>
+      );
+    };
+  },
+});
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 09dbca361..d06c0577c 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, VNodeTypes, CSSProperties, PropType } from 'vue';
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
 import classNames from '../_util/classNames';
 import Dialog from '../vc-dialog';
 import PropTypes from '../_util/vue-types';
@@ -157,7 +157,9 @@ export default defineComponent({
   }),
   emits: ['update:visible', 'cancel', 'change', 'ok'],
   setup() {
+    const confirmLocale = computed(() => getConfirmLocale());
     return {
+      confirmLocale,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
@@ -210,6 +212,7 @@ export default defineComponent({
       centered,
       getContainer,
       $attrs,
+      confirmLocale,
     } = this;
     const children = getSlot(this);
     const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
@@ -218,7 +221,7 @@ export default defineComponent({
     const defaultFooter = (
       <LocaleReceiver
         componentName="Modal"
-        defaultLocale={getConfirmLocale()}
+        defaultLocale={confirmLocale}
         children={this.renderFooter}
       />
     );
diff --git a/components/modal/locale.ts b/components/modal/locale.ts
index 77c3d497b..f958c38d8 100644
--- a/components/modal/locale.ts
+++ b/components/modal/locale.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue';
 import defaultLocale from '../locale/default';
 
 export interface ModalLocale {
@@ -6,23 +7,23 @@ export interface ModalLocale {
   justOkText: string;
 }
 
-let runtimeLocale = {
+const runtimeLocale = ref({
   ...defaultLocale.Modal,
-};
+});
 
 export function changeConfirmLocale(newLocale?: ModalLocale) {
   if (newLocale) {
-    runtimeLocale = {
+    runtimeLocale.value = {
       ...runtimeLocale,
       ...newLocale,
     };
   } else {
-    runtimeLocale = {
+    runtimeLocale.value = {
       ...defaultLocale.Modal,
     };
   }
 }
 
 export function getConfirmLocale() {
-  return runtimeLocale;
+  return runtimeLocale.value;
 }