From 2666cb79abf9825872e37b55d6d9d4c1cf30e62a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 21 Jun 2024 13:40:28 +0800 Subject: [PATCH] refactor: transition --- components/_util/transition.tsx | 6 ++---- components/alert/index.tsx | 4 ++-- components/badge/Badge.tsx | 4 ++-- components/button/LoadingIcon.tsx | 3 +-- components/collapse/CollapsePanel.tsx | 3 +-- components/float-button/BackTop.tsx | 3 ++- components/float-button/FloatButtonGroup.tsx | 4 ++-- components/menu/src/InlineSubMenuList.tsx | 3 +-- components/upload/UploadList/ListItem.tsx | 12 ++++++++++-- components/upload/UploadList/index.tsx | 3 ++- components/vc-dialog/Content.tsx | 4 ++-- components/vc-dialog/Mask.tsx | 4 ++-- 12 files changed, 29 insertions(+), 24 deletions(-) diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx index fd6ebc4904..f4b69f31ed 100644 --- a/components/_util/transition.tsx +++ b/components/_util/transition.tsx @@ -5,7 +5,7 @@ import type { TransitionGroupProps, TransitionProps, } from 'vue'; -import { nextTick, Transition, TransitionGroup } from 'vue'; +import { nextTick } from 'vue'; import { tuple } from './type'; const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight'); @@ -126,6 +126,4 @@ const getTransitionName = (rootPrefixCls: string, motion: string, transitionName return `${rootPrefixCls}-${motion}`; }; -export { Transition, TransitionGroup, collapseMotion, getTransitionName, getTransitionDirection }; - -export default Transition; +export { collapseMotion, getTransitionName, getTransitionDirection }; diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 63a61aa6e0..f3dead2ba5 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -1,5 +1,5 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; -import { computed, defineComponent, shallowRef } from 'vue'; +import { computed, defineComponent, shallowRef, Transition } 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 InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'; import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import { isValidElement } from '../_util/props-util'; import { tuple, withInstall } from '../_util/type'; import { cloneElement } from '../_util/vnode'; diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 30195d049b..a0363732f4 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -3,9 +3,9 @@ import ScrollNumber from './ScrollNumber'; import classNames from '../_util/classNames'; import { getPropsSlot, flattenChildren } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import type { ExtractPropTypes, CSSProperties, PropType } from 'vue'; -import { defineComponent, computed, ref, watch } from 'vue'; +import { defineComponent, computed, ref, watch, Transition } from 'vue'; import Ribbon from './Ribbon'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import isNumeric from '../_util/isNumeric'; diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx index 391527fd45..f865e09078 100644 --- a/components/button/LoadingIcon.tsx +++ b/components/button/LoadingIcon.tsx @@ -1,6 +1,5 @@ -import { defineComponent, nextTick } from 'vue'; +import { defineComponent, nextTick, Transition } from 'vue'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; -import Transition from '../_util/transition'; const getCollapsedWidth = (node: HTMLSpanElement) => { if (node) { node.style.width = '0px'; diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index 4ff984dd74..95af0ec645 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -2,8 +2,7 @@ import PanelContent from './PanelContent'; import { initDefaultProps } from '../_util/props-util'; import { collapsePanelProps } from './commonProps'; import type { ExtractPropTypes } from 'vue'; -import { defineComponent } from 'vue'; -import Transition from '../_util/transition'; +import { defineComponent, Transition } from 'vue'; import classNames from '../_util/classNames'; import devWarning from '../vc-util/devWarning'; import useConfigInject from '../config-provider/hooks/useConfigInject'; diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 6baa6daad4..7229059752 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -1,5 +1,5 @@ import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import { defineComponent, nextTick, @@ -10,6 +10,7 @@ import { ref, watch, onDeactivated, + Transition, } from 'vue'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; import useConfigInject from '../config-provider/hooks/useConfigInject'; diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 743d60e5ad..611646299d 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -1,8 +1,8 @@ -import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue'; +import { defineComponent, ref, computed, watch, onBeforeUnmount, Transition } from 'vue'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined'; import classNames from '../_util/classNames'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useProvideFloatButtonGroupContext } from './context'; diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx index 29794e8be9..7b9cb1f33b 100644 --- a/components/menu/src/InlineSubMenuList.tsx +++ b/components/menu/src/InlineSubMenuList.tsx @@ -1,5 +1,4 @@ -import { computed, defineComponent, ref, watch } from 'vue'; -import Transition from '../../_util/transition'; +import { computed, Transition, defineComponent, ref, watch } from 'vue'; import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext'; import type { MenuMode } from './interface'; import SubMenuList from './SubMenuList'; diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index b7fcc2223f..d0dfb6afc3 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -1,4 +1,12 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'; +import { + computed, + defineComponent, + onBeforeUnmount, + onMounted, + shallowRef, + watch, + Transition, +} from 'vue'; import type { ExtractPropTypes, CSSProperties } from 'vue'; import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'; import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'; @@ -15,7 +23,7 @@ import type { } from '../interface'; import type { VueNode } from '../../_util/type'; import useConfigInject from '../../config-provider/hooks/useConfigInject'; -import Transition, { getTransitionProps } from '../../_util/transition'; +import { getTransitionProps } from '../../_util/transition'; import { booleanType, stringType, functionType, arrayType, objectType } from '../../_util/type'; export const listItemProps = () => { diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 25c58c50f8..ffb89a4b94 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -17,11 +17,12 @@ import { onMounted, shallowRef, watchEffect, + TransitionGroup, } from 'vue'; import { filterEmpty, initDefaultProps, isValidElement } from '../../_util/props-util'; import type { VueNode } from '../../_util/type'; import useConfigInject from '../../config-provider/hooks/useConfigInject'; -import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition'; +import { getTransitionGroupProps } from '../../_util/transition'; import collapseMotion from '../../_util/collapseMotion'; const HackSlot = (_, { slots }) => { diff --git a/components/vc-dialog/Content.tsx b/components/vc-dialog/Content.tsx index 6cfa6ee27d..82ecda5c1e 100644 --- a/components/vc-dialog/Content.tsx +++ b/components/vc-dialog/Content.tsx @@ -1,7 +1,7 @@ import type { CSSProperties, PropType } from 'vue'; -import { computed, ref, defineComponent, nextTick } from 'vue'; +import { Transition, computed, ref, defineComponent, nextTick } from 'vue'; import type { MouseEventHandler } from '../_util/EventInterface'; -import Transition, { getTransitionProps } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import dialogPropTypes from './IDialogPropTypes'; import { offset } from './util'; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; diff --git a/components/vc-dialog/Mask.tsx b/components/vc-dialog/Mask.tsx index 7ec2ced2d0..f9b5469442 100644 --- a/components/vc-dialog/Mask.tsx +++ b/components/vc-dialog/Mask.tsx @@ -1,5 +1,5 @@ -import { defineComponent } from 'vue'; -import Transition, { getTransitionProps } from '../_util/transition'; +import { defineComponent, Transition } from 'vue'; +import { getTransitionProps } from '../_util/transition'; export default defineComponent({ compatConfig: { MODE: 3 },