morphing-scroll 1.0.5 → 1.0.6

package/index.d.ts

@@ -5,9 +5,7 @@ type ResizeTrackerType = {
   onResize?: (width: number, height: number) => void;
   style?: React.CSSProperties;
 };
-declare const ResizeTracker: React.FC<ResizeTrackerType>;
-
-export type IntersectionTrackerType = {
+type IntersectionTrackerType = {
   children: React.ReactNode;
   root?: Element | null;
   threshold?: number;
@@ -17,9 +15,6 @@ export type IntersectionTrackerType = {
   onVisible?: () => void;
   intersectionDeley?: number;
 };
-
-declare const IntersectionTracker: React.FC<IntersectionTrackerType>;
-
 type progressTriggerOptions =
   | "wheel"
   | "progressElement"
@@ -27,48 +22,48 @@ type progressTriggerOptions =
   | "contentSlider"
   | "arrows"
   | "loopedArrows";
-
 type MorphingScrollType = {
-  scrollID?: string; // This is only used to better recognize warnings
+  scrollID?: string;
   className?: string;
   scrollXY?: number[];
-
   objectXY?: number[];
   gap?: number[] | number;
   padding?: number[] | number;
-
   xDirection?: boolean;
   contentAlignCenter?: boolean;
   wrapAlignCenter?: boolean;
-
   progressReverse?: boolean;
   progressTrigger?: Array<progressTriggerOptions> | progressTriggerOptions;
   progressVisibility?: "visible" | "hover" | "hidden";
   scrollTop?: number | "end";
   sliderType?: boolean;
-
   lazyRender?: boolean;
   infiniteScroll?: boolean;
   rootMargin?: number[] | number;
   suspending?: boolean;
-
   fallback?: React.ReactNode;
   thumbElement?: React.ReactNode;
-  edgeGradient?: boolean | { color?: string; size?: number };
+  edgeGradient?:
+    | boolean
+    | {
+        color?: string;
+        size?: number;
+      };
   arrows?: {
     size?: number;
     className?: string;
     element?: React.ReactNode;
   };
-
   objectsWrapperMinSize?: number;
   onScrollValue?: Array<[(scrollTop: number) => boolean, () => void]>;
   children?: React.ReactNode;
-
   pixelsForSwipe?: number;
   progressBarSize?: number;
   duration?: number;
 };
+
+declare const ResizeTracker: React.FC<ResizeTrackerType>;
+declare const IntersectionTracker: React.FC<IntersectionTrackerType>;
 declare const MorphingScroll: React.FC<MorphingScrollType>;
 
 export default MorphingScroll;

package/index.js

@@ -1 +1 @@
-import e from"react";const t=({children:t,root:r,threshold:n,rootMargin:l,style:o,visibleContent:s=!1,onVisible:c,intersectionDeley:a})=>{const[i,u]=e.useState(!1),m=e.useRef(null),d=e.useRef(null),g=l?"number"==typeof l?`${l}px ${l}px ${l}px ${l}px`:2===l.length?`${l[0]}px ${l[1]}px ${l[0]}px ${l[1]}px`:`${l[0]}px ${l[1]}px ${l[2]}px ${l[3]}px`:"",p=e=>{e.forEach((e=>{u(e.isIntersecting)}))},f={root:r,threshold:n,rootMargin:g};return e.useEffect((()=>{const e=new IntersectionObserver(p,f);return m.current&&e.observe(m.current),()=>{m.current&&e.unobserve(m.current)}}),[r,n,l]),e.useEffect((()=>(a?d.current=setTimeout((()=>{i&&c&&c()}),a):i&&c&&c(),()=>{d.current&&clearTimeout(d.current)})),[i]),e.createElement("div",{className:"IntersectionTracker",ref:m,style:o},(s||i)&&t)},r=({children:t,onResize:r,style:n})=>{const l=e.useRef(null),[o,s]=e.useState({width:0,height:0});return e.useEffect((()=>{const e=l.current;if(!e)return;const t=new ResizeObserver((e=>{for(let t of e){const e=t.contentRect.width,n=t.contentRect.height;s({width:e,height:n}),r&&r(e,n)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[r]),e.createElement("div",{className:"resizeTracker",ref:l,style:Object.assign({width:"max-content",height:"max-content"},n)},t(o.width,o.height))},n=({scrollID:t="",className:n="",scrollXY:o,objectXY:s,xDirection:c=!1,gap:a,padding:i=[0,0,0,0],scrollReverse:u=!1,scrollTrigger:m="←→",scrollVisibility:d="<O>",lazyRender:g=!1,rootMargin:p=NaN,suspending:f=!1,fallback:h=null,scrollTop:b=1,infiniteScroll:x=!1,contentAlignCenter:y=!1,wrapAlignCenter:$=!1,edgeGradient:v=!1,objectsWrapperMinSize:O,children:M,onScrollValue:E,thumbElement:w})=>{const N=e.useRef(null),R=e.useRef(null),T=e.useRef(null),j=e.useRef(null);let S=!1;const k=e.useRef("none"),C=e.useRef(null),[L,z]=e.useState(0),[A,D]=e.useState(0),[X,Y]=e.useState(!1),F=e.useMemo((()=>e.Children.toArray(M).filter((e=>null!=e))),[M]),V=e.useMemo((()=>{if(F.length>0){const t=F[0];if(e.isValidElement(t))return t.key}}),[F]),B="number"==typeof i?[i,i,i,i]:2===i.length?[i[0],i[1],i[0],i[1]]:3===i.length?[i[0],i[1],i[2],i[1]]:i,[I,q,H,W]=c?[B[1],B[2],B[3],B[0]]:B,G=B[1]+B[3],P=I+H,[J,K]="number"==typeof a?[a,a]:c?[a?a[1]:0,a?a[0]:0]:[0,0],Q=e.useMemo((()=>s||(c?[o?o[0]:NaN,o?o[1]-G:NaN]:[o?o[0]-G:NaN,NaN])),[s,o,G,c]),U=Q?c?Q[0]:Q[1]:NaN,Z=Q?c?Q[1]:Q[0]:NaN,_=p?"number"==typeof p?[p,p,p,p]:c?2===p.length?[p[0],p[1],p[0],p[1]]:[p[1],p[0],p[3],p[2]]:2===p.length?[p[1],p[0],p[1],p[0]]:p:0,[ee,te]=_&&p?c?[_[3],_[1]]:[_[2],_[0]]:[0,0],re=e.useMemo((()=>{const[e,t]=o||Q;return[e,t]}),[o,Q]),ne=Q?e.useMemo((()=>{const e=c?Math.abs(Math.floor((re[1]-G)/(re[1]+J))):Math.abs(Math.floor((re[0]-G)/(re[0]+J)));return e>F.length?F.length:e<1?1:e}),[]):F.length,le=c?re[0]||0:re[1]||0,oe=e.useMemo((()=>{if(!x||ne<=1)return[];const e=F.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:ne},(()=>[]));return e.forEach((e=>{t[e%ne].push(e)})),t}),[M,ne,x]),se=e.useMemo((()=>ne>1?Math.ceil(F.length/ne):F.length),[F.length,ne]),ce=e.useMemo((()=>(Z||0)*ne+(ne-1)*K),[Z,ne,K]),ae=e.useMemo((()=>s?(U||0)*se+(se-1)*J:A),[U,se,J,A]),ie=e.useMemo((()=>ae+P),[ae,P]),ue=e.useMemo((()=>"<O>"===d||"↓<O>"===d?0===ae?0:le?Math.round(le/ie*le):0:NaN),[le,ie,d]),me=e.useMemo((()=>le?ie-le:ie),[ie,le]),de=e.useMemo((()=>{if(b)return"number"==typeof b?b:"end"===b&&ie>le?me:0}),[b,ie,me]),ge=e.useMemo((()=>re[0]&&re[1]?re[0]/2-re[1]/2:0),[re]),pe=e.useMemo((()=>{let e=[],t=0;if(x&&y){const r=Array.from({length:F.length},((e,t)=>t)),n=Math.abs(Math.floor(F.length/ne)*ne-F.length);e=n?r.slice(-n):[],t=((Z||0)+K)*(ne-n)/2}return F.map(((r,n)=>{const l=function(e,t){if(!t)return[0,e];for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n)return[r,n]}return[0,0]}(n,oe),o=function(e){return 0!==e?((U||0)+J)*e+I:0}(x?ne>1?l[1]:n:0),s=x?o+Q[1]:0,a=x&&ne>1?Z*l[0]+K*l[0]+(c?B[0]:B[1])+(y&&e.length>0&&e.includes(n)?t:0):NaN;return{elementTop:o,elementBottom:s,left:a}}))}),[M,oe,Q,a,x,ne]);S=e.useMemo((()=>{if($&&o)if(c){if(re[0]>ie)return!0}else if(re[1]>ie)return!0;return!1}),[c,re,Q,a,ie]);const fe=e.useMemo((()=>c?Math.round(ae/re[0]):Math.round(ae/re[1])),[c,re,ae]),he="string"==typeof v?{background:`linear-gradient(${v}, transparent)`}:{background:"linear-gradient(rgba(0,0,0,0.4), transparent)"},be=e.useCallback((()=>{var e;if(!v)return;const t=(null===(e=T.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+le)!==ie;R.current&&(R.current.classList.toggle("edgeBottom",r),R.current.classList.toggle("edgeTop",t>1))}),[v,le,ie]),xe=e.useCallback((()=>{if(T.current&&0!==ue&&("<O>"===d||"↓<O>"===d)){const e=Math.abs(Math.round(T.current.scrollTop/me*(le-ue)));e!==L&&z(e),0===T.current.scrollTop&&"none"===k.current&&(T.current.scrollTop=1),T.current.scrollTop>me&&(T.current.scrollTop=me),E&&E.forEach((([e,t])=>{T.current&&e(T.current.scrollTop)&&t()}))}be()}),[le,ue,L]),ye=e.useCallback((e=>{const t="thumb"===k.current?1:-1;T.current.scrollTop+=c?e.movementX*fe*t:e.movementY*fe*t}),[c,T,fe]),$e=e.useCallback((()=>{N.current&&(N.current.classList.remove("grabbingScroll"),window.removeEventListener("mousemove",ye),window.removeEventListener("mouseup",$e),document.body.style.removeProperty("cursor"),k.current="none")}),[ye,N]),ve=e.useCallback(((e,t)=>{N.current&&(k.current=t,("↓<O>"===d||"<O>"===d)&&N.current.classList.add("grabbingScroll"),window.addEventListener("mousemove",ye),window.addEventListener("mouseup",$e),document.body.style.cursor="grabbing")}),[ye,$e,N]),Oe=e.useCallback(((e,t)=>{D(t-P)}),[c,P,ae]),Me=e.useCallback(((e,t,r)=>{if(!T.current)return;const n=T.current.scrollTop,l=performance.now(),o=s=>{if(!T.current)return;const c=s-l,a=Math.min(c/e,1);t&&(T.current.scrollTop=n+(t-n)*a),c<e?requestAnimationFrame(o):r()};requestAnimationFrame(o)}),[T]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`⛔ You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""}`)}!g&&p&&u&&e("rootMargin","lazyRender"),x&&g&&u&&e("lazyRender","infiniteScroll",!0),"<Ø>"===d&&(u&&e("scrollReverse","scrollVisibility `<O>`"),("←→"===m||"←→/←O→"===m)&&e("scrollTrigger `←→` or `←→/←O→`","scrollVisibility `<O>`")),!f&&h&&u&&e("fallback","suspending"),x&&Y(!0),be()}),[]),e.useEffect((()=>{if(b&&T.current&&F.length>0&&"end"===b){let e;const t=()=>{C.current=V};return null===C.current?e=requestAnimationFrame((()=>Me(200,null!=de?de:0,t))):C.current!==V?Me(200,NaN,t):C.current===V&&(e=requestAnimationFrame((()=>Me(200,null!=de?de:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[ae]);const Ee=e.createElement("div",{className:"objectsWrapper",ref:j,onMouseDown:e=>("<c>"===m||"<c>/←O→"===m)&&ve(e,"wrapp"),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${I}px ${q}px ${H}px ${W}px`},a?{gap:`${J}px ${K}px`}:{}),ce?{width:`${ce}px`}:{}),s&&ae&&{position:"absolute",height:`${ae}px`}),O&&{minHeight:`calc(${O}px - ${P}px)`}),!x&&y&&{flexDirection:"row",justifyContent:"center"}),!c&&{flexDirection:"column"})},F.map(((t,r)=>{const n=t.key;if(!x||!X)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,mRootLocal:_,localObjectXY:Q,lazyRender:g});{const{elementTop:o,elementBottom:s,left:a}=pe[r];if((c?re[0]:re[1])+ee>o-T.current.scrollTop&&s-T.current.scrollTop>0-te)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,elementTop:o,left:a,mRootLocal:_,infiniteScroll:x,infiniteScrollState:X,localObjectXY:Q})}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${"←→/←O→"===m?" draggableScroll":"<c>"===m||"◄|►/<c>"===m?" draggableContent":"<c>/←O→"===m?" draggableContent draggableScroll":""}${"↓<O>"===d?" scrollOnHover":""} ${n}`,ref:N,style:{width:`${re[0]}px`,height:`${re[1]}px`}},e.createElement("div",{className:"scrollContent",ref:R,style:Object.assign({width:c?`${re[1]}px`:`${re[0]}px`,height:c?`${re[0]}px`:`${re[1]}px`},c&&{transform:`rotate(-90deg) translate(${ge}px, ${ge}px) scaleX(-1)`})},v&&e.createElement("div",{className:"edge top",style:he}),v&&e.createElement("div",{className:"edge bottom",style:he}),("<O>"===d||"↓<O>"===d)&&ue<le&&e.createElement("div",{className:"scrollBar "+(u?"scrollReverse":""),style:"←→/←O→"===m||"<c>/←O→"===m?{}:{pointerEvents:"none"}},e.createElement("div",{className:"scrollBarThumb"+(w?"":" defaultThumb"),onMouseDown:e=>("←→/←O→"===m||"<c>/←O→"===m)&&ve(e,"thumb"),style:{height:`${ue}px`,top:`${L}px`}},w,e.createElement("div",{className:"clickField"}))),e.createElement("div",{className:"scrollElement",ref:T,onScroll:xe,style:Object.assign(Object.assign({},S&&{alignItems:"center"}),"←→"===m||"←→/←O→"===m?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},s?Ee:e.createElement(r,{onResize:Oe},(()=>Ee)))))},l=e.memo((({children:r,elementTop:n,left:l,mRootLocal:o,scrollElementRef:s,infiniteScrollState:c,xyObject:a,xyObjectReverse:i,localObjectXY:u,rootMargin:m,suspending:d,fallback:g,infiniteScroll:p,lazyRender:f})=>{const h=d?e.createElement(e.Suspense,{fallback:g},r):r;if(p&&c)return e.createElement(t,{root:s.current,rootMargin:m,style:Object.assign({position:"absolute",width:`${i}px`,height:`${a}px`,top:`${n}px`},null!==l?{left:`${l}px`}:{})},e.createElement("div",{style:{width:`${i}px`}},h));{const r={width:`${u[0]}px`},n={width:`${i}px`,height:`${a}px`};return f?e.createElement(t,{root:s.current,rootMargin:o,style:n},e.createElement("div",{style:r},h)):e.createElement("div",{style:n},e.createElement("div",{style:r},h))}}));l.displayName="ScrollObject";export{t as IntersectionTracker,r as ResizeTracker,n as default};
+import e from"react";const t=({children:t,root:r,threshold:n,rootMargin:s,style:l,visibleContent:o=!1,onVisible:c,intersectionDeley:i})=>{const[a,u]=e.useState(!1),m=e.useRef(null),g=e.useRef(null),p=s?"number"==typeof s?`${s}px ${s}px ${s}px ${s}px`:2===s.length?`${s[0]}px ${s[1]}px ${s[0]}px ${s[1]}px`:`${s[0]}px ${s[1]}px ${s[2]}px ${s[3]}px`:"",d=e=>{e.forEach((e=>{u(e.isIntersecting)}))},f={root:r,threshold:n,rootMargin:p};return e.useEffect((()=>{const e=new IntersectionObserver(d,f);return m.current&&e.observe(m.current),()=>{m.current&&e.unobserve(m.current)}}),[r,n,s]),e.useEffect((()=>(i?g.current=setTimeout((()=>{a&&c&&c()}),i):a&&c&&c(),()=>{g.current&&clearTimeout(g.current)})),[a]),e.createElement("div",{ref:m,style:l},(o||a)&&t)},r=({children:t,onResize:r,style:n})=>{const s=e.useRef(null),[l,o]=e.useState({width:0,height:0});return e.useEffect((()=>{const e=s.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e){const e=t.contentRect.width,n=t.contentRect.height;o({width:e,height:n}),r&&r(e,n)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[r]),e.createElement("div",{className:"resizeTracker",ref:s,style:Object.assign({width:"max-content",height:"max-content"},n)},t(l.width,l.height))},n=({scrollID:t="",className:n="",scrollXY:l,objectXY:o,xDirection:c=!1,gap:i,padding:a=[0,0,0,0],progressReverse:u=!1,progressTrigger:m="wheel",progressVisibility:g="visible",sliderType:p=!1,lazyRender:d=!1,rootMargin:f=0,suspending:h=!1,fallback:b=null,scrollTop:v=1,infiniteScroll:y=!1,contentAlignCenter:$=!1,wrapAlignCenter:x=!1,edgeGradient:E,objectsWrapperMinSize:w,children:M,onScrollValue:R,thumbElement:T,arrows:O,pixelsForSwipe:j=8,progressBarSize:k=4,duration:S=200})=>{const z=e.useRef(null),N=e.useRef(null),C=e.useRef(null),L=e.useRef(null),A=e.useRef(null),Y=e.useRef(null);let F=!1;const D=e.useRef(null),B=e.useRef(""),V=e.useRef(0),[X,q]=e.useState(!1),[H,I]=e.useState(0),[W,_]=e.useState(0),[G,P]=e.useState(!1),J=e.useMemo((()=>e.Children.toArray(M).filter((e=>null!=e))),[M]),K=e.useMemo((()=>{if(J.length>0){const t=J[0];if(e.isValidElement(t))return t.key}}),[J]),Q={size:40,className:"",element:e.createElement("div",{className:"arrow"})},U={color:"rgba(0,0,0,0.4)",size:40},Z=Object.assign(Object.assign({},Q),O),ee="object"==typeof E?Object.assign(Object.assign({},U),E):U,te={background:`linear-gradient(${ee.color}, transparent)`,height:`${ee.size}px`},re="number"==typeof a?[a,a,a,a]:2===a.length?[a[0],a[1],a[0],a[1]]:3===a.length?[a[0],a[1],a[2],a[1]]:a,[ne,se,le,oe]=c?[re[1],re[2],re[3],re[0]]:re,ce=re[1]+re[3],ie=ne+le,[ae,ue]=e.useMemo((()=>"number"==typeof i?[i,i]:c?[i?i[1]:0,i?i[0]:0]:[0,0]),[i,c]),me=e.useMemo((()=>"string"==typeof m?[m]:m),[m]),ge=e.useMemo((()=>o||(c?[l?l[0]:null,l?l[1]-ce:null]:[l?l[0]-ce:null,null])),[o,l,ce,c]),pe=ge?c?ge[0]:ge[1]:null,de=ge?c?ge[1]:ge[0]:null,fe=f?"number"==typeof f?[f,f,f,f]:c?2===f.length?[f[0],f[1],f[0],f[1]]:[f[1],f[0],f[3],f[2]]:2===f.length?[f[1],f[0],f[1],f[0]]:f:null,[he,be]=fe&&f?c?[fe[3],fe[1]]:[fe[2],fe[0]]:[0,0],ve=e.useCallback((e=>me.includes(e)),[me]),ye=e.useMemo((()=>{const[e,t]=l||ge;return ve("arrows")&&Z.size?c?[e?e-2*Z.size:e,t,e,t]:[e,t?t-2*Z.size:t,e,t]:[e,t,e,t]}),[l,ge,c,O]),$e=ge?e.useMemo((()=>{if(!ye[0]||!ye[1])return 1;const e=c?Math.abs(Math.floor((ye[1]-ce)/(ye[1]+ae))):Math.abs(Math.floor((ye[0]-ce)/(ye[0]+ae)));return e>J.length?J.length:e<1?1:e}),[]):J.length,xe=c?ye[0]||0:ye[1]||0,Ee=e.useMemo((()=>{if(!y||$e<=1)return[];const e=J.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:$e},(()=>[]));return e.forEach((e=>{t[e%$e].push(e)})),t}),[M,$e,y]),we=e.useMemo((()=>$e>1?Math.ceil(J.length/$e):J.length),[J.length,$e]),Me=e.useMemo((()=>(de||0)*$e+($e-1)*ue),[de,$e,ue]),Re=e.useMemo((()=>o?(pe||0)*we+(we-1)*ae:W),[pe,we,ae,W]),Te=e.useMemo((()=>Re+ie),[Re,ie]),Oe=e.useMemo((()=>"visible"===g||"hover"===g?0===Re?0:xe?Math.round(xe/Te*xe):0:0),[xe,Te,g]),je=e.useMemo((()=>xe?Te-xe:Te),[Te,xe]),ke=e.useMemo((()=>{if(v)return"number"==typeof v?v:"end"===v&&Te>xe?je:0}),[v,Te,je]),Se=e.useMemo((()=>ye[0]&&ye[1]?ye[0]/2-ye[1]/2:0),[ye]),ze=e.useMemo((()=>{let e=[],t=0;if(y&&$){const r=Array.from({length:J.length},((e,t)=>t)),n=Math.abs(Math.floor(J.length/$e)*$e-J.length);e=n?r.slice(-n):[],t=((de||0)+ue)*($e-n)/2}return J.map(((r,n)=>{const s=function(e,t){if(!t)return[0,e];for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n)return[r,n]}return[0,0]}(n,Ee),l=function(e){return 0!==e?((pe||0)+ae)*e+ne:0}(y?$e>1?s[1]:n:0),o=y&&ge[1]?l+ge[1]:0,i=y&&de&&$e>1?de*s[0]+ue*s[0]+(c?re[0]:re[1])+($&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:l,elementBottom:o,left:i}}))}),[M,Ee,ge,i,y,$e]);F=e.useMemo((()=>{if(!ye[0]||!ye[1])return!1;if(x&&l)if(c){if(ye[0]>Te)return!0}else if(ye[1]>Te)return!0;return!1}),[c,ye,ge,i,Te]);const Ne=e.useCallback((e=>{const t=c?ye[0]:ye[1];if(!t)return null;return(e?Math.ceil:Math.floor)(Re/t)}),[c,ye,Re]),Ce=e.useCallback(((e,t)=>{const r=C.current,n=L.current;if(!r||!n)return;const s=r.scrollTop,l=n.clientHeight,o=Ne(!0),c=e=>Ve(e,(()=>{}));"first"===e&&s>0&&c(s<=xe?0:s-xe),"last"===e&&o&&s+xe!==l&&c(s+xe>=xe*o?l:s+xe)}),[C,L,Ne]),Le=e.useCallback((()=>{var e;if(!E)return;const t=(null===(e=C.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+xe)!==Te;if(N.current&&(N.current.classList.toggle("edgeLast",r),N.current.classList.toggle("edgeFirst",t>1),ve("arrows")&&(N.current.classList.toggle("l_ArrOff",!r),N.current.classList.toggle("f_ArrOff",t<=1)),A.current)){function n(){var e;const r=null===(e=A.current)||void 0===e?void 0:e.querySelectorAll(".sliderElem");r&&r.forEach(((e,r)=>{const n=t>=xe*r&&t<xe*(r+1);e.classList.toggle("active",n)}))}n()}}),[E,xe,Te]),Ae=e.useCallback((()=>{if(C.current&&0!==Oe&&("visible"===g||"hover"===g)){const e=Math.abs(Math.round(C.current.scrollTop/je*(xe-Oe)));e===H||p||I(e),0===C.current.scrollTop&&"none"===B.current&&(C.current.scrollTop=1),C.current.scrollTop>je&&(C.current.scrollTop=je),R&&R.forEach((([e,t])=>{C.current&&e(C.current.scrollTop)&&t()}))}Le()}),[xe,Oe,H]),Ye=e.useCallback((e=>{const t=C.current,r=Ne();if(t&&r){if(["thumb","wrapp"].includes(B.current)){const n="thumb"===B.current?1:-1;t.scrollTop+=(c?e.movementX:e.movementY)*r*n}if("slider"===B.current){const r=L.current;if(!r)return;const n=r.clientHeight,s=e=>Ve(e,(()=>{V.current=0,q((e=>!e))})),l=e=>{const r=t.scrollTop+e*xe;s(e>0?Math.min(r,n-xe):Math.max(r,0))};e.movementY>0&&V.current<j?(V.current+=e.movementY,V.current>=j&&t.scrollTop+xe!=n&&l(1)):e.movementY<0&&V.current>-j&&(V.current-=Math.abs(e.movementY),V.current<=-j&&0!=t.scrollTop&&l(-1))}}}),[c,C,Ne]),Fe=e.useCallback((()=>{const e=Y.current;e&&(e.classList.remove("grabbingElement"),window.removeEventListener("mousemove",Ye),window.removeEventListener("mouseup",Fe),document.body.style.removeProperty("cursor"),B.current="",q((e=>!e)))}),[Ye,z]),De=e.useCallback(((e,t,r)=>{r&&(Y.current=r,B.current=t,q((e=>!e)),("hover"===g||"visible"===g)&&r.classList.add("grabbingElement"),window.addEventListener("mousemove",Ye),window.addEventListener("mouseup",Fe),document.body.style.cursor="grabbing")}),[Ye,Fe,z]),Be=e.useCallback(((e,t)=>{_(t-ie)}),[c,ie,Re]),Ve=e.useCallback(((e,t)=>{const r=C.current;if(!r)return;const n=r.scrollTop,s=performance.now(),l=o=>{const c=o-s,i=Math.min(c/S,1);(e||0===e)&&(r.scrollTop=n+(e-n)*i),c<S?requestAnimationFrame(l):t()};requestAnimationFrame(l)}),[C.current]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""} 👺`)}!d&&f&&u&&e("rootMargin","lazyRender"),y&&d&&u&&e("lazyRender","infiniteScroll",!0),"hidden"===g&&(u&&e("progressReverse","progressVisibility `hidden`",!0),ve("progressElement")&&e("progressTrigger [`scrollThumb`]","progressVisibility `hidden`",!0),ve("arrows")&&e("progressTrigger [`arrows`]","progressVisibility `hidden`",!0)),!ve("arrows")&&O&&u&&e("arrows","progressTrigger [`arrows`]"),!h&&b&&u&&e("fallback","suspending"),y&&P(!0),Le()}),[]),e.useEffect((()=>{if(v&&C.current&&J.length>0&&"end"===v){let e;const t=()=>{D.current=K};return null===D.current?e=requestAnimationFrame((()=>Ve(null!=ke?ke:0,t))):D.current!==K?Ve(NaN,t):D.current===K&&(e=requestAnimationFrame((()=>Ve(null!=ke?ke:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[Re]);const Xe=e.createElement("div",{className:"objectsWrapper",ref:L,onMouseDown:e=>ve("content")&&De(e,"wrapp",L.current),style:Object.assign(Object.assign(Object.assign(Object.assign({padding:`${ne}px ${se}px ${le}px ${oe}px`},i?{gap:`${ae}px ${ue}px`}:{}),Me?{width:`${Me}px`}:{}),o&&Re&&{position:"absolute",height:`${Re}px`}),w&&{minHeight:`calc(${w}px - ${ie}px)`})},J.map(((t,r)=>{var n,l;const o=t.key;if(!y||!G)return e.createElement(s,{key:o,scrollElementRef:C,xyObjectReverse:de,xyObject:pe,rootMargin:f,suspending:h,fallback:b,mRootLocal:fe,localObjectXY:ge,lazyRender:d},t);{const{elementTop:i,elementBottom:a,left:u}=ze[r];if((c?null!==(n=ye[0])&&void 0!==n?n:0:null!==(l=ye[1])&&void 0!==l?l:0)+he>i-C.current.scrollTop&&a-C.current.scrollTop>0-be)return e.createElement(s,{key:o,scrollElementRef:C,xyObjectReverse:de,xyObject:pe,rootMargin:f,suspending:h,fallback:b,elementTop:i,left:u,mRootLocal:fe,infiniteScroll:y,infiniteScrollState:G,localObjectXY:ge},t)}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${ve("content")?" draggableContent":""}${"hover"===g?" progressOnHover":""} ${n}`,ref:z,style:{width:`${ye[2]}px`,height:`${ye[3]}px`}},e.createElement("div",{className:"scrollContent",ref:N,style:Object.assign(Object.assign({width:c?`${ye[1]}px`:`${ye[0]}px`,height:c?`${ye[0]}px`:`${ye[1]}px`},c&&{transform:`rotate(-90deg) translate(${Se}px, ${Se}px) scaleX(-1)`}),ve("arrows")&&Z.size&&(c?{left:`${Z.size}px`}:{top:`${Z.size}px`}))},ve("arrows")&&["first","last"].map((t=>e.createElement("div",{key:t,className:`arrowBox ${t}${Z.className?" "+Z.className:""}`,style:{height:`${Z.size}px`},onClick:()=>Ce(t)},Z.element))),E&&e.createElement("div",{className:"edge first",style:te}),E&&e.createElement("div",{className:"edge last",style:te}),("visible"===g||"hover"===g)&&Oe<xe&&e.createElement(e.Fragment,null,p?e.createElement("div",{className:`sliderBar${u?" progressReverse":""}${ve("progressElement")?" draggable":""}`,ref:A,onMouseDown:e=>De(e,"slider",z.current)},Array.from({length:Ne()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:`${k}px`}},T)))):e.createElement("div",{className:`scrollBar${u?" progressReverse":""}${ve("progressElement")?" draggable":""}`,style:{width:`${k}px`}},e.createElement("div",{className:"scrollBarThumb"+(T?"":" defaultThumb"),onMouseDown:e=>ve("progressElement")&&De(e,"thumb",z.current),style:{height:`${Oe}px`,top:`${H}px`}},T,e.createElement("div",{className:"clickField"})))),e.createElement("div",{className:"scrollElement",ref:C,onScroll:Ae,style:Object.assign(Object.assign({},F&&{alignItems:"center"}),ve("wheel")?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},o?Xe:e.createElement(r,{onResize:Be},(()=>Xe)))))},s=e.memo((({children:r,elementTop:n,left:s,mRootLocal:l,scrollElementRef:o,infiniteScrollState:c,xyObject:i,xyObjectReverse:a,localObjectXY:u,rootMargin:m,suspending:g,fallback:p,infiniteScroll:d,lazyRender:f})=>{const h=g?e.createElement(e.Suspense,{fallback:p},r):r;if(d&&c)return e.createElement(t,{root:o.current,rootMargin:m,style:Object.assign({position:"absolute",width:`${a}px`,height:`${i}px`,top:`${n}px`},null!==s?{left:`${s}px`}:{})},e.createElement("div",{style:{width:`${a}px`}},h));{const r=u[0]?{width:`${u[0]}px`}:{},n={width:`${a}px`,height:`${i}px`};return f?e.createElement(t,{root:o.current,rootMargin:l,style:n},e.createElement("div",{style:r},h)):e.createElement("div",{style:n},e.createElement("div",{style:r},h))}}));s.displayName="ScrollObject";export{t as IntersectionTracker,r as ResizeTracker,n as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "This is a library for the convenience of various object scrolling methods 💫",
   "author": "Georg Schilin",
   "license": "MIT",