refactor: rename useRef

components/_util/hooks/useRef.ts

@@ -1,18 +0,0 @@
-import type { Ref, ComponentPublicInstance } from 'vue';
-import { onBeforeUpdate, ref } from 'vue';
-
-type RefType = HTMLElement | ComponentPublicInstance;
-export type Refs = Record<string | number, RefType>;
-export type UseRef = [(el: RefType, key: string | number) => void, Ref<Refs>];
-export const useRef = (): UseRef => {
-  const refs = ref<Refs>({});
-  const setRef = (el: RefType, key: string | number) => {
-    refs.value[key] = el;
-  };
-  onBeforeUpdate(() => {
-    refs.value = {};
-  });
-  return [setRef, refs];
-};
-
-export default useRef;

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(
           <Star
-            ref={(r: any) => setRef(r, index)}
+            ref={setRef(index)}
             key={index}
             index={index}
             count={count}

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<HTMLDivElement>();
     const operationsRef = ref<{ $el: HTMLDivElement }>();
     const innerAddButtonRef = ref<HTMLButtonElement>();
-    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);
             }}

components/tabs/src/hooks/useRefs.ts

@@ -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<HTMLElement | ComponentPublicInstance>,
-  (key: Key) => void,
-] {
-  const cacheRefs = ref(new Map<Key, Ref<HTMLElement | ComponentPublicInstance>>());
-
-  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];
-}

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 <path ref={c => setRef(c, index)} {...pathProps} />;
+        return <path ref={setRef(index)} {...pathProps} />;
       });
     };
 

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({
         >
           <path {...pathFirst.value} />
           {percentListProps.value.map((pathProps, index) => {
-            return <path ref={c => setRef(c, index)} {...pathProps} />;
+            return <path ref={setRef(index)} {...pathProps} />;
           })}
         </svg>
       );

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<ProgressProps> = {
   trailWidth: 1,
 };
 
-export const useTransitionDuration = (paths: Refs) => {
+export const useTransitionDuration = (paths: Ref<RefsValue>) => {
   const prevTimeStamp = ref(null);
 
   onUpdated(() => {
     const now = Date.now();
     let updated = false;
 
-    Object.keys(paths.value).forEach(key => {
+    paths.value.forEach(val => {
-      const path = paths.value[key];
+      const path = (val as any)?.$el || val;
       if (!path) {
         return;
       }