react-viewport-utils
Version:
Utility components for working with the viewport in react
820 lines (786 loc) • 37.8 kB
JavaScript
import {createContext as $b3tsW$createContext, createElement as $b3tsW$createElement, createRef as $b3tsW$createRef, Fragment as $b3tsW$Fragment, PureComponent as $b3tsW$PureComponent, Component as $b3tsW$Component, useContext as $b3tsW$useContext, useEffect as $b3tsW$useEffect, useState as $b3tsW$useState, useRef as $b3tsW$useRef} from "react";
import $b3tsW$memoizeone from "memoize-one";
const $897d233e0d678ee6$export$fa3058d6bc663776 = (a, b)=>{
if (a === b) return true;
return a.x === b.x && a.y === b.y && a.xTurn === b.xTurn && a.yTurn === b.yTurn && a.xDTurn === b.xDTurn && a.yDTurn === b.yDTurn && a.isScrollingUp === b.isScrollingUp && a.isScrollingDown === b.isScrollingDown && a.isScrollingLeft === b.isScrollingLeft && a.isScrollingRight === b.isScrollingRight;
};
const $897d233e0d678ee6$export$27dfbe35de5e712e = (a, b)=>{
if (a === b) return true;
return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left && a.height === b.height && a.width === b.width;
};
const $897d233e0d678ee6$export$13f4e55ee63e731 = (a, b)=>{
if (a === b) return true;
return a.width === b.width && a.height === b.height && a.clientWidth === b.clientWidth && a.clientHeight === b.clientHeight && a.outerWidth === b.outerWidth && a.outerHeight === b.outerHeight && a.documentWidth === b.documentWidth && a.documentHeight === b.documentHeight;
};
const $897d233e0d678ee6$export$73b4e60702527040 = (()=>{
if (typeof window === 'undefined') return false;
let supportsPassive = false;
try {
const opts = Object.defineProperty({
}, 'passive', {
get: ()=>{
supportsPassive = true;
}
});
window.addEventListener('testPassive', null, opts);
window.removeEventListener('testPassive', null, opts);
} catch (e) {
return false;
}
return supportsPassive;
})();
const $897d233e0d678ee6$export$84fa33c922c57992 = (fn, delay)=>{
let timeout;
return (...args)=>{
clearTimeout(timeout);
timeout = setTimeout(fn, delay, ...args);
};
};
const $897d233e0d678ee6$export$f447d4904c6be066 = (fn, delay)=>{
let timeout;
let scrollDidUpdate = false;
let dimensionsDidUpdate = false;
return (viewport, options)=>{
clearTimeout(timeout);
scrollDidUpdate = scrollDidUpdate || options.scrollDidUpdate;
dimensionsDidUpdate = dimensionsDidUpdate || options.dimensionsDidUpdate;
timeout = setTimeout(()=>{
fn(viewport, {
scrollDidUpdate: scrollDidUpdate,
dimensionsDidUpdate: dimensionsDidUpdate
});
scrollDidUpdate = false;
dimensionsDidUpdate = false;
}, delay);
};
};
const $897d233e0d678ee6$export$67bf7e78195186ae = (location)=>{
if (process.env.NODE_ENV === 'production') return;
const fromHook = location.startsWith('use');
if (fromHook) {
console.warn(`react-viewport-utils: ${location} hook is not able to connect to a <ViewportProvider>. Therefore it cannot detect updates from the viewport and will not work as expected. To resolve this issue please add a <ViewportProvider> as a parent of the component using the hook, e.g. directly in the ReactDOM.render call:
import * as ReactDOM from 'react-dom';
import { ViewportProvider, ${location} } from 'react-viewport-utils';
const MyComponent = () => {
${location}()
...
}
ReactDOM.render(
<ViewportProvider>
<main role="main">
<MyComponent />
</main>
</ViewportProvider>,
document.getElementById('root')
);`);
return;
}
console.warn(`react-viewport-utils: ${location} component is not able to connect to a <ViewportProvider>. Therefore it cannot detect updates from the viewport and will not work as expected. To resolve this issue please add a <ViewportProvider> as a parent of the <ObserveViewport> component, e.g. directly in the ReactDOM.render call:
import * as ReactDOM from 'react-dom';
import { ViewportProvider, ObserveViewport } from 'react-viewport-utils';
ReactDOM.render(
<ViewportProvider>
<main role="main">
<ObserveViewport>
{({ scroll, dimensions }) => ...}
</ObserveViewport>
</main>
</ViewportProvider>,
document.getElementById('root')
);`);
};
const $897d233e0d678ee6$export$eb292a8e3121aa55 = ()=>{
if (process.env.NODE_ENV === 'production') return;
console.warn('react-viewport-utils: This browser does not support the ResizeObserver API, therefore not all possible resize events will be detected. In most of the cases this is not an issue and can be ignored. If its relevant to your application please consider adding a polyfill, e.g. https://www.npmjs.com/package/resize-observer-polyfill .');
};
const $897d233e0d678ee6$export$6cb2c4c0a22909c0 = (()=>{
if (typeof window !== 'undefined') {
const nativeRAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
if (nativeRAF) return nativeRAF.bind(window);
}
return function requestAnimationFrameFallback(callback) {
return setTimeout(callback, 1000 / 60);
};
})();
const $897d233e0d678ee6$export$e00521de187a817a = (()=>{
if (typeof window !== 'undefined') {
const nativeCAF = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame;
if (nativeCAF) return nativeCAF.bind(window);
}
return clearTimeout;
})();
const $897d233e0d678ee6$export$461939dd4422153 = typeof performance !== 'undefined' && performance.now ? performance.now.bind(performance) : Date.now.bind(Date);
const $897d233e0d678ee6$export$a504f140cdf2f040 = ()=>{
const start = $897d233e0d678ee6$export$461939dd4422153();
return ()=>$897d233e0d678ee6$export$461939dd4422153() - start
;
};
const $1f258e84bc15edd3$export$dac223ab5cbbb872 = ()=>{
if (typeof document === 'undefined' || !document.documentElement) return $1f258e84bc15edd3$export$86b153b47987c839();
const { innerWidth: innerWidth , innerHeight: innerHeight , outerWidth: outerWidth , outerHeight: outerHeight } = window;
const { clientWidth: clientWidth , clientHeight: clientHeight , scrollHeight: scrollHeight , scrollWidth: scrollWidth , offsetHeight: offsetHeight , offsetWidth: offsetWidth , } = document.documentElement;
return {
width: innerWidth,
height: innerHeight,
clientWidth: clientWidth,
clientHeight: clientHeight,
outerWidth: outerWidth,
outerHeight: outerHeight,
documentWidth: Math.max(scrollWidth, offsetWidth, clientWidth),
documentHeight: Math.max(scrollHeight, offsetHeight, clientHeight)
};
};
const $1f258e84bc15edd3$var$getNodeScroll = (elem = window)=>{
let { scrollX: scrollX , scrollY: scrollY } = elem;
if (scrollX === undefined) scrollX = elem.pageXOffset;
if (scrollY === undefined) scrollY = elem.pageYOffset;
return {
x: scrollX,
y: scrollY
};
};
const $1f258e84bc15edd3$export$66b9d0194e6be791 = (prevScrollState = $1f258e84bc15edd3$export$fcf3650bbe5e9764())=>{
if (typeof window === 'undefined') return $1f258e84bc15edd3$export$fcf3650bbe5e9764();
const { x: x , y: y } = $1f258e84bc15edd3$var$getNodeScroll();
const nextScrollState = {
...prevScrollState
};
const { isScrollingLeft: prevIsScrollingLeft , isScrollingUp: prevIsScrollingUp , xTurn: prevXTurn , yTurn: prevYTurn , } = prevScrollState;
nextScrollState.isScrollingLeft = $1f258e84bc15edd3$var$isScrollingLeft(x, nextScrollState);
nextScrollState.isScrollingRight = $1f258e84bc15edd3$var$isScrollingRight(x, nextScrollState);
nextScrollState.isScrollingUp = $1f258e84bc15edd3$var$isScrollingUp(y, nextScrollState);
nextScrollState.isScrollingDown = $1f258e84bc15edd3$var$isScrollingDown(y, nextScrollState);
nextScrollState.xTurn = nextScrollState.isScrollingLeft === prevIsScrollingLeft ? prevXTurn : x;
nextScrollState.yTurn = nextScrollState.isScrollingUp === prevIsScrollingUp ? prevYTurn : y;
nextScrollState.xDTurn = x - nextScrollState.xTurn;
nextScrollState.yDTurn = y - nextScrollState.yTurn;
nextScrollState.x = x;
nextScrollState.y = y;
return nextScrollState;
};
const $1f258e84bc15edd3$var$isScrollingLeft = (x, prev)=>{
switch(true){
case x < prev.x:
return true;
case x > prev.x:
return false;
case x === prev.x:
return prev.isScrollingLeft;
default:
throw new Error('Could not calculate isScrollingLeft');
}
};
const $1f258e84bc15edd3$var$isScrollingRight = (x, prev)=>{
switch(true){
case x > prev.x:
return true;
case x < prev.x:
return false;
case x === prev.x:
return prev.isScrollingRight;
default:
throw new Error('Could not calculate isScrollingRight');
}
};
const $1f258e84bc15edd3$var$isScrollingUp = (y, prev)=>{
switch(true){
case y < prev.y:
return true;
case y > prev.y:
return false;
case y === prev.y:
return prev.isScrollingUp;
default:
throw new Error('Could not calculate isScrollingUp');
}
};
const $1f258e84bc15edd3$var$isScrollingDown = (y, prev)=>{
switch(true){
case y > prev.y:
return true;
case y < prev.y:
return false;
case y === prev.y:
return prev.isScrollingDown;
default:
throw new Error('Could not calculate isScrollingDown');
}
};
const $1f258e84bc15edd3$export$fcf3650bbe5e9764 = ()=>({
x: 0,
y: 0,
isScrollingUp: false,
isScrollingDown: false,
isScrollingLeft: false,
isScrollingRight: false,
xTurn: 0,
yTurn: 0,
xDTurn: 0,
yDTurn: 0
})
;
const $1f258e84bc15edd3$export$86b153b47987c839 = ()=>({
width: 0,
height: 0,
clientWidth: 0,
clientHeight: 0,
outerWidth: 0,
outerHeight: 0,
documentWidth: 0,
documentHeight: 0
})
;
class $1f258e84bc15edd3$export$2e2bcd8739ae039 extends $b3tsW$PureComponent {
componentDidMount() {
const options = $897d233e0d678ee6$export$73b4e60702527040 ? {
passive: true
} : false;
window.addEventListener('scroll', this.handleScroll, options);
window.addEventListener('resize', this.handleResizeDebounce, options);
window.addEventListener('orientationchange', this.handleResizeDebounce, options);
if (typeof window.ResizeObserver !== 'undefined') {
this.resizeObserver = new window.ResizeObserver(this.handleResizeDebounce);
this.resizeObserver.observe(document.body);
} else $897d233e0d678ee6$export$eb292a8e3121aa55();
this.handleScroll();
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll, false);
window.removeEventListener('resize', this.handleResizeDebounce, false);
window.removeEventListener('orientationchange', this.handleResizeDebounce, false);
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
if (typeof this.tickId === 'number') $897d233e0d678ee6$export$e00521de187a817a(this.tickId);
}
getPropsFromState() {
return {
scroll: this.getPublicScroll(this.lastSyncedScrollState),
dimensions: this.getPublicDimensions(this.lastSyncedDimensionsState)
};
}
render() {
return null;
}
constructor(props){
super(props);
this.tick = ()=>{
if (this) {
if (this.scrollMightHaveUpdated || this.resizeMightHaveUpdated) {
this.syncState();
this.scrollMightHaveUpdated = false;
this.resizeMightHaveUpdated = false;
}
this.tickId = undefined;
}
};
this.handleScroll = ()=>{
this.scrollMightHaveUpdated = true;
if (!this.tickId) this.tickId = $897d233e0d678ee6$export$6cb2c4c0a22909c0(this.tick);
};
this.handleResize = ()=>{
this.resizeMightHaveUpdated = true;
if (!this.tickId) this.tickId = $897d233e0d678ee6$export$6cb2c4c0a22909c0(this.tick);
};
this.handleResizeDebounce = $897d233e0d678ee6$export$84fa33c922c57992(this.handleResize, 88);
this.getPublicScroll = $b3tsW$memoizeone((scroll)=>({
...scroll
})
, ([a], [b])=>$897d233e0d678ee6$export$fa3058d6bc663776(a, b)
);
this.getPublicDimensions = $b3tsW$memoizeone((dimensions)=>({
...dimensions
})
, ([a], [b])=>$897d233e0d678ee6$export$13f4e55ee63e731(a, b)
);
this.syncState = ()=>{
if (!this.syncedStateOnce) this.syncedStateOnce = true;
if (this.scrollMightHaveUpdated) Object.assign(this.scrollState, $1f258e84bc15edd3$export$66b9d0194e6be791(this.scrollState));
if (this.resizeMightHaveUpdated) Object.assign(this.dimensionsState, $1f258e84bc15edd3$export$dac223ab5cbbb872());
const scrollDidUpdate = this.scrollMightHaveUpdated && !$897d233e0d678ee6$export$fa3058d6bc663776(this.lastSyncedScrollState, this.scrollState);
const dimensionsDidUpdate = this.resizeMightHaveUpdated && !$897d233e0d678ee6$export$13f4e55ee63e731(this.lastSyncedDimensionsState, this.dimensionsState);
if (scrollDidUpdate) this.lastSyncedScrollState = {
...this.scrollState
};
if (dimensionsDidUpdate) this.lastSyncedDimensionsState = {
...this.dimensionsState
};
if (scrollDidUpdate || dimensionsDidUpdate) {
const publicState = this.getPropsFromState();
this.props.onUpdate(publicState, {
scrollDidUpdate: scrollDidUpdate,
dimensionsDidUpdate: dimensionsDidUpdate
});
this.updateOnIdle(publicState, {
scrollDidUpdate: scrollDidUpdate,
dimensionsDidUpdate: dimensionsDidUpdate
});
}
};
this.updateOnIdle = $897d233e0d678ee6$export$f447d4904c6be066((...args)=>{
if (typeof this.props.onIdledUpdate === 'function') this.props.onIdledUpdate(...args);
}, 166);
this.state = {
parentProviderExists: false
};
this.scrollMightHaveUpdated = false;
this.resizeMightHaveUpdated = false;
this.scrollState = $1f258e84bc15edd3$export$fcf3650bbe5e9764();
this.dimensionsState = $1f258e84bc15edd3$export$86b153b47987c839();
this.lastSyncedDimensionsState = {
...this.dimensionsState
};
this.lastSyncedScrollState = {
...this.scrollState
};
this.resizeObserver = null;
this.syncedStateOnce = false;
}
}
const $15ed3c3b4ca31431$var$createFallbackViewportRequester = ()=>{
let defaultValue;
let lastAccess = 0;
return ()=>{
if (!defaultValue || $897d233e0d678ee6$export$461939dd4422153() - lastAccess > 1000) {
defaultValue = {
scroll: $1f258e84bc15edd3$export$66b9d0194e6be791(),
dimensions: $1f258e84bc15edd3$export$dac223ab5cbbb872()
};
lastAccess = $897d233e0d678ee6$export$461939dd4422153();
}
return defaultValue;
};
};
const $15ed3c3b4ca31431$export$a35483866210d8a3 = /*#__PURE__*/ $b3tsW$createContext({
removeViewportChangeListener: (handler)=>{
},
scheduleReinitializeChangeHandler: (handler)=>{
},
addViewportChangeListener: (handler, options)=>{
},
getCurrentViewport: $15ed3c3b4ca31431$var$createFallbackViewportRequester(),
getMutableViewportState: ()=>({
dimensions: $1f258e84bc15edd3$export$86b153b47987c839(),
scroll: $1f258e84bc15edd3$export$fcf3650bbe5e9764()
})
,
hasRootProviderAsParent: false,
version: '2.0.1'
});
const $15ed3c3b4ca31431$var$maxIterations = (priority)=>{
switch(priority){
case 'highest':
return 0;
case 'high':
return 4;
case 'normal':
return 16;
case 'low':
return 64;
}
};
const $15ed3c3b4ca31431$var$shouldSkipIteration = ({ priority: getPriority , averageExecutionCost: averageExecutionCost , skippedIterations: skippedIterations }, budget)=>{
const priority = getPriority();
if (priority === 'highest') return false;
if (priority !== 'low' && averageExecutionCost <= budget) return false;
if (averageExecutionCost <= budget / 10) return false;
const probability = skippedIterations / $15ed3c3b4ca31431$var$maxIterations(priority);
if (probability >= 1) return false;
return Math.random() > probability;
};
class $15ed3c3b4ca31431$export$2e2bcd8739ae039 extends $b3tsW$PureComponent {
componentWillUnmount() {
if (typeof this.updateListenersTick === 'number') clearTimeout(this.updateListenersTick);
if (typeof this.initializeListenersTick === 'number') $897d233e0d678ee6$export$e00521de187a817a(this.initializeListenersTick);
}
handleListenerUpdate() {
if (this.updateListenersTick === undefined) this.updateListenersTick = setTimeout(()=>{
const nextState = this.listeners.length !== 0;
if (this.state.hasListeners !== nextState) this.setState({
hasListeners: this.listeners.length !== 0
});
this.updateListenersTick = undefined;
}, 1);
if (this.initializeListenersTick === undefined) this.initializeListenersTick = $897d233e0d678ee6$export$6cb2c4c0a22909c0(()=>{
if (this.collector.current && this.collector.current.syncedStateOnce && this.listeners.some((l)=>!l.initialized
)) this.triggerUpdateToListeners(this.collector.current.getPropsFromState(), {
dimensionsDidUpdate: false,
scrollDidUpdate: false
}, {
isIdle: false,
shouldInitialize: true
});
this.initializeListenersTick = undefined;
});
}
render() {
return(/*#__PURE__*/ $b3tsW$createElement($15ed3c3b4ca31431$export$a35483866210d8a3.Consumer, null, this.renderChildren));
}
constructor(props){
super(props);
this.listeners = [];
this.triggerUpdateToListeners = (state, { scrollDidUpdate: scrollDidUpdate , dimensionsDidUpdate: dimensionsDidUpdate }, options)=>{
const getOverallDuration = $897d233e0d678ee6$export$a504f140cdf2f040();
const { isIdle: isIdle , shouldInitialize: shouldInitialize } = Object.assign({
isIdle: false,
shouldInitialize: false
}, options);
let updatableListeners = this.listeners.filter(({ notifyScroll: notifyScroll , notifyDimensions: notifyDimensions , notifyOnlyWhenIdle: notifyOnlyWhenIdle , skippedIterations: skippedIterations , initialized: initialized , })=>{
const needsUpdate = skippedIterations > 0;
if (notifyOnlyWhenIdle() !== isIdle && !needsUpdate) return false;
if (shouldInitialize && !initialized) return true;
const updateForScroll = notifyScroll() && scrollDidUpdate;
const updateForDimensions = notifyDimensions() && dimensionsDidUpdate;
return updateForScroll || updateForDimensions;
});
if (this.props.experimentalSchedulerEnabled) {
if (!isIdle) {
const budget = 16 / updatableListeners.length;
updatableListeners = updatableListeners.filter((listener)=>{
const skip = listener.initialized ? $15ed3c3b4ca31431$var$shouldSkipIteration(listener, budget) : false;
if (skip) {
listener.skippedIterations++;
return false;
}
listener.skippedIterations = 0;
return true;
});
}
}
const layouts = updatableListeners.map(({ recalculateLayoutBeforeUpdate: recalculateLayoutBeforeUpdate })=>{
if (recalculateLayoutBeforeUpdate) {
const getDuration = $897d233e0d678ee6$export$a504f140cdf2f040();
const layoutState = recalculateLayoutBeforeUpdate(state);
return [
layoutState,
getDuration()
];
}
return null;
});
let overallJSHandlerTotalCost = 0;
updatableListeners.forEach((listener, index)=>{
const { handler: handler , averageExecutionCost: averageExecutionCost , iterations: iterations } = listener;
const [layout, layoutCost] = layouts[index] || [
null,
0
];
const getDuration = $897d233e0d678ee6$export$a504f140cdf2f040();
handler(state, layout);
const totalCost = layoutCost + getDuration();
const diff = totalCost - averageExecutionCost;
const i = iterations + 1;
listener.averageExecutionCost = averageExecutionCost + diff / i;
listener.iterations = i;
listener.initialized = true;
overallJSHandlerTotalCost += totalCost;
});
if (this.props.experimentalSchedulerLayoutCalculatorEnabled && updatableListeners.length) setTimeout(()=>{
const diffPerHandler = (getOverallDuration() - overallJSHandlerTotalCost) / updatableListeners.length;
updatableListeners.forEach((listener)=>{
listener.averageExecutionCost = listener.averageExecutionCost + diffPerHandler / listener.iterations;
});
}, 0);
};
this.addViewportChangeListener = (handler, options)=>{
this.listeners.push({
handler: handler,
iterations: 0,
averageExecutionCost: 0,
skippedIterations: 0,
initialized: false,
...options
});
this.handleListenerUpdate();
};
this.scheduleReinitializeChangeHandler = (h)=>{
const listener = this.listeners.find(({ handler: handler })=>handler === h
);
if (listener && listener.initialized) {
listener.initialized = false;
this.handleListenerUpdate();
}
};
this.removeViewportChangeListener = (h)=>{
this.listeners = this.listeners.filter(({ handler: handler })=>handler !== h
);
this.handleListenerUpdate();
};
this.collector = /*#__PURE__*/ $b3tsW$createRef();
this.getCurrentDefaultViewport = $15ed3c3b4ca31431$var$createFallbackViewportRequester();
this.contextValue = {
addViewportChangeListener: this.addViewportChangeListener,
removeViewportChangeListener: this.removeViewportChangeListener,
scheduleReinitializeChangeHandler: this.scheduleReinitializeChangeHandler,
getCurrentViewport: ()=>{
if (this.collector.current && this.collector.current.syncedStateOnce) return this.collector.current.getPropsFromState();
return this.getCurrentDefaultViewport();
},
getMutableViewportState: ()=>this.mutableViewportState
,
hasRootProviderAsParent: true,
version: '2.0.1'
};
this.renderChildren = (props)=>{
if (props.hasRootProviderAsParent) {
if (process.env.NODE_ENV !== 'production' && props.version !== '2.0.1') console.warn(`react-viewport-utils: Two different versions of the react-viewport-utils library are used in the same react tree. This can lead to unexpected results as the versions might not be compatible.
The <ViewportProvider> of version ${props.version} is currently used, another <ViewportProvider> of version 2.0.1 was detected but is ignored.
This is most probably due to some dependencies that use different versions of the react-viewport-utils library. You can check if an update is possible.`);
return this.props.children;
}
return(/*#__PURE__*/ $b3tsW$createElement($b3tsW$Fragment, null, this.state.hasListeners && /*#__PURE__*/ $b3tsW$createElement($1f258e84bc15edd3$export$2e2bcd8739ae039, {
ref: this.collector,
onUpdate: this.triggerUpdateToListeners,
onIdledUpdate: (state, updates)=>this.triggerUpdateToListeners(state, updates, {
isIdle: true
})
}), /*#__PURE__*/ $b3tsW$createElement($15ed3c3b4ca31431$export$a35483866210d8a3.Provider, {
value: this.contextValue
}, this.props.children)));
};
this.state = {
hasListeners: false
};
const getDimensions = ()=>{
var ref;
var ref1;
return (ref1 = (ref = this.collector.current) === null || ref === void 0 ? void 0 : ref.dimensionsState) !== null && ref1 !== void 0 ? ref1 : $1f258e84bc15edd3$export$86b153b47987c839();
};
const getScroll = ()=>{
var ref;
var ref6;
return (ref6 = (ref = this.collector.current) === null || ref === void 0 ? void 0 : ref.scrollState) !== null && ref6 !== void 0 ? ref6 : $1f258e84bc15edd3$export$fcf3650bbe5e9764();
};
this.mutableViewportState = {
get scroll () {
return getScroll();
},
get dimensions () {
return getDimensions();
}
};
}
}
class $13712c7206b3aad2$export$2e2bcd8739ae039 extends $b3tsW$Component {
componentDidUpdate(prevProps) {
const dimensionsBecameActive = !this.props.disableDimensionsUpdates && prevProps.disableDimensionsUpdates;
const scrollBecameActive = !this.props.disableScrollUpdates && prevProps.disableScrollUpdates;
if (typeof this.scheduleReinitializeChangeHandler === 'function' && (dimensionsBecameActive || scrollBecameActive)) this.scheduleReinitializeChangeHandler(this.handleViewportUpdate);
}
componentWillUnmount() {
if (this.removeViewportChangeListener) this.removeViewportChangeListener(this.handleViewportUpdate);
this.removeViewportChangeListener = undefined;
this.scheduleReinitializeChangeHandler = undefined;
if (typeof this.tickId === 'number') $897d233e0d678ee6$export$e00521de187a817a(this.tickId);
}
syncState(nextViewport) {
this.nextViewport = nextViewport;
if (this.tickId === undefined) this.tickId = $897d233e0d678ee6$export$6cb2c4c0a22909c0(()=>{
if (this.nextViewport) this.setState(this.nextViewport);
this.tickId = undefined;
this.nextViewport = undefined;
});
}
get optionNotifyScroll() {
return !this.props.disableScrollUpdates;
}
get optionNotifyDimensions() {
return !this.props.disableDimensionsUpdates;
}
render() {
const { children: children } = this.props;
return(/*#__PURE__*/ $b3tsW$createElement($b3tsW$Fragment, null, /*#__PURE__*/ $b3tsW$createElement($15ed3c3b4ca31431$export$a35483866210d8a3.Consumer, null, this.registerViewportListeners), children ? children(this.state) : null));
}
constructor(props){
super(props);
this.handleViewportUpdate = (viewport, layoutSnapshot)=>{
if (this.props.onUpdate) this.props.onUpdate(viewport, layoutSnapshot);
if (this.props.children) this.syncState(viewport);
};
this.registerViewportListeners = ({ addViewportChangeListener: addViewportChangeListener , removeViewportChangeListener: removeViewportChangeListener , scheduleReinitializeChangeHandler: scheduleReinitializeChangeHandler , hasRootProviderAsParent: hasRootProviderAsParent , getCurrentViewport: getCurrentViewport })=>{
if (!hasRootProviderAsParent) {
$897d233e0d678ee6$export$67bf7e78195186ae('ObserveViewport');
return null;
}
const shouldRegister = this.removeViewportChangeListener !== removeViewportChangeListener;
if (!shouldRegister) return null;
if (this.removeViewportChangeListener) this.removeViewportChangeListener(this.handleViewportUpdate);
this.removeViewportChangeListener = removeViewportChangeListener;
this.scheduleReinitializeChangeHandler = scheduleReinitializeChangeHandler;
addViewportChangeListener(this.handleViewportUpdate, {
notifyScroll: ()=>!this.props.disableScrollUpdates
,
notifyDimensions: ()=>!this.props.disableDimensionsUpdates
,
notifyOnlyWhenIdle: ()=>this.props.deferUpdateUntilIdle
,
priority: ()=>this.props.priority
,
recalculateLayoutBeforeUpdate: (viewport)=>{
if (this.props.recalculateLayoutBeforeUpdate) return this.props.recalculateLayoutBeforeUpdate(viewport);
return null;
}
});
if (this.props.children) this.syncState(getCurrentViewport());
return null;
};
this.state = {
scroll: $1f258e84bc15edd3$export$fcf3650bbe5e9764(),
dimensions: $1f258e84bc15edd3$export$86b153b47987c839()
};
}
}
$13712c7206b3aad2$export$2e2bcd8739ae039.defaultProps = {
disableScrollUpdates: false,
disableDimensionsUpdates: false,
deferUpdateUntilIdle: false,
priority: 'normal'
};
var _class;
function $d6bcc00f56ac0dc5$export$2e2bcd8739ae039(options = {
}) {
const deferUpdateUntilIdle = Boolean(options.deferUpdateUntilIdle);
const omit = options.omit || [];
const shouldOmitScroll = omit.indexOf('scroll') !== -1;
const shouldOmitDimensions = omit.indexOf('dimensions') !== -1;
return (WrappedComponent)=>{
const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _class = class ConnectViewport extends $b3tsW$Component {
render() {
return(/*#__PURE__*/ $b3tsW$createElement($13712c7206b3aad2$export$2e2bcd8739ae039, {
disableScrollUpdates: shouldOmitScroll,
disableDimensionsUpdates: shouldOmitDimensions,
deferUpdateUntilIdle: deferUpdateUntilIdle,
priority: options.priority
}, ({ scroll: scroll , dimensions: dimensions })=>/*#__PURE__*/ $b3tsW$createElement(WrappedComponent, {
scroll: scroll,
dimensions: dimensions,
...this.props
})
));
}
}, _class.displayName = `connectViewport(${displayName})`, _class;
};
}
function $c04d01434a222745$export$c5331f39ebe41e19(handleViewportChange, second, third) {
const { addViewportChangeListener: addViewportChangeListener , removeViewportChangeListener: removeViewportChangeListener , hasRootProviderAsParent: hasRootProviderAsParent , } = $b3tsW$useContext($15ed3c3b4ca31431$export$a35483866210d8a3);
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(second, third);
const memoOptions = $c04d01434a222745$var$useOptions(options);
$b3tsW$useEffect(()=>{
if (!hasRootProviderAsParent) {
$897d233e0d678ee6$export$67bf7e78195186ae('useViewport');
return;
}
addViewportChangeListener(handleViewportChange, {
notifyScroll: ()=>!memoOptions.disableScrollUpdates
,
notifyDimensions: ()=>!memoOptions.disableDimensionsUpdates
,
notifyOnlyWhenIdle: ()=>Boolean(memoOptions.deferUpdateUntilIdle)
,
priority: ()=>memoOptions.priority || 'normal'
,
recalculateLayoutBeforeUpdate: (...args)=>memoOptions.recalculateLayoutBeforeUpdate ? memoOptions.recalculateLayoutBeforeUpdate(...args) : null
});
return ()=>removeViewportChangeListener(handleViewportChange)
;
}, [
addViewportChangeListener || null,
removeViewportChangeListener || null,
...deps,
]);
}
const $c04d01434a222745$export$297ec8eb77d6211d = (options = {
})=>{
const { getCurrentViewport: getCurrentViewport } = $b3tsW$useContext($15ed3c3b4ca31431$export$a35483866210d8a3);
const [state, setViewport] = $b3tsW$useState(getCurrentViewport());
$c04d01434a222745$export$c5331f39ebe41e19((viewport)=>setViewport(viewport)
, options);
return state;
};
function $c04d01434a222745$export$7bd26025f7d910be(effect, second, third) {
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(second, third);
$c04d01434a222745$export$c5331f39ebe41e19((viewport, snapshot)=>effect(viewport.scroll, snapshot)
, {
disableDimensionsUpdates: true,
...options
}, deps);
}
const $c04d01434a222745$export$d928051c8cd740b = (options = {
})=>{
const { scroll: scroll } = $c04d01434a222745$export$297ec8eb77d6211d({
disableDimensionsUpdates: true,
...options
});
return scroll;
};
function $c04d01434a222745$export$24aa038ff9e33d3b(effect, second, third) {
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(second, third);
$c04d01434a222745$export$c5331f39ebe41e19((viewport, snapshot)=>effect(viewport.dimensions, snapshot)
, {
disableScrollUpdates: true,
...options
}, deps);
}
const $c04d01434a222745$export$d04af0e501fb729f = (options = {
})=>{
const { dimensions: dimensions } = $c04d01434a222745$export$297ec8eb77d6211d({
disableScrollUpdates: true,
...options
});
return dimensions;
};
function $c04d01434a222745$export$9c05c7fd1960ffde(effect, ref, third, fourth) {
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(third, fourth);
$c04d01434a222745$export$c5331f39ebe41e19((_, snapshot)=>effect(snapshot)
, {
...options,
recalculateLayoutBeforeUpdate: ()=>ref.current ? ref.current.getBoundingClientRect() : null
}, [
ref.current,
...deps
]);
}
function $c04d01434a222745$export$9823a655542017cd(ref, second, third) {
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(second, third);
return $c04d01434a222745$export$2b2cc6ba5789f9b9(()=>ref.current ? ref.current.getBoundingClientRect() : null
, options, [
ref.current,
...deps
]);
}
function $c04d01434a222745$export$2b2cc6ba5789f9b9(recalculateLayoutBeforeUpdate, second, third) {
const { options: options , deps: deps } = $c04d01434a222745$var$sortArgs(second, third);
const [state, setSnapshot] = $b3tsW$useState(null);
$c04d01434a222745$export$c5331f39ebe41e19((_, snapshot)=>setSnapshot(snapshot)
, {
...options,
recalculateLayoutBeforeUpdate: recalculateLayoutBeforeUpdate
}, deps);
return state;
}
const $c04d01434a222745$var$useOptions = (o)=>{
const optionsRef = $b3tsW$useRef(Object.create(null));
for (const key of Object.keys(optionsRef.current))delete optionsRef.current[key];
Object.assign(optionsRef.current, o);
return optionsRef.current;
};
const $c04d01434a222745$var$sortArgs = (first, second)=>{
let options = {
};
if (first && !Array.isArray(first)) options = first;
let deps = second || [];
if (first && Array.isArray(first)) deps = first;
return {
deps: deps,
options: options
};
};
const $c04d01434a222745$export$e0a3ecc2738487fa = ()=>{
return $b3tsW$useContext($15ed3c3b4ca31431$export$a35483866210d8a3).getMutableViewportState();
};
const $cce814dacbd21139$export$a4ad2735b021c132 = '2.0.1';
export {$cce814dacbd21139$export$a4ad2735b021c132 as VERSION, $15ed3c3b4ca31431$export$2e2bcd8739ae039 as ViewportProvider, $d6bcc00f56ac0dc5$export$2e2bcd8739ae039 as connectViewport, $13712c7206b3aad2$export$2e2bcd8739ae039 as ObserveViewport, $c04d01434a222745$export$d928051c8cd740b as useScroll, $c04d01434a222745$export$7bd26025f7d910be as useScrollEffect, $c04d01434a222745$export$d04af0e501fb729f as useDimensions, $c04d01434a222745$export$24aa038ff9e33d3b as useDimensionsEffect, $c04d01434a222745$export$297ec8eb77d6211d as useViewport, $c04d01434a222745$export$c5331f39ebe41e19 as useViewportEffect, $c04d01434a222745$export$2b2cc6ba5789f9b9 as useLayoutSnapshot, $c04d01434a222745$export$9823a655542017cd as useRect, $c04d01434a222745$export$9c05c7fd1960ffde as useRectEffect, $c04d01434a222745$export$e0a3ecc2738487fa as useMutableViewport, $897d233e0d678ee6$export$6cb2c4c0a22909c0 as requestAnimationFrame, $897d233e0d678ee6$export$e00521de187a817a as cancelAnimationFrame};
//# sourceMappingURL=esmodule.js.map