From eec9939a9878838d1f26fdf3ebe875fd83e9e614 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 6 Oct 2021 14:14:58 +0800 Subject: [PATCH] refactor: rename useRef --- components/_util/hooks/useRef.ts | 18 ------------------ components/rate/index.tsx | 8 ++++---- components/tabs/src/TabNavList/index.tsx | 8 ++++---- components/tabs/src/hooks/useRefs.ts | 23 ----------------------- components/vc-progress/src/Circle.tsx | 6 +++--- components/vc-progress/src/Line.tsx | 6 +++--- components/vc-progress/src/common.ts | 9 +++++---- 7 files changed, 19 insertions(+), 59 deletions(-) delete mode 100644 components/_util/hooks/useRef.ts delete mode 100644 components/tabs/src/hooks/useRefs.ts diff --git a/components/_util/hooks/useRef.ts b/components/_util/hooks/useRef.ts deleted file mode 100644 index 93b80d0f2..000000000 --- a/components/_util/hooks/useRef.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { Ref, ComponentPublicInstance } from 'vue'; -import { onBeforeUpdate, ref } from 'vue'; - -type RefType = HTMLElement | ComponentPublicInstance; -export type Refs = Record; -export type UseRef = [(el: RefType, key: string | number) => void, Ref]; -export const useRef = (): UseRef => { - const refs = ref({}); - const setRef = (el: RefType, key: string | number) => { - refs.value[key] = el; - }; - onBeforeUpdate(() => { - refs.value = {}; - }); - return [setRef, refs]; -}; - -export default useRef; diff --git a/components/rate/index.tsx b/components/rate/index.tsx index c3e1b3a10..86eec267a 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -11,7 +11,7 @@ import Tooltip from '../tooltip'; import useConfigInject from '../_util/hooks/useConfigInject'; import Star from './Star'; -import { useRef } from '../_util/hooks/useRef'; +import useRefs from '../_util/hooks/useRefs'; import { useInjectFormItemContext } from '../form/FormItemContext'; export const rateProps = { @@ -48,7 +48,7 @@ const Rate = defineComponent({ const { prefixCls, direction } = useConfigInject('rate', props); const formItemContext = useInjectFormItemContext(); const rateRef = ref(); - const [setRef, starRefs] = useRef(); + const [setRef, starRefs] = useRefs(); const state = reactive({ value: props.value, focused: false, @@ -62,7 +62,7 @@ const Rate = defineComponent({ }, ); const getStarDOM = (index: number) => { - return findDOMNode(starRefs.value[index]); + return findDOMNode(starRefs.value.get(index)); }; const getStarValue = (index: number, x: number) => { const reverse = direction.value === 'rtl'; @@ -199,7 +199,7 @@ const Rate = defineComponent({ for (let index = 0; index < count; index++) { stars.push( setRef(r, index)} + ref={setRef(index)} key={index} index={index} count={count} diff --git a/components/tabs/src/TabNavList/index.tsx b/components/tabs/src/TabNavList/index.tsx index 04f809a55..9644b13a9 100644 --- a/components/tabs/src/TabNavList/index.tsx +++ b/components/tabs/src/TabNavList/index.tsx @@ -26,7 +26,7 @@ import wrapperRaf from '../../../_util/raf'; import classNames from '../../../_util/classNames'; import ResizeObserver from '../../../vc-resize-observer'; import { toPx } from '../../../_util/util'; -import useRef from '../../../_util/hooks/useRef'; +import useRefs from '../../../_util/hooks/useRefs'; const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 }; const tabNavListProps = () => { return { @@ -70,7 +70,7 @@ export default defineComponent({ const tabListRef = ref(); const operationsRef = ref<{ $el: HTMLDivElement }>(); const innerAddButtonRef = ref(); - const [setRef, btnRefs] = useRef(); + const [setRef, btnRefs] = useRefs(); const tabPositionTopOrBottom = computed( () => props.tabPosition === 'top' || props.tabPosition === 'bottom', ); @@ -313,7 +313,7 @@ export default defineComponent({ setTabSizes(() => { const newSizes: TabSizeMap = new Map(); tabs.value.forEach(({ key }) => { - const btnRef = btnRefs.value[key]; + const btnRef = btnRefs.value.get(key); const btnNode = (btnRef as any)?.$el || btnRef; if (btnNode) { newSizes.set(key, { @@ -457,7 +457,7 @@ export default defineComponent({ editable={editable} active={key === activeKey} removeAriaLabel={locale?.removeAriaLabel} - ref={r => setRef(r, key)} + ref={setRef(key)} onClick={e => { onTabClick(key, e); }} diff --git a/components/tabs/src/hooks/useRefs.ts b/components/tabs/src/hooks/useRefs.ts deleted file mode 100644 index 73bacbae5..000000000 --- a/components/tabs/src/hooks/useRefs.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { Ref, ComponentPublicInstance } from 'vue'; -import { ref } from 'vue'; -import type { Key } from '../../../_util/type'; - -export default function useRefs(): [ - (key: Key) => Ref, - (key: Key) => void, -] { - const cacheRefs = ref(new Map>()); - - function getRef(key: Key) { - if (!cacheRefs.value.has(key)) { - cacheRefs.value.set(key, ref()); - } - return cacheRefs.value.get(key); - } - - function removeRef(key: Key) { - cacheRefs.value.delete(key); - } - - return [getRef, removeRef]; -} diff --git a/components/vc-progress/src/Circle.tsx b/components/vc-progress/src/Circle.tsx index a4aa86ece..938c74fd1 100644 --- a/components/vc-progress/src/Circle.tsx +++ b/components/vc-progress/src/Circle.tsx @@ -3,7 +3,7 @@ import type { GapPositionType } from './types'; import { propTypes } from './types'; import { computed, defineComponent, ref } from 'vue'; import initDefaultProps from '../../_util/props-util/initDefaultProps'; -import { useRef } from '../../_util/hooks/useRef'; +import useRefs from '../../_util/hooks/useRefs'; let gradientSeed = 0; @@ -75,7 +75,7 @@ export default defineComponent({ const percentList = computed(() => toArray(props.percent)); const strokeColorList = computed(() => toArray(props.strokeColor)); - const [setRef, paths] = useRef(); + const [setRef, paths] = useRefs(); useTransitionDuration(paths); const getStokeList = () => { @@ -111,7 +111,7 @@ export default defineComponent({ class: `${prefixCls}-circle-path`, style: pathStyle, }; - return setRef(c, index)} {...pathProps} />; + return ; }); }; diff --git a/components/vc-progress/src/Line.tsx b/components/vc-progress/src/Line.tsx index 578e85926..80402d451 100644 --- a/components/vc-progress/src/Line.tsx +++ b/components/vc-progress/src/Line.tsx @@ -1,4 +1,4 @@ -import { useRef } from '../../_util/hooks/useRef'; +import useRefs from '../../_util/hooks/useRefs'; import { computed, defineComponent } from 'vue'; import initDefaultProps from '../../_util/props-util/initDefaultProps'; import { useTransitionDuration, defaultProps } from './common'; @@ -58,7 +58,7 @@ export default defineComponent({ const { strokeColor } = props; return Array.isArray(strokeColor) ? strokeColor : [strokeColor]; }); - const [setRef, paths] = useRef(); + const [setRef, paths] = useRefs(); useTransitionDuration(paths); const center = computed(() => props.strokeWidth / 2); const right = computed(() => 100 - props.strokeWidth / 2); @@ -103,7 +103,7 @@ export default defineComponent({ > {percentListProps.value.map((pathProps, index) => { - return setRef(c, index)} {...pathProps} />; + return ; })} ); diff --git a/components/vc-progress/src/common.ts b/components/vc-progress/src/common.ts index 25da82c35..89d05b4e1 100644 --- a/components/vc-progress/src/common.ts +++ b/components/vc-progress/src/common.ts @@ -1,4 +1,5 @@ -import type { Refs } from '../../_util/hooks/useRef'; +import type { RefsValue } from '../../_util/hooks/useRefs'; +import type { Ref } from 'vue'; import { ref, onUpdated } from 'vue'; import type { ProgressProps } from './types'; @@ -12,15 +13,15 @@ export const defaultProps: Partial = { trailWidth: 1, }; -export const useTransitionDuration = (paths: Refs) => { +export const useTransitionDuration = (paths: Ref) => { const prevTimeStamp = ref(null); onUpdated(() => { const now = Date.now(); let updated = false; - Object.keys(paths.value).forEach(key => { - const path = paths.value[key]; + paths.value.forEach(val => { + const path = (val as any)?.$el || val; if (!path) { return; }