From 86a90468baa28ac68bfa577ebaa85d6310aa0b4e Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 22 Oct 2020 22:45:21 +0800 Subject: [PATCH] perf: update transition --- components/_util/getTransitionGroupProps.js | 21 ------- components/_util/getTransitionProps.js | 21 ------- components/_util/transition.tsx | 60 +++++++++++++++++++ components/alert/index.tsx | 4 +- components/back-top/index.tsx | 4 +- components/badge/Badge.tsx | 4 +- components/form/FormItem.tsx | 4 +- components/transfer/renderListBody.tsx | 10 +--- components/upload/UploadList.tsx | 10 +++- components/vc-dialog/Dialog.jsx | 4 +- components/vc-menu/SubMenu.jsx | 4 +- components/vc-notification/Notification.jsx | 4 +- .../vc-select/Selector/MultipleSelector.tsx | 3 +- components/vc-tree/src/TreeNode.jsx | 4 +- components/vc-trigger/Popup.jsx | 3 +- tests/setup.js | 21 ------- 16 files changed, 88 insertions(+), 93 deletions(-) delete mode 100644 components/_util/getTransitionGroupProps.js delete mode 100644 components/_util/getTransitionProps.js create mode 100644 components/_util/transition.tsx diff --git a/components/_util/getTransitionGroupProps.js b/components/_util/getTransitionGroupProps.js deleted file mode 100644 index ff89c570d..000000000 --- a/components/_util/getTransitionGroupProps.js +++ /dev/null @@ -1,21 +0,0 @@ -// import animate from './css-animation'; -const getTransitionGroupProps = (transitionName, opt = {}) => { - if (process.env.NODE_ENV === 'test') { - return { css: false, ...opt }; - } - 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; -}; - -export default getTransitionGroupProps; diff --git a/components/_util/getTransitionProps.js b/components/_util/getTransitionProps.js deleted file mode 100644 index 6a23b224a..000000000 --- a/components/_util/getTransitionProps.js +++ /dev/null @@ -1,21 +0,0 @@ -const getTransitionProps = (transitionName, opt = {}) => { - if (process.env.NODE_ENV === 'test') { - return { css: false, ...opt }; - } - 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 default getTransitionProps; diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx new file mode 100644 index 000000000..029fe22c3 --- /dev/null +++ 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 {slots.default?.()}; + }; + }, + }); +} + +export { Transition, TransitionGroup }; + +export default Transition; diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 0f9065e4b..919b86648 100644 --- 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 index 163eb823c..c96d9c816 100644 --- 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 index a1197d06e..f3fa613dc 100644 --- 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 index 08b489ca0..12a8622dc 100644 --- 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 index a0ef4b450..df521cbdc 100644 --- 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 ( - - {items} - - ); + return {items}; }, }); diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 428d124f2..7e33999a6 100644 --- 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 index 7888baa4a..d06606c61 100644 --- 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 index dd4f637ad..8e6d1c98b 100644 --- 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 index e168fb536..28d0a7d8b 100644 --- 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 index cb009cad1..62150d741 100644 --- 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 index bf1cfbdb3..7971c4eff 100644 --- 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 index 5bc1dd246..705878a95 100644 --- a/components/vc-trigger/Popup.jsx +++ b/components/vc-trigger/Popup.jsx @@ -1,4 +1,3 @@ -import { Transition } from 'vue'; import PropTypes from '../_util/vue-types'; import Align from '../vc-align'; import PopupInner from './PopupInner'; @@ -6,7 +5,7 @@ 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 index c35cb6fc7..5590ecbcc 100644 --- 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)); -// } -// } -// };