@speaker-ender/react-scrollr/dist/index.cjs.js

React tools for scroll animations

var B=Object.create;var S=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var n in t)S(e,n,{get:t[n],enumerable:!0})},M=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of J(t))!Q.call(e,o)&&o!==n&&S(e,o,{get:()=>t[o],enumerable:!(c=G(t,o))||c.enumerable});return e};var E=(e,t,n)=>(n=e!=null?B(K(e)):{},M(t||!e||!e.__esModule?S(n,"default",{value:e,enumerable:!0}):n,e)),X=e=>M(S({},"__esModule",{value:!0}),e);var _={};U(_,{InViewComponent:()=>D,ObserverContextProvider:()=>H,ScrollContextProvider:()=>F,useInViewState:()=>z,useInViewTransition:()=>R,useObserverContext:()=>I,useScrollContext:()=>N});module.exports=X(_);var P=require("@speaker-ender/react-ssr-tools"),a=E(require("react")),h=(0,a.createContext)(null),Y=e=>{let t=(0,P.useClientHook)(),[n,c]=(0,a.useState)(null),o=(0,a.useRef)([]),i=(0,a.useCallback)(r=>{n&&n.observe(r.element),o.current=[...o.current,r]},[n,o.current]),u=(0,a.useCallback)(r=>{let s=o.current.find(l=>l.callback===r.callback);!!s&&!!n&&n.unobserve(s.element),o.current=o.current.filter(l=>l!==s)},[n,o.current]),d=(0,a.useCallback)((r,s)=>{r.forEach(l=>{let f=l.target,b=o.current.find(C=>C.element==f);b&&b.callback(l.isIntersecting,l.intersectionRatio)})},[o.current]);return(0,a.useEffect)(()=>{!!o&&!!n&&o.current.forEach(r=>n.observe(r.element))},[n]),(0,a.useEffect)(()=>{if(!!t&&!n){let r={root:e.root?e.root.current:null,rootMargin:e.rootMargin||"-90px 0px -10% 0px",threshold:e.threshold||[0]};c(new IntersectionObserver(d,r))}return()=>{n&&n.disconnect()}},[t]),{inViewObserver:n,registerInViewElement:i,unregisterInViewElement:u}},I=()=>{let e=(0,a.useContext)(h);if(!e)throw new Error("Observer Context used outside of ObserverContext.Provider");return e},H=e=>{let t=Y(e);return a.default.createElement(h.Provider,{value:t},e.children)};var m=E(require("react")),y=require("@speaker-ender/js-measure"),w=require("@speaker-ender/react-ssr-tools");var p=require("react"),O=e=>{let t=(0,p.useRef)();return(0,p.useEffect)(()=>{t.current=e},[e]),t.current},L=e=>{let t=(0,p.useRef)(e),n=(0,p.useCallback)(o=>{t.current=[...t.current,o]},[t.current]),c=(0,p.useCallback)(o=>{t.current=t.current.filter(i=>i!==o)},[t.current]);return[n,c,t]};var j=(0,m.createContext)(null),g=(e,t)=>y.hasWindow?{currentPosition:t?t.scrollTop:(0,y.scrollTopDistance)(),prevPosition:e}:void 0,Z=({withContext:e})=>{let t=(0,w.useClientHook)(),n=(0,m.useRef)(!1),c=(0,m.useRef)(g()),[o,i]=(0,m.useState)(),[u,d,r]=L([]),s=(0,w.useEventCallback)(()=>{let f=g(c.current&&c.current.currentPosition,o);f?.currentPosition!==c.current?.currentPosition?(r.current.map(b=>b(f?f.currentPosition:0,f?f.prevPosition:0)),c.current=f):n.current=!1,n.current&&window.requestAnimationFrame(s)},[c.current,r]),l=(0,w.useEventCallback)(()=>{!n.current&&t&&e&&(e||o)&&(n.current=!0,window.requestAnimationFrame(s))},[t]);return(0,m.useEffect)(()=>(t&&o&&o.addEventListener("scroll",l),()=>{o&&o.removeEventListener("scroll",l)}),[t,o]),(0,m.useEffect)(()=>(t&&e&&window.addEventListener("scroll",l),()=>{n.current=!1,window.removeEventListener("scroll",l)}),[t]),[c,u,d,i]},N=()=>{let e=(0,m.useContext)(j);if(!e)throw new Error("Scroll Context used outside of ScrollContext.Provider");return e},F=e=>{let t=Z({withContext:!0,...e});return m.default.createElement(j.Provider,{value:t},e.children)};var A=E(require("react"));var q=require("react"),k=require("react"),V=require("@speaker-ender/react-ssr-tools");var R=(e=.2,t,n,c)=>{let o=(0,V.useClientHook)(),{registerInViewElement:i,unregisterInViewElement:u}=I(),d=(0,k.useRef)(!1),r=(0,k.useRef)(null),s=O(r.current),l=(0,V.useEventCallback)((b,C)=>{let v=C>=e&&b;if(v!==d.current){if(v){if(r.current)switch(c){case"fade-in":r.current.style.opacity="1";break;case"fade-side":r.current.style.opacity="1",r.current.style.transform="translate3d(0px, 0, 0)";break;case"fade-up":r.current.style.opacity="1",r.current.style.transform="translate3d(0, 0px, 0)";break;default:r.current.style.opacity="1";break}}else if(r.current)switch(c){case"fade-in":r.current.style.opacity="0";break;case"fade-side":r.current.style.opacity="0",r.current.style.transform="translate3d(-20px, 0, 0)";break;case"fade-up":r.current.style.opacity="0",r.current.style.transform="translate3d(0, 20px, 0)";break;default:r.current.style.opacity="0";break}d.current=v}n&&n(b,C),!!v&&!!t&&!!u&&u({element:r.current||s,callback:l})},[d.current,u,r.current,s]),f=(0,q.useCallback)(b=>{r.current=b},[]);return(0,k.useEffect)(()=>(!!o&&!!i&&i({element:r.current,callback:l}),()=>{u&&u({element:s,callback:l})}),[o,r.current]),(0,k.useEffect)(()=>()=>{u&&u({element:r.current||s,callback:l})},[]),[f]};var D=e=>{let[t]=R(e.threshold,e.untrackOnCallback,e.callback,e.transitionStyle);return A.createElement("div",{style:{transition:"opacity 350ms ease-in-out, transform 350ms ease-in-out",opacity:e.transitionStyle==="none"?"1":"0"},ref:t},e.children)};var T=E(require("react")),x=require("react"),W=require("@speaker-ender/react-ssr-tools");var z=(e=.2,t,n)=>{let c=(0,W.useClientHook)(),{registerInViewElement:o,unregisterInViewElement:i}=I(),[u,d]=(0,x.useState)(!1),r=(0,x.useRef)(null),s=O(r.current),l=T.default.useCallback((b,C)=>{let v=C>=e&&b;d(v),n&&n(b,C),!!v&&!!t&&!!i&&i({element:r.current||s,callback:l})},[d,u,i,r.current,s]),f=(0,T.useCallback)(b=>{r.current=b},[]);return(0,x.useEffect)(()=>(!!c&&!!o&&o({element:r.current,callback:l}),()=>{i&&i({element:s,callback:l})}),[c,r.current]),(0,x.useEffect)(()=>()=>{i&&i({element:r.current||s,callback:l})},[]),[f,u]};
//# sourceMappingURL=index.cjs.js.map