perf: update transition

tangjinzhou · tangjinzhou · commit 86a90468baa2 · 2020-10-22T22:45:21.000+08:00
diff --git a/components/_util/getTransitionGroupProps.js b/components/_util/getTransitionGroupProps.js
diff --git a/components/_util/getTransitionProps.js b/components/_util/getTransitionProps.js
diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
@@ -0,0 +1,60 @@
+import { defineComponent, Fragment, Transition as T, TransitionGroup as TG } from 'vue';
+
+export const getTransitionProps = (transitionName: string, opt: object = {}) => {
+  const transitionProps = transitionName
+    ? {
+        appear: true,
+        appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+        // appearActiveClass: `antdv-base-transtion`,
+        appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
+        enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
+        // enterActiveClass: `antdv-base-transtion`,
+        enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
+        leaveFromClass: ` ${transitionName}-leave`,
+        leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
+        leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
+        ...opt,
+      }
+    : { css: false, ...opt };
+  return transitionProps;
+};
+
+export const getTransitionGroupProps = (transitionName: string, opt: object = {}) => {
+  const transitionProps = transitionName
+    ? {
+        appear: true,
+        appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+        appearActiveClass: `${transitionName}`,
+        appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
+        enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
+        enterActiveClass: `${transitionName}`,
+        enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
+        leaveActiveClass: `${transitionName} ${transitionName}-leave`,
+        leaveToClass: `${transitionName}-leave-active`,
+        ...opt,
+      }
+    : { css: false, ...opt };
+  return transitionProps;
+};
+
+let Transition = T;
+let TransitionGroup = TG;
+
+if (process.env.NODE_ENV === 'test') {
+  Transition = (_, { slots }) => {
+    return slots.default?.();
+  };
+  TransitionGroup = defineComponent({
+    props: ['tag', 'class'],
+    setup(props, { slots }) {
+      const { tag: Tag = Fragment, ...rest } = props;
+      return () => {
+        return <Tag {...rest}>{slots.default?.()}</Tag>;
+      };
+    },
+  });
+}
+
+export { Transition, TransitionGroup };
+
+export default Transition;
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -1,4 +1,4 @@
-import { Transition, inject, cloneVNode, defineComponent, App } from 'vue';
+import { inject, cloneVNode, defineComponent, App } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -11,7 +11,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import classNames from '../_util/classNames';
 import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
