Private
Public Access
1
0
Files
power-apps-codeapps-blog-part2/node_modules/@fluentui/react-virtualizer/lib-commonjs/hooks/useMeasureList.js

136 lines
6.0 KiB
JavaScript

'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createResizeObserverFromDocument: function() {
return createResizeObserverFromDocument;
},
useMeasureList: function() {
return useMeasureList;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
const widthArray = _react.useRef(new Array(totalLength).fill(defaultItemSize));
const heightArray = _react.useRef(new Array(totalLength).fill(defaultItemSize));
const refArray = _react.useRef([]);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
// This lets us trigger updates when a size change occurs.
const sizeUpdateCount = _react.useRef(0);
// the handler for resize observer
const handleIndexUpdate = _react.useCallback((index)=>{
var _refArray_current_index;
let isChanged = false;
const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();
const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;
if (containerWidth !== widthArray.current[currentIndex + index]) {
isChanged = true;
}
widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;
const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;
if (containerHeight !== heightArray.current[currentIndex + index]) {
isChanged = true;
}
heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;
if (isChanged) {
sizeUpdateCount.current = sizeUpdateCount.current + 1;
}
}, [
currentIndex,
defaultItemSize,
sizeUpdateCount
]);
const handleElementResizeCallback = (entries)=>{
for (const entry of entries){
const target = entry.target;
// Call the elements own resize handler (indexed)
target.handleResize();
}
};
_react.useEffect(()=>{
const newHeightLength = totalLength - heightArray.current.length;
const newWidthLength = totalLength - widthArray.current.length;
/* Ensure we grow or truncate arrays with prior properties,
keeping the existing values is important for whitespace assumptions.
Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/ if (newWidthLength > 0) {
widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));
} else if (newWidthLength < 0) {
widthArray.current = widthArray.current.slice(0, totalLength);
}
if (newHeightLength > 0) {
heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));
} else if (newHeightLength < 0) {
heightArray.current = heightArray.current.slice(0, totalLength);
}
}, [
defaultItemSize,
totalLength
]);
// Keep the reference of ResizeObserver as a ref, as it should live through renders
const resizeObserver = _react.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));
/* createIndexedRef provides a dynamic function to create an undefined number of refs at render time
* these refs then provide an indexed callback via attaching 'handleResize' to the element itself
* this function is then called on resize by handleElementResize and relies on indexing
* to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.
*/ const createIndexedRef = _react.useCallback((index)=>{
const measureElementRef = (el)=>{
if (!targetDocument || !resizeObserver.current) {
return;
}
if (el) {
el.handleResize = ()=>{
handleIndexUpdate(index);
};
}
// cleanup previous container
if (refArray.current[index] !== undefined && refArray.current[index] !== null) {
resizeObserver.current.unobserve(refArray.current[index]);
}
refArray.current[index] = undefined;
if (el) {
refArray.current[index] = el;
resizeObserver.current.observe(el);
handleIndexUpdate(index);
}
};
return measureElementRef;
}, [
handleIndexUpdate,
resizeObserver,
targetDocument
]);
_react.useEffect(()=>{
const _resizeObserver = resizeObserver;
return ()=>{
var _resizeObserver_current;
return (_resizeObserver_current = _resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();
};
}, [
resizeObserver
]);
return {
widthArray,
heightArray,
createIndexedRef,
refArray,
sizeUpdateCount: sizeUpdateCount.current
};
}
function createResizeObserverFromDocument(targetDocument, callback) {
var _targetDocument_defaultView;
if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {
return null;
}
return new targetDocument.defaultView.ResizeObserver(callback);
}