You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
import type { VNodeProps } from 'vue';
|
|
import { reactive } from 'vue';
|
|
import type { GetKey } from '../interface';
|
|
|
|
type CacheMap = Record<string, number>;
|
|
|
|
export default function useHeights<T>(
|
|
getKey: GetKey<T>,
|
|
onItemAdd?: ((item: T) => void) | null,
|
|
onItemRemove?: ((item: T) => void) | null,
|
|
): [(item: T, instance: HTMLElement) => void, () => void, CacheMap] {
|
|
const instance = new Map<VNodeProps['key'], HTMLElement>();
|
|
const heights = reactive({});
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function setInstance(item: T, ins: HTMLElement) {
|
|
const key = getKey(item);
|
|
const origin = instance.get(key);
|
|
|
|
if (ins) {
|
|
instance.set(key, (ins as any).$el || ins);
|
|
collectHeight();
|
|
} else {
|
|
instance.delete(key);
|
|
}
|
|
|
|
// Instance changed
|
|
if (!origin !== !ins) {
|
|
if (ins) {
|
|
onItemAdd?.(item);
|
|
} else {
|
|
onItemRemove?.(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
return [setInstance, collectHeight, heights];
|
|
}
|