@@ -1,11 +1,11 @@
-import { App, defineComponent, inject, Transition } from 'vue';
+import { App, defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import backTopTypes from './backTopTypes';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
 import BaseMixin from '../_util/BaseMixin';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 
diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
@@ -4,10 +4,10 @@ import { PresetColorTypes } from '../_util/colors';
 import classNames from '../_util/classNames';
 import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 import isNumeric from '../_util/isNumeric';
 import { defaultConfigProvider } from '../config-provider';
-import { inject, Transition, defineComponent, CSSProperties } from 'vue';
+import { inject, defineComponent, CSSProperties } from 'vue';
 import { tuple } from '../_util/type';
 
 const BadgeProps = {
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -1,8 +1,8 @@
-import { inject, provide, Transition, PropType, defineComponent, computed } from 'vue';
+import { inject, provide, PropType, defineComponent, computed } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 import Row from '../grid/Row';
 import Col from '../grid/Col';
 import hasProp, {
diff --git a/components/transfer/renderListBody.tsx b/components/transfer/renderListBody.tsx
@@ -1,9 +1,9 @@
-import { defineComponent, TransitionGroup } from 'vue';
+import { defineComponent } from 'vue';
 import raf from '../_util/raf';
 import ListItem from './ListItem';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { findDOMNode } from '../_util/props-util';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
 const ListBody = defineComponent({
   name: 'ListBody',
   inheritAttrs: false,
@@ -105,11 +105,7 @@ const ListBody = defineComponent({
         onScroll: this.handleScroll,
       },
     );
-    return (
-      <TransitionGroup {...transitionProps}>
-        {items}
-      </TransitionGroup>
-    );
+    return <TransitionGroup {...transitionProps}>{items}</TransitionGroup>;
   },
 });
 
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
@@ -1,7 +1,12 @@
-import { defineComponent, inject, Transition, TransitionGroup, CSSProperties } from 'vue';
+import { defineComponent, inject, CSSProperties } from 'vue';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
-import getTransitionProps from '../_util/getTransitionProps';
+import {
+  getTransitionProps,
+  Transition,
+  getTransitionGroupProps,
+  TransitionGroup,
+} from '../_util/transition';
 import { defaultConfigProvider } from '../config-provider';
 import { previewImage, isImageUrl } from './utils';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
@@ -15,7 +20,6 @@ import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from '../_util/classNames';
 import { UploadListProps } from './interface';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
 
 export default defineComponent({
   name: 'AUploadList',
diff --git a/components/vc-dialog/Dialog.jsx b/components/vc-dialog/Dialog.jsx
@@ -1,10 +1,10 @@
-import { defineComponent, provide, Transition } from 'vue';
+import { defineComponent, provide } from 'vue';
 import { initDefaultProps, getSlot, findDOMNode } from '../_util/props-util';
 import KeyCode from '../_util/KeyCode';
 import contains from '../vc-util/Dom/contains';
 import LazyRenderBox from './LazyRenderBox';
 import BaseMixin from '../_util/BaseMixin';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 import switchScrollingEffect from '../_util/switchScrollingEffect';
 import getDialogPropTypes from './IDialogPropTypes';
 const IDialogPropTypes = getDialogPropTypes();
diff --git a/components/vc-menu/SubMenu.jsx b/components/vc-menu/SubMenu.jsx
@@ -1,4 +1,4 @@
-import { Transition, inject, provide } from 'vue';
+import { inject, provide } from 'vue';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import Trigger from '../vc-trigger';
@@ -10,7 +10,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
 import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 
 let guid = 0;
 const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
diff --git a/components/vc-notification/Notification.jsx b/components/vc-notification/Notification.jsx
@@ -1,10 +1,10 @@
-import { createApp, defineComponent, TransitionGroup } from 'vue';
+import { createApp, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import createChainedFunction from '../_util/createChainedFunction';
 import Notice from './Notice';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
 
 function noop() {}
 
diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx
@@ -8,7 +8,6 @@ import {
   defineComponent,
   onMounted,
   ref,
-  TransitionGroup,
   VNodeChild,
   watch,
   watchEffect,
@@ -17,7 +16,7 @@ import {
 import classNames from '../../_util/classNames';
 import pickAttrs from '../../_util/pickAttrs';
 import PropTypes from '../../_util/vue-types';
-import getTransitionGroupProps from '../../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition';
 
 const REST_TAG_KEY = '__RC_SELECT_MAX_REST_COUNT__';
 
diff --git a/components/vc-tree/src/TreeNode.jsx b/components/vc-tree/src/TreeNode.jsx
@@ -1,10 +1,10 @@
-import { defineComponent, inject, provide, Transition } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import classNames from '../../_util/classNames';
 import { getNodeChildren, mapChildren, warnOnlyTreeNode, getDataAndAria } from './util';
 import { initDefaultProps, getComponent, getSlot } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
-import getTransitionProps from '../../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../../_util/transition';
 
 function noop() {}
 const ICON_OPEN = 'open';
diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx
@@ -1,12 +1,11 @@
-import { Transition } from 'vue';
 import PropTypes from '../_util/vue-types';
 import Align from '../vc-align';
 import PopupInner from './PopupInner';
 import LazyRenderBox from './LazyRenderBox';
 import BaseMixin from '../_util/BaseMixin';
 import { saveRef } from './utils';
 import { splitAttrs, findDOMNode } from '../_util/props-util';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
 
 export default {
   name: 'VCTriggerPopup',
diff --git a/tests/setup.js b/tests/setup.js
@@ -32,24 +32,3 @@ global.cancelAnimationFrame = function(cb) {
 const mockMath = Object.create(global.Math);
 mockMath.random = () => 0.5;
 global.Math = mockMath;
-
-// Vue.component('transition-group', {
-//   props: ['tag'],
-//   render(createElement) {
-//     return createElement(this.tag || 'div', null, this.$slots.default);
-//   },
-// });
-
-// Vue.prototype.$emit = function() {
-//   const vm = this;
-//   const args = [].slice.call(arguments, 0);
-//   const filterEvent = [];
-//   const eventName = args[0];
-//   if (args.length && vm.$listeners[eventName]) {
-//     if (filterEvent.includes(eventName)) {
-//       vm.$emit(eventName, ...args.slice(1));
-//     } else {
-//       vm.$listeners[eventName](...args.slice(1));
-//     }
-//   }
-// };
