morphing-scroll 1.1.2 → 1.1.3

package/index.d.ts

@@ -5,6 +5,7 @@ type ResizeTrackerType = {
   onResize?: (width: number, height: number) => void;
   style?: React.CSSProperties;
 };
+
 type IntersectionTrackerType = {
   children: React.ReactNode;
   root?: Element | null;
@@ -15,13 +16,15 @@ type IntersectionTrackerType = {
   onVisible?: () => void;
   intersectionDeley?: number;
 };
-type progressTriggerOptions =
+
+type progressTriggerT =
   | "wheel"
   | "progressElement"
   | "content"
   | "contentSlider"
   | "arrows"
   | "loopedArrows";
+type AlignT = "start" | "center" | "end";
 type ScrollType = {
   scrollID?: string;
   className?: string;
@@ -30,10 +33,10 @@ type ScrollType = {
   gap?: number[] | number;
   padding?: number[] | number;
   xDirection?: boolean;
-  contentAlignCenter?: boolean;
-  wrapAlignCenter?: boolean;
+  elementsAlign?: AlignT;
+  contentAlign?: [AlignT, AlignT];
   progressReverse?: boolean;
-  progressTrigger?: Array<progressTriggerOptions> | progressTriggerOptions;
+  progressTrigger?: Array<progressTriggerT>;
   progressVisibility?: "visible" | "hover" | "hidden";
   scrollTop?: number | "end";
   sliderType?: boolean;
@@ -43,12 +46,7 @@ type ScrollType = {
   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;

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("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:x=!1,contentAlignCenter:$=!1,wrapAlignCenter:y=!1,edgeGradient:E,objectsWrapperMinSize:w,children:M,onScrollValue:O,thumbElement:T,arrows:j,pixelsForSwipe:R=8,progressBarSize:k=4,duration:z=200})=>{const N=e.useReducer((()=>({})),{})[1],S=e.useRef(null),C=e.useRef(null),A=e.useRef(null),L=e.useRef(null),Y=e.useRef(null),F=e.useRef(null);let D=!1;const B=e.useRef(null),V=e.useRef(""),q=e.useRef(0),[I,X]=e.useState(0),[H,_]=e.useState(0),P=e.useMemo((()=>e.Children.toArray(M).filter((e=>null!=e))),[M]),W=e.useMemo((()=>{if(P.length>0){const t=P[0];if(e.isValidElement(t))return t.key}}),[P]),G={size:40,className:"",element:e.createElement("div",{className:"arrow"})},J={color:"rgba(0,0,0,0.4)",size:40},K=Object.assign(Object.assign({},G),j),Q="object"==typeof E?Object.assign(Object.assign({},J),E):J,U={background:`linear-gradient(${Q.color}, transparent)`,height:`${Q.size}px`},Z="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,[ee,te,re,ne]=c?[Z[1],Z[2],Z[3],Z[0]]:Z,se=Z[1]+Z[3],le=ee+re,[oe,ce]=e.useMemo((()=>"number"==typeof i?[i,i]:c?[i?i[1]:0,i?i[0]:0]:[0,0]),[i,c]),ie=e.useMemo((()=>"string"==typeof m?[m]:m),[m]),ae=e.useMemo((()=>o||(c?[l?l[0]:null,l?l[1]-se:null]:[l?l[0]-se:null,null])),[o,l,se,c]),ue=ae?c?ae[0]:ae[1]:null,me=ae?c?ae[1]:ae[0]:null,ge=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,[pe,de]=ge&&f?c?[ge[3],ge[1]]:[ge[2],ge[0]]:[0,0],fe=e.useCallback((e=>ie.includes(e)),[ie]),he=e.useMemo((()=>{const[e,t]=l||ae;return fe("arrows")&&K.size?c?[e?e-2*K.size:e,t,e,t]:[e,t?t-2*K.size:t,e,t]:[e,t,e,t]}),[l,ae,c,j]),be=ae?e.useMemo((()=>{if(!he[0]||!he[1])return 1;const e=c?Math.floor((he[1]-se)/(ae[1]?ae[1]+oe:he[1]+oe)):Math.floor((he[0]-se)/(ae[0]?ae[0]+oe:he[0]+oe));return e>P.length?P.length:e<1?1:e}),[]):P.length,ve=c?he[0]||0:he[1]||0,xe=e.useMemo((()=>{if(!x||be<=1)return[];const e=P.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:be},(()=>[]));return e.forEach((e=>{t[e%be].push(e)})),t}),[M,be,x]),$e=e.useMemo((()=>be>1?Math.ceil(P.length/be):P.length),[P.length,be]),ye=e.useMemo((()=>(me||0)*be+(be-1)*ce),[me,be,ce]),Ee=e.useMemo((()=>o?(ue||0)*$e+($e-1)*oe:H),[ue,$e,oe,H]),we=e.useMemo((()=>Ee+le),[Ee,le]),Me=e.useMemo((()=>"visible"===g||"hover"===g?0===Ee?0:ve?Math.round(ve/we*ve):0:0),[ve,we,g]),Oe=e.useMemo((()=>ve?we-ve:we),[we,ve]),Te=e.useMemo((()=>{if(v)return"number"==typeof v?v:"end"===v&&we>ve?Oe:0}),[v,we,Oe]),je=e.useMemo((()=>he[0]&&he[1]?he[0]/2-he[1]/2:0),[he]),Re=e.useMemo((()=>{let e=[],t=0;if(x&&$){const r=Array.from({length:P.length},((e,t)=>t)),n=Math.abs(Math.floor(P.length/be)*be-P.length);e=n?r.slice(-n):[],t=((me||0)+ce)*(be-n)/2}return P.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,xe),l=function(e){return 0!==e?((ue||0)+oe)*e+ee:ee}(x?be>1?s[1]:n:0),o=x&&ae[1]?l+ae[1]:0,i=x&&me&&be>1?me*s[0]+ce*s[0]+(c?Z[0]:Z[1])+($&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:l,elementBottom:o,left:i}}))}),[M,xe,ae,i,x,be]);D=e.useMemo((()=>{if(!he[0]||!he[1])return!1;if(y&&l)if(c){if(he[0]>we)return!0}else if(he[1]>we)return!0;return!1}),[c,he,ae,i,we]);const ke=e.useCallback((e=>{const t=c?he[0]:he[1];if(!t)return null;return(e?Math.ceil:Math.floor)(Ee/t)}),[c,he,Ee]),ze=e.useCallback(((e,t)=>{const r=A.current,n=L.current;if(!r||!n)return;const s=r.scrollTop,l=n.clientHeight,o=ke(!0),c=e=>Fe(e,(()=>{}));"first"===e&&s>0&&c(s<=ve?0:s-ve),"last"===e&&o&&s+ve!==l&&c(s+ve>=ve*o?l:s+ve)}),[A,L,ke]),Ne=e.useCallback((()=>{var e;if(!E)return;const t=(null===(e=A.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+ve)!==we;if(C.current&&(C.current.classList.toggle("edgeLast",r),C.current.classList.toggle("edgeFirst",t>1),fe("arrows")&&(C.current.classList.toggle("l_ArrOff",!r),C.current.classList.toggle("f_ArrOff",t<=1)),Y.current)){function n(){var e;const r=null===(e=Y.current)||void 0===e?void 0:e.querySelectorAll(".sliderElem");r&&r.forEach(((e,r)=>{const n=t>=ve*r&&t<ve*(r+1);e.classList.toggle("active",n)}))}n()}}),[E,ve,we]),Se=e.useCallback((()=>{if(A.current&&0!==Me&&("visible"===g||"hover"===g)){const e=Math.abs(Math.round(A.current.scrollTop/Oe*(ve-Me)));e===I||p||X(e),0===A.current.scrollTop&&"none"===V.current&&(A.current.scrollTop=1),A.current.scrollTop>Oe&&(A.current.scrollTop=Oe),O&&O.forEach((([e,t])=>{A.current&&e(A.current.scrollTop)&&t()}))}Ne()}),[ve,Me,I]),Ce=e.useCallback((e=>{const t=A.current,r=ke();if(t&&r){if(["thumb","wrapp"].includes(V.current)){const n="thumb"===V.current?1:-1;t.scrollTop+=(c?e.movementX:e.movementY)*r*n}if("slider"===V.current){const r=L.current;if(!r)return;const n=r.clientHeight,s=e=>Fe(e,(()=>{q.current=0,N()})),l=e=>{const r=t.scrollTop+e*ve;s(e>0?Math.min(r,n-ve):Math.max(r,0))};e.movementY>0&&q.current<R?(q.current+=e.movementY,q.current>=R&&t.scrollTop+ve!=n&&l(1)):e.movementY<0&&q.current>-R&&(q.current-=Math.abs(e.movementY),q.current<=-R&&0!=t.scrollTop&&l(-1))}}}),[c,A,ke]),Ae=e.useCallback((()=>{const e=F.current;e&&(e.classList.remove("grabbingElement"),window.removeEventListener("mousemove",Ce),window.removeEventListener("mouseup",Ae),document.body.style.removeProperty("cursor"),V.current="",N())}),[Ce,S]),Le=e.useCallback(((e,t,r)=>{r&&(F.current=r,V.current=t,N(),("hover"===g||"visible"===g)&&r.classList.add("grabbingElement"),window.addEventListener("mousemove",Ce),window.addEventListener("mouseup",Ae),document.body.style.cursor="grabbing")}),[Ce,Ae,S]),Ye=e.useCallback(((e,t)=>{_(t-le)}),[c,le,Ee]),Fe=e.useCallback(((e,t)=>{const r=A.current;if(!r)return;const n=r.scrollTop,s=performance.now(),l=o=>{const c=o-s,i=Math.min(c/z,1);(e||0===e)&&(r.scrollTop=n+(e-n)*i),c<z?requestAnimationFrame(l):t()};requestAnimationFrame(l)}),[A.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"),x&&d&&u&&e("lazyRender","infiniteScroll",!0),"hidden"===g&&(u&&e("progressReverse","progressVisibility `hidden`",!0),fe("progressElement")&&e("progressTrigger [`scrollThumb`]","progressVisibility `hidden`",!0),fe("arrows")&&e("progressTrigger [`arrows`]","progressVisibility `hidden`",!0)),!fe("arrows")&&j&&u&&e("arrows","progressTrigger [`arrows`]"),!h&&b&&u&&e("fallback","suspending"),x&&N(),Ne()}),[]),e.useEffect((()=>{if(v&&A.current&&P.length>0&&"end"===v){let e;const t=()=>{B.current=W};return null===B.current?e=requestAnimationFrame((()=>Fe(null!=Te?Te:0,t))):B.current!==W?Fe(NaN,t):B.current===W&&(e=requestAnimationFrame((()=>Fe(null!=Te?Te:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[Ee]);const De=e.createElement("div",{className:"objectsWrapper",ref:L,onMouseDown:e=>fe("content")&&Le(e,"wrapp",L.current),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${ee}px ${te}px ${re}px ${ne}px`},i&&{gap:`${oe}px ${ce}px`}),$&&!x&&{justifyContent:"center"}),ye&&{width:`${ye}px`}),o&&Ee&&{position:"absolute",height:`${Ee}px`}),w&&{minHeight:`calc(${w}px - ${le}px)`})},P.map(((t,r)=>{var n,l;const o=t.key,i={scrollElementRef:A,xyObjectReverse:me,xyObject:ue,rootMargin:f,suspending:h,fallback:b,mRootLocal:ge,localObjectXY:ae};if(!x||!A.current)return e.createElement(s,Object.assign({key:o},i,{lazyRender:d}),t);{const{elementTop:a,elementBottom:u,left:m}=Re[r];if((c?null!==(n=he[0])&&void 0!==n?n:0:null!==(l=he[1])&&void 0!==l?l:0)+pe>a-A.current.scrollTop&&u-A.current.scrollTop>0-de)return e.createElement(s,Object.assign({key:o},i,{elementTop:a,left:m,infiniteScroll:x}),t)}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${fe("content")?" draggableContent":""}${"hover"===g?" progressOnHover":""} ${n}`,ref:S,style:{width:`${he[2]}px`,height:`${he[3]}px`}},e.createElement("div",{className:"scrollContent",ref:C,style:Object.assign(Object.assign({width:c?`${he[1]}px`:`${he[0]}px`,height:c?`${he[0]}px`:`${he[1]}px`},c&&{transform:`rotate(-90deg) translate(${je}px, ${je}px) scaleX(-1)`}),fe("arrows")&&K.size&&(c?{left:`${K.size}px`}:{top:`${K.size}px`}))},fe("arrows")&&["first","last"].map((t=>e.createElement("div",{key:t,className:`arrowBox ${t}${K.className?" "+K.className:""}`,style:{height:`${K.size}px`},onClick:()=>ze(t)},K.element))),("visible"===g||"hover"===g)&&Me<ve&&e.createElement(e.Fragment,null,p?e.createElement("div",{className:`sliderBar${u?" progressReverse":""}${fe("progressElement")?" draggable":""}`,ref:Y,onMouseDown:e=>Le(e,"slider",S.current)},Array.from({length:ke()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:`${k}px`}},T)))):e.createElement("div",{className:`scrollBar${u?" progressReverse":""}${fe("progressElement")?" draggable":""}`,style:{width:`${k}px`}},e.createElement("div",{className:"scrollBarThumb"+(T?"":" defaultThumb"),onMouseDown:e=>fe("progressElement")&&Le(e,"thumb",S.current),style:{height:`${Me}px`,top:`${I}px`}},T,e.createElement("div",{className:"clickField"})))),e.createElement("div",{className:"scrollElement",ref:A,onScroll:Se,style:Object.assign(Object.assign({},D&&{alignItems:"center"}),fe("wheel")?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},o?De:e.createElement(r,{onResize:Ye},(()=>De))),E&&e.createElement("div",{className:"edge first",style:U}),E&&e.createElement("div",{className:"edge last",style:U})))},s=e.memo((({children:r,elementTop:n,left:s,mRootLocal:l,scrollElementRef:o,xyObject:c,xyObjectReverse:i,localObjectXY:a,rootMargin:u,suspending:m,fallback:g,infiniteScroll:p,lazyRender:d})=>{const f=m?e.createElement(e.Suspense,{fallback:g},r):r,h=a[0]?{width:`${a[0]}px`}:{},b={width:`${i}px`,height:`${c}px`},v={root:o.current,rootMargin:p?u:l,style:p?Object.assign(Object.assign(Object.assign({},b),{position:"absolute",top:`${n}px`}),null!==s?{left:`${s}px`}:{}):b},x=e.createElement("div",{style:h},f);return p?e.createElement("div",{style:Object.assign(Object.assign({position:"absolute",top:`${n}px`},null!==s?{left:`${s}px`}:{}),b)},x):d?e.createElement(t,Object.assign({},v),x):e.createElement("div",{style:b},x)}));s.displayName="ScrollObject";const l={Scroll:n,ResizeTracker:r,IntersectionTracker:t};exports.IntersectionTracker=t,exports.ResizeTracker=r,exports.Scroll=n,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("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:x=!1,edgeGradient:$,objectsWrapperMinSize:y,children:E,onScrollValue:w,thumbElement:M,arrows:j,elementsAlign:O=!1,contentAlign:T,pixelsForSwipe:R=8,progressBarSize:k=4,duration:z=200})=>{const N=e.useReducer((()=>({})),{})[1],S=e.useRef(null),C=e.useRef(null),A=e.useRef(null),L=e.useRef(null),Y=e.useRef(null),F=e.useRef(null),D=e.useRef(null),B=e.useRef(""),V=e.useRef(0),[q,I]=e.useState(0),[X,H]=e.useState(0),_=e.useMemo((()=>e.Children.toArray(E).filter((e=>null!=e))),[E]),P=e.useMemo((()=>{if(_.length>0){const t=_[0];if(e.isValidElement(t))return t.key}}),[_]),W={size:40,className:"",element:e.createElement("div",{className:"arrow"})},G={color:"rgba(0,0,0,0.4)",size:40},J=e.useMemo((()=>Object.assign(Object.assign({},W),j)),[j]),K="object"==typeof $?Object.assign(Object.assign({},G),$):G,Q={background:`linear-gradient(${K.color}, transparent)`,height:`${K.size}px`},U="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,[Z,ee,te,re]=c?[U[1],U[2],U[3],U[0]]:U,ne=U[1]+U[3],se=Z+te,le=re+ee,[oe,ce]=e.useMemo((()=>{var e,t;return"number"==typeof i?[i,i]:c?[null!==(e=null==i?void 0:i[1])&&void 0!==e?e:0,null!==(t=null==i?void 0:i[0])&&void 0!==t?t:0]:[0,0]}),[i,c]),ie=e.useMemo((()=>{var e;return o||(c?[null!==(e=null==l?void 0:l[0])&&void 0!==e?e:null,l?l[1]-ne:null]:[l?l[0]-ne:null,null])}),[o,l,ne,c]),ae=ie?c?ie[0]:ie[1]:null,ue=ie?c?ie[1]:ie[0]:null,me=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,[ge,pe]=me&&f?c?[me[3],me[1]]:[me[2],me[0]]:[0,0],de=e.useCallback((e=>m.includes(e)),[m]),fe=e.useMemo((()=>{const[e,t]=l||ie;return de("arrows")&&J.size?c?[e?e-2*J.size:e,t,e,t]:[e,t?t-2*J.size:t,e,t]:[e,t,e,t]}),[l,ie,c,j]),he=c?fe[0]||0:fe[1]||0,be=e.useMemo((()=>{if(!ie)return _.length;if(!fe[0]||!fe[1])return 1;const[e,t]=fe,[r,n]=ie,s=c?n?n+oe:t+oe:r?r+oe:e+oe,l=c?t-ne:e-ne,o=Math.floor(l/s);return Math.max(1,Math.min(o,_.length))}),[ie,fe,c,oe,ne]),ve=e.useMemo((()=>{if(!x||be<=1)return[];const e=_.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:be},(()=>[]));return e.forEach((e=>{t[e%be].push(e)})),t}),[E,be,x]),xe=e.useMemo((()=>be>1?Math.ceil(_.length/be):_.length),[_.length,be]),$e=e.useMemo((()=>(ue||0)*be+(be-1)*ce),[ue,be,ce]),ye=e.useMemo((()=>o?(null!=ae?ae:0)*xe+(xe-1)*oe:X),[ae,xe,oe,X]),Ee=e.useMemo((()=>ye+se),[ye,se]),we=e.useMemo((()=>$e+le),[$e,le]),Me=e.useMemo((()=>"visible"===g||"hover"===g?0===ye?0:he?Math.round(he/Ee*he):0:0),[he,Ee,g]),je=e.useMemo((()=>he?Ee-he:Ee),[Ee,he]),Oe=e.useMemo((()=>{if(v)return"number"==typeof v?v:"end"===v&&Ee>he?je:0}),[v,Ee,je]),Te=e.useMemo((()=>fe[0]&&fe[1]?fe[0]/2-fe[1]/2:0),[fe]),Re=e.useMemo((()=>{let e=[],t=0;if(x&&O){const r=Array.from({length:_.length},((e,t)=>t)),n=Math.abs(Math.floor(_.length/be)*be-_.length);e=n?r.slice(-n):[],"center"===O?t=((null!=ue?ue:0)+ce)*(be-n)/2:"end"===O&&(t=((null!=ue?ue:0)+ce)*(be-n))}return _.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,ve),l=function(e){return 0!==e?((null!=ae?ae:0)+oe)*e+Z:Z}(x?be>1?s[1]:n:0),o=x&&ie[1]?l+ie[1]:0,i=x&&ue&&be>1?ue*s[0]+ce*s[0]+(c?U[0]:U[1])+(O&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:l,elementBottom:o,left:i}}))}),[E,ve,ie,i,x,be]),ke=e.useMemo((()=>{var e,t;if(!T)return{};const[r,n="start"]=T,s="start"===r?"flex-start":"center"===r?"center":"flex-end",l="start"===n?"flex-start":"center"===n?"center":"flex-end",o=null!==(e=fe[0])&&void 0!==e?e:0,i=null!==(t=fe[1])&&void 0!==t?t:0,a=c?o>Ee:i>Ee,u={};return(c?i>we:o>we)&&(u.justifyContent=c?l:s),a&&(u.alignItems=c?s:l),u}),[T,c,fe,Ee,we]),ze=e.useCallback((e=>{const t=c?fe[0]:fe[1];if(!t)return null;return(e?Math.ceil:Math.floor)(ye/t)}),[c,fe,ye]),Ne=e.useCallback((e=>{const t=A.current,r=L.current;if(!t||!r)return;const n=t.scrollTop,s=r.clientHeight,l=ze(!0),o=e=>De(e,(()=>{}));"first"===e&&n>0&&o(n<=he?0:n-he),"last"===e&&l&&n+he!==s&&o(n+he>=he*l?s:n+he)}),[A,L,ze]),Se=e.useCallback((()=>{var e;if(!$)return;const t=(null===(e=A.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+he)!==Ee;if(C.current&&(C.current.classList.toggle("edgeLast",r),C.current.classList.toggle("edgeFirst",t>1),de("arrows")&&(C.current.classList.toggle("l_ArrOff",!r),C.current.classList.toggle("f_ArrOff",t<=1)),Y.current)){function n(){var e;const r=null===(e=Y.current)||void 0===e?void 0:e.querySelectorAll(".sliderElem");r&&r.forEach(((e,r)=>{const n=t>=he*r&&t<he*(r+1);e.classList.toggle("active",n)}))}n()}}),[$,he,Ee]),Ce=e.useCallback((()=>{if(A.current&&0!==Me&&("visible"===g||"hover"===g)){const e=Math.abs(Math.round(A.current.scrollTop/je*(he-Me)));e===q||p||I(e),0===A.current.scrollTop&&"none"===B.current&&(A.current.scrollTop=1),A.current.scrollTop>je&&(A.current.scrollTop=je),w&&w.forEach((([e,t])=>{A.current&&e(A.current.scrollTop)&&t()}))}Se()}),[he,Me,q]),Ae=e.useCallback((e=>{const t=A.current,r=ze();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=>De(e,(()=>{V.current=0,N()})),l=e=>{const r=t.scrollTop+e*he;s(e>0?Math.min(r,n-he):Math.max(r,0))};e.movementY>0&&V.current<R?(V.current+=e.movementY,V.current>=R&&t.scrollTop+he!=n&&l(1)):e.movementY<0&&V.current>-R&&(V.current-=Math.abs(e.movementY),V.current<=-R&&0!=t.scrollTop&&l(-1))}}}),[c,A,ze]),Le=e.useCallback((()=>{const e=F.current;e&&(e.classList.remove("grabbingElement"),window.removeEventListener("mousemove",Ae),window.removeEventListener("mouseup",Le),document.body.style.removeProperty("cursor"),B.current="",N())}),[Ae,S]),Ye=e.useCallback(((e,t,r)=>{r&&(F.current=r,B.current=t,N(),("hover"===g||"visible"===g)&&r.classList.add("grabbingElement"),window.addEventListener("mousemove",Ae),window.addEventListener("mouseup",Le),document.body.style.cursor="grabbing")}),[Ae,Le,S]),Fe=e.useCallback(((e,t)=>{H(t-se)}),[c,se,ye]),De=e.useCallback(((e,t)=>{const r=A.current;if(!r)return;const n=r.scrollTop,s=performance.now(),l=o=>{const c=o-s,i=Math.min(c/z,1);(e||0===e)&&(r.scrollTop=n+(e-n)*i),c<z?requestAnimationFrame(l):t()};requestAnimationFrame(l)}),[A.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"),x&&d&&u&&e("lazyRender","infiniteScroll",!0),"hidden"===g&&(u&&e("progressReverse","progressVisibility `hidden`",!0),de("progressElement")&&e("progressTrigger [`scrollThumb`]","progressVisibility `hidden`",!0),de("arrows")&&e("progressTrigger [`arrows`]","progressVisibility `hidden`",!0)),!de("arrows")&&j&&u&&e("arrows","progressTrigger [`arrows`]"),!h&&b&&u&&e("fallback","suspending"),x&&N(),Se()}),[]),e.useEffect((()=>{if(v&&A.current&&_.length>0&&"end"===v){let e;const t=()=>{D.current=P};return null===D.current?e=requestAnimationFrame((()=>De(null!=Oe?Oe:0,t))):D.current!==P?De(NaN,t):D.current===P&&(e=requestAnimationFrame((()=>De(null!=Oe?Oe:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[ye]);const Be=e.createElement("div",{className:"objectsWrapper",ref:L,onMouseDown:e=>de("content")&&Ye(e,"wrapp",L.current),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${Z}px ${ee}px ${te}px ${re}px`},i&&{gap:`${oe}px ${ce}px`}),O&&!x&&{justifyContent:"start"===O?"flex-start":"center"===O?"center":"flex-end"}),$e&&{width:`${$e}px`}),o&&ye&&{position:"absolute",height:`${ye}px`}),y&&{minHeight:`calc(${y}px - ${se}px)`})},_.map(((t,r)=>{var n,l;const o=t.key,i={scrollElementRef:A,xyObjectReverse:ue,xyObject:ae,rootMargin:f,suspending:h,fallback:b,mRootLocal:me,localObjectXY:ie};if(!x||!A.current)return e.createElement(s,Object.assign({key:o},i,{lazyRender:d}),t);{const{elementTop:a,elementBottom:u,left:m}=Re[r];if((c?null!==(n=fe[0])&&void 0!==n?n:0:null!==(l=fe[1])&&void 0!==l?l:0)+ge>a-A.current.scrollTop&&u-A.current.scrollTop>0-pe)return e.createElement(s,Object.assign({key:o},i,{elementTop:a,left:m,infiniteScroll:x}),t)}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${de("content")?" draggableContent":""}${"hover"===g?" progressOnHover":""} ${n}`,ref:S,style:{width:`${fe[2]}px`,height:`${fe[3]}px`}},e.createElement("div",{className:"scrollContent",ref:C,style:Object.assign(Object.assign({width:c?`${fe[1]}px`:`${fe[0]}px`,height:c?`${fe[0]}px`:`${fe[1]}px`},c&&{transform:`rotate(-90deg) translate(${Te}px, ${Te}px) scaleX(-1)`}),de("arrows")&&J.size&&(c?{left:`${J.size}px`}:{top:`${J.size}px`}))},de("arrows")&&["first","last"].map((t=>e.createElement("div",{key:t,className:`arrowBox ${t}${J.className?" "+J.className:""}`,style:{height:`${J.size}px`},onClick:()=>Ne(t)},J.element))),("visible"===g||"hover"===g)&&Me<he&&e.createElement(e.Fragment,null,p?e.createElement("div",{className:`sliderBar${u?" progressReverse":""}${de("progressElement")?" draggable":""}`,ref:Y,onMouseDown:e=>Ye(e,"slider",S.current)},Array.from({length:ze()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:`${k}px`}},M)))):e.createElement("div",{className:`scrollBar${u?" progressReverse":""}${de("progressElement")?" draggable":""}`,style:{width:`${k}px`}},e.createElement("div",{className:"scrollBarThumb"+(M?"":" defaultThumb"),onMouseDown:e=>de("progressElement")&&Ye(e,"thumb",S.current),style:{height:`${Me}px`,top:`${q}px`}},M,e.createElement("div",{className:"clickField"})))),e.createElement("div",{className:"scrollElement",ref:A,onScroll:Ce,style:Object.assign(Object.assign({},ke),de("wheel")?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},o?Be:e.createElement(r,{onResize:Fe},(()=>Be))),$&&e.createElement("div",{className:"edge first",style:Q}),$&&e.createElement("div",{className:"edge last",style:Q})))},s=e.memo((({children:r,elementTop:n,left:s,mRootLocal:l,scrollElementRef:o,xyObject:c,xyObjectReverse:i,localObjectXY:a,rootMargin:u,suspending:m,fallback:g,infiniteScroll:p,lazyRender:d})=>{const f=m?e.createElement(e.Suspense,{fallback:g},r):r,h=a[0]?{width:`${a[0]}px`}:{},b={width:`${i}px`,height:`${c}px`},v={root:o.current,rootMargin:p?u:l,style:p?Object.assign(Object.assign(Object.assign({},b),{position:"absolute",top:`${n}px`}),null!==s?{left:`${s}px`}:{}):b},x=e.createElement("div",{style:h},f);return p?e.createElement("div",{style:Object.assign(Object.assign({position:"absolute",top:`${n}px`},null!==s?{left:`${s}px`}:{}),b)},x):d?e.createElement(t,Object.assign({},v),x):e.createElement("div",{style:b},x)}));s.displayName="ScrollObject";const l={Scroll:n,ResizeTracker:r,IntersectionTracker:t};exports.IntersectionTracker=t,exports.ResizeTracker=r,exports.Scroll=n,exports.default=l;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "This is a library for the convenience of various object scrolling methods 💫",
   "author": "Georg Schilin",
   "license": "MIT",
@@ -14,6 +14,6 @@
     "scroller"
   ],
   "peerDependencies": {
-    "react": "^16.9.0"
+    "react": ">=16.0.0"
   }
 }