@fluentui/react
Version:
Reusable React components for building web experiences.
50 lines • 2.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.observeResize = void 0;
var utilities_1 = require("@fluentui/utilities");
/**
* Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.
*
* Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.
* Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.
*
* @param target - Either a single element, or array of elements to watch for size changes.
* @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.
* If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.
* Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,
* (e.g. clientWidth/clientHeight or getBoundingClientRect).
*
* @returns A function to clean up the observer/listener.
*/
var observeResize = function (target, onResize) {
if (typeof ResizeObserver !== 'undefined') {
var observer_1 = new ResizeObserver(onResize);
if (Array.isArray(target)) {
target.forEach(function (t) { return observer_1.observe(t); });
}
else {
observer_1.observe(target);
}
return function () { return observer_1.disconnect(); };
}
else {
// Fallback for browsers that don't support ResizeObserver
var onResizeWrapper_1 = function () { return onResize(undefined); };
var win_1 = (0, utilities_1.getWindow)(Array.isArray(target) ? target[0] : target);
if (!win_1) {
// Can't listen for resize if we can't get the window object
return function () {
// Nothing to clean up
};
}
// Listen for the first animation frame, which will happen after layout is complete
var animationFrameId_1 = win_1.requestAnimationFrame(onResizeWrapper_1);
win_1.addEventListener('resize', onResizeWrapper_1, false);
return function () {
win_1.cancelAnimationFrame(animationFrameId_1);
win_1.removeEventListener('resize', onResizeWrapper_1, false);
};
}
};
exports.observeResize = observeResize;
//# sourceMappingURL=observeResize.js.map