102 lines
4.3 KiB
JavaScript
102 lines
4.3 KiB
JavaScript
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
import * as React from 'react';
|
|
import { useResizeObserverRef_unstable } from './useResizeObserverRef';
|
|
import { useRef } from 'react';
|
|
/**
|
|
* React hook that measures virtualized space dynamically to ensure optimized virtualization length.
|
|
*/ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
|
|
const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;
|
|
const indexRef = useRef(currentIndex);
|
|
indexRef.current = currentIndex;
|
|
const [state, setState] = React.useState({
|
|
virtualizerLength: 0,
|
|
virtualizerBufferItems: 0,
|
|
virtualizerBufferSize: 0
|
|
});
|
|
const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
|
|
const container = React.useRef(null);
|
|
const handleScrollResize = React.useCallback((scrollRef)=>{
|
|
if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
// Error? ignore?
|
|
return;
|
|
}
|
|
if (scrollRef.current !== container.current) {
|
|
container.current = scrollRef.current;
|
|
}
|
|
const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;
|
|
let indexSizer = 0;
|
|
let length = 0;
|
|
while(indexSizer <= containerSize && length < numItems){
|
|
const iItemSize = getItemSize(indexRef.current + length);
|
|
// Increment
|
|
indexSizer += iItemSize;
|
|
length++;
|
|
}
|
|
/*
|
|
* Number of items to append at each end, i.e. 'preload' each side before entering view.
|
|
*/ const bufferItems = Math.max(Math.floor(length / 4), 4);
|
|
/*
|
|
* This is how far we deviate into the bufferItems to detect a redraw.
|
|
*/ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
|
|
const totalLength = length + bufferItems * 2 + 1;
|
|
setState({
|
|
virtualizerLength: totalLength,
|
|
virtualizerBufferSize: bufferSize,
|
|
virtualizerBufferItems: bufferItems
|
|
});
|
|
}, [
|
|
defaultItemSize,
|
|
direction,
|
|
getItemSize,
|
|
numItems
|
|
]);
|
|
const resizeCallback = React.useCallback((_entries, // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
// eslint-disable-next-line no-restricted-globals
|
|
_observer, scrollRef)=>{
|
|
if (scrollRef) {
|
|
handleScrollResize(scrollRef);
|
|
}
|
|
}, [
|
|
handleScrollResize
|
|
]);
|
|
const scrollRef = useResizeObserverRef_unstable(resizeCallback);
|
|
useIsomorphicLayoutEffect(()=>{
|
|
var _container_current, _container_current1;
|
|
if (!container.current) {
|
|
return;
|
|
}
|
|
const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;
|
|
let couldBeSmaller = false;
|
|
let recheckTotal = 0;
|
|
for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){
|
|
const newItemSize = getItemSize(i);
|
|
recheckTotal += newItemSize;
|
|
const newLength = i - currentIndex;
|
|
const bufferItems = Math.max(Math.floor(newLength / 4), 2);
|
|
const totalNewLength = newLength + bufferItems * 2 + 4;
|
|
const compareLengths = totalNewLength < virtualizerLength;
|
|
if (recheckTotal > containerSize && compareLengths) {
|
|
couldBeSmaller = true;
|
|
break;
|
|
}
|
|
}
|
|
// Check if the render has caused us to need a re-calc of virtualizer length
|
|
if (recheckTotal < containerSize || couldBeSmaller) {
|
|
handleScrollResize(container);
|
|
}
|
|
}, [
|
|
getItemSize,
|
|
currentIndex,
|
|
direction,
|
|
virtualizerLength,
|
|
resizeCallback,
|
|
handleScrollResize
|
|
]);
|
|
return {
|
|
virtualizerLength,
|
|
bufferItems: virtualizerBufferItems,
|
|
bufferSize: virtualizerBufferSize,
|
|
scrollRef
|
|
};
|
|
};
|