import { Ref, ref, VNodeProps } from 'vue'; import { GetKey } from '../interface'; type CacheMap = Record; export default function useHeights( getKey: GetKey, onItemAdd?: ((item: T) => void) | null, onItemRemove?: ((item: T) => void) | null, ): [(item: T, instance: HTMLElement) => void, () => void, CacheMap, Ref] { const instance = new Map(); const heights = {}; const updatedMark = ref(0); let heightUpdateId = 0; function collectHeight() { heightUpdateId += 1; const currentId = heightUpdateId; Promise.resolve().then(() => { // Only collect when it's latest call if (currentId !== heightUpdateId) return; // let changed = false; instance.forEach((element, key) => { if (element && element.offsetParent) { const { offsetHeight } = element; if (heights[key!] !== offsetHeight) { //changed = true; heights[key!] = element.offsetHeight; } } }); updatedMark.value++; }); } function setInstance(item: T, ins: HTMLElement) { const key = getKey(item); const origin = instance.get(key); if (ins) { instance.set(key, ins); collectHeight(); } else { instance.delete(key); } // Instance changed if (!origin !== !ins) { if (ins) { onItemAdd?.(item); } else { onItemRemove?.(item); } } } return [setInstance, collectHeight, heights, updatedMark]; }