feat: update vc-dialog

Author: tangjinzhou

components/_util/PortalWrapper.js

@@ -2,6 +2,7 @@ import PropTypes from './vue-types';
 import switchScrollingEffect from './switchScrollingEffect';
 import setStyle from './setStyle';
 import Portal from './Portal';
+import createRefHooks from './createRefHooks';
 
 let openCount = 0;
 const windowIsUndefined = !(
@@ -140,14 +141,7 @@ export default {
         <Portal
           getContainer={this.getDomContainer}
           children={children(childProps)}
-          {...{
-            directives: [
-              {
-                name: 'ant-ref',
-                value: this.savePortal,
-              },
-            ],
-          }}
+          {...createRefHooks(this.savePortal)}
         ></Portal>
       );
     }

components/modal/ActionButton.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import Button from '../button';
 import BaseMixin from '../_util/BaseMixin';
 import buttonTypes from '../button/buttonTypes';
+import { getSlot } from '../_util/props-util';
 const ButtonType = buttonTypes().type;
 const ActionButtonProps = {
   type: ButtonType,
@@ -64,10 +65,10 @@ export default {
   },
 
   render() {
-    const { type, $slots, loading, buttonProps } = this;
+    const { type, loading, buttonProps } = this;
     return (
       <Button type={type} onClick={this.onClick} loading={loading} {...buttonProps}>
-        {$slots.default}
+        {getSlot(this)}
       </Button>
     );
   },

components/vc-dialog/Dialog.jsx

@@ -1,3 +1,4 @@
+import { provide, Transition } from 'vue';
 import { initDefaultProps } from '../_util/props-util';
 import KeyCode from '../_util/KeyCode';
 import contains from '../vc-util/Dom/contains';
@@ -66,12 +67,6 @@ export default {
     };
   },
 
-  provide() {
-    return {
-      dialogContext: this,
-    };
-  },
-
   watch: {
     visible(val) {
       if (val) {
@@ -82,6 +77,9 @@ export default {
       });
     },
   },
+  created() {
+    provide('dialogContext', this);
+  },
 
   beforeMount() {
     this.inTransition = false;
@@ -295,12 +293,12 @@ export default {
         </LazyRenderBox>
       );
       const dialogTransitionProps = getTransitionProps(transitionName, {
-        afterLeave: this.onAnimateLeave,
+        onAfterLeave: this.onAnimateLeave,
       });
       return (
-        <transition key="dialog" {...dialogTransitionProps}>
+        <Transition key="dialog" {...dialogTransitionProps}>
           {visible || !this.destroyPopup ? dialogElement : null}
-        </transition>
+        </Transition>
       );
     },
     getZIndexStyle() {
@@ -334,9 +332,9 @@ export default {
         if (maskTransition) {
           const maskTransitionProps = getTransitionProps(maskTransition);
           maskElement = (
-            <transition key="mask" {...maskTransitionProps}>
+            <Transition key="mask" {...maskTransitionProps}>
               {maskElement}
-            </transition>
+            </Transition>
           );
         }
       }

components/vc-dialog/DialogWrap.jsx

@@ -1,7 +1,7 @@
 import Dialog from './Dialog';
 import getDialogPropTypes from './IDialogPropTypes';
-import { getListeners } from '../_util/props-util';
 import Portal from '../_util/PortalWrapper';
+import { getSlot } from '../_util/props-util';
 const IDialogPropTypes = getDialogPropTypes();
 const DialogWrap = {
   inheritAttrs: false,
@@ -12,12 +12,11 @@ const DialogWrap = {
 
   render() {
     const { visible, getContainer, forceRender } = this.$props;
-    const dialogProps = {
-      props: this.$props,
-      attrs: this.$attrs,
+    let dialogProps = {
+      ...this.$props,
+      ...this.$attrs,
       ref: '_component',
       key: 'dialog',
-      on: getListeners(this),
     };
     // 渲染在当前 dom 里；
     if (getContainer === false) {
@@ -26,7 +25,7 @@ const DialogWrap = {
           {...dialogProps}
           getOpenCount={() => 2} // 不对 body 做任何操作。。
         >
-          {this.$slots.default}
+          {getSlot(this)}
         </Dialog>
       );
     }
@@ -36,8 +35,8 @@ const DialogWrap = {
         forceRender={forceRender}
         getContainer={getContainer}
         children={childProps => {
-          dialogProps.props = { ...dialogProps.props, ...childProps };
-          return <Dialog {...dialogProps}>{this.$slots.default}</Dialog>;
+          dialogProps = { ...dialogProps, ...childProps };
+          return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
         }}
       />
     );

components/vc-dialog/IDialogPropTypes.js

@@ -40,6 +40,7 @@ function IDialogPropTypes() {
     // https://github.com/ant-design/ant-design/issues/19771
     // https://github.com/react-component/dialog/issues/95
     focusTriggerAfterClose: PropTypes.bool,
+    onClose: PropTypes.func,
   };
 }
 

components/vc-dialog/LazyRenderBox.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getListeners } from '../_util/props-util';
+import { getSlot } from '../_util/props-util';
 
 const ILazyRenderBoxPropTypes = {
   visible: PropTypes.bool,
@@ -10,6 +10,6 @@ const ILazyRenderBoxPropTypes = {
 export default {
   props: ILazyRenderBoxPropTypes,
   render() {
-    return <div {...{ on: getListeners(this) }}>{this.$slots.default}</div>;
+    return <div>{getSlot(this)}</div>;
   },
 };