github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: update transition

Browse Source
pull/3053/head
tangjinzhou 4 years ago
parent b6e1284518
commit 86a90468ba
16 changed files with 88 additions and 93 deletions
Show Stats Download Patch File Download Diff File

21
components/_util/getTransitionGroupProps.js
Unescape View File

@ -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;

21
components/_util/getTransitionProps.js
Unescape View File

@ -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;

60
components/_util/transition.tsx
Unescape View File

@ -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;

4
components/alert/index.tsx
Unescape View File

@ -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';

4
components/back-top/index.tsx
Unescape View File

@ -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';

4
components/badge/Badge.tsx
Unescape View File

@ -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 = {

4
components/form/FormItem.tsx
Unescape View File

@ -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, {

10
components/transfer/renderListBody.tsx
Unescape View File

@ -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>;
},
});

10
components/upload/UploadList.tsx
Unescape View File

@ -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',

4
components/vc-dialog/Dialog.jsx
Unescape View File

@ -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();

4
components/vc-menu/SubMenu.jsx
Unescape View File

@ -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';

4
components/vc-notification/Notification.jsx
Unescape View File

@ -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() {}

3
components/vc-select/Selector/MultipleSelector.tsx
Unescape View File

@ -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__';

4
components/vc-tree/src/TreeNode.jsx
Unescape View File

@ -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';

3
components/vc-trigger/Popup.jsx
Unescape View File

@ -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',

21
tests/setup.js
Unescape View File

@ -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));
// }
// }
// };

Write Preview
Loading…
Cancel
Save