UNPKG

@past3lle/carousel-hooks

Version:

PASTELLE carousel animation hooks built on top of @usegesture and react-springs

3 lines (2 loc) 7.61 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@react-spring/web"),n=require("@use-gesture/react"),i=(e=require("lodash.clamp"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("react"),s=require("@past3lle/hooks"),a=require("@past3lle/utils");function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(null,arguments)}function l(e,t){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(t.includes(i))continue;n[i]=e[i]}return n}var o=["dataLength","itemSize","axis","dAxis","visible","prevRef"],c=function(e,t){return(e<0?e+t:e)%t},f=function(e,t,n,i){return c(e-t+n,i)};function d(e,t,n){var i=n.dataLength,r=n.itemSize,s=n.axis,a=n.dAxis,d=n.visible,v=n.prevRef,g=l(n,o),S=Math.floor(s/r)%i,x=c(S,i),m=a<0?i-d-1:1;e.start((function(e){return function(e,t,n){var i,r=n.prevRef,s=n.active,a=n.last,u=n.axis,l=n.dAxis,o=n.mAxis,c=n.firstVis,d=n.firstVisIdx,v=n.scaleOptions,g=n.snapOnScroll,S=n.config,x=n.dataLength,m=n.itemSize,p=n.setCurrentIndex,h=f(e,c,d,x),z=f(e,r.current[0],r.current[1],x),b=c-(u<0?x:0)+h-d,y=o&&null!=v&&v.scaleOnScroll&&s?Math.max(1-Math.abs(o)/m/2,v.scaleOnScroll):v.initialScale,O=-u%(m*x)+m*b,R=a&&function(e,t){var n,i,r,s=function(e,t){var n=t*Math.ceil(e/t);return[n-t,n]}(e,t);return n=e,i=s[0],r=s[1],Math.abs(r-n)>=Math.abs(i-n)?i:r}(O,m);0===R&&p(e);var I=l>0?h:x-h,k=l<0?z>h:z<h;return(i={})[t]=!s&&g?R||void 0:O,i.scale=y,i.immediate=k,i.config="function"==typeof S?S({configPos:I,length:x}):S,i}(e,t,u({axis:s,dAxis:a,firstVis:x,firstVisIdx:m,itemSize:r,dataLength:i,prevRef:v},g))})),v.current=[x,m]}var v=function(e,t){var n=e[1],r=t.axis,s=t.indexOptions,a=t.itemSize;return function(e){var t=e.active,u=e.cancel,l="x"===r?0:1,o=[e.movement[l],e.direction[l]],c=o[0],f=o[1];if(f){var d=s.current,v=s.last,g=s.setIndex,S=[d.current-1>0?d.current-1:0,d.current+1<v?d.current+1:v];if(t&&Math.abs(c)>a/10){var x=i.apply(void 0,[d.current+-f].concat(S));d.current=x,null==u||u(),null==g||g(x)}n.start((function(e){var n;return e<d.current-1||e>d.current+1?{display:"none"}:((n={})[r]=(e-d.current)*a+(t?c:0),n.display="block",n)}))}}},g=function(e,t){var n=e[0],i=e[1],r=t.ref;return function(e){var t=e.args[0],s=e.origin,a=s[0],u=s[1],l=e.movement[0],o=e.offset[0],c=e.memo;if(e.first){c={};var f=null==r?void 0:r.getBoundingClientRect(),d=a-(a+((null==f?void 0:f.width)||0)/2),v=u-(u+((null==f?void 0:f.height)||0)/2);c[t.toString()]=[n[t].x.get(),n[t].y.get(),d,v]}var g=c[t.toString()][0]-(l-1)*c[t.toString()][2],S=c[t.toString()][1]-(l-1)*c[t.toString()][3];return i.start((function(){return{scale:o,x:g,y:S}})),c}};function S(e,t,n){0===(null==t?void 0:t.minSize)&&a.devWarn("[ScrollRef] Setup warning! Size 0 (ZERO) minSize passed. This could cause layout issues! Check the options object passed to your useScroll animation hooks.");var i=s.useWindowSize(null==n?void 0:n.windowSizeOptions),u=s.useStateRef(null,(function(e){return e})),l=u[0],o=u[1],c="y"===e,f=s.useStateRef(0,(function(e){return c?null==e?void 0:e.clientHeight:null==e?void 0:e.clientWidth})),d=f[0],v=f[1],g=(null==t?void 0:t.fixedSize)||(null==t?void 0:t.minSize)&&Math.min(t.minSize,d)||d;return r.useEffect((function(){var e=function(e){return e.preventDefault()};return null==l||l.addEventListener("gesturestart",e),null==l||l.addEventListener("gesturechange",e),null==l||l.addEventListener("gestureend",e),function(){null==l||l.removeEventListener("gesturestart",e),null==l||l.removeEventListener("gesturechange",e),null==l||l.removeEventListener("gestureend",e)}}),[l]),r.useEffect((function(){null!=t&&t.fixedSize||!(c?null==l?void 0:l.clientHeight:null==l?void 0:l.clientWidth)||v(l)}),[t,v,i,l,e,c]),{refs:{scrollingZoneTarget:l,itemSize:g},refCallbacks:{setScrollingZoneRef:o,setItemSizeRef:v}}}function x(e,t,n){var i=r.useState(!1),s=i[0],a=i[1],l=r.useRef([0,1]),o=r.useState(l.current[0]),c=o[0],f=o[1],d=S(e,t.sizeOptions,n),v=d.refs,g=v.itemSize,x=v.scrollingZoneTarget,m=d.refCallbacks,p=m.setItemSizeRef,h=m.setScrollingZoneRef;return{gestureParams:r.useMemo((function(){return u({},t,{prevRef:l,itemSize:g,setCurrentIndex:f})}),[g,t]),currentIndex:c,firstAnimationOver:s,scrollingZoneTarget:x,callbacks:{setFirstPaintOver:a,setScrollingZoneRef:h,setItemSizeRef:p}}}var m=["setFirstPaintOver"],p={tension:260,friction:50},h=["setFirstPaintOver"];function z(e,i,s,a){var l=S(e,null==s?void 0:s.sizeOptions,a),o=l.refs.itemSize,c=l.refCallbacks,f=r.useRef(0),d=r.useState(f.current),g=d[0],x=d[1],m=t.useSprings(i.length,(function(t){var n;return u({},null==s?void 0:s.styleMixin,((n={})[e]=t*o,n.display="block",n))}),[o]),p=m[0];return{bind:n.useDrag(v([,m[1]],{axis:e,indexOptions:{current:f,setIndex:x,last:i.length-1},itemSize:o}),{axis:e}),springs:p,state:{currentIndex:g,itemSize:o},refCallbacks:c}}exports.useInfiniteHorizontalScroll=function(e,i){var r=x("x",i),s=r.gestureParams,a=r.currentIndex,o=r.firstAnimationOver,c=r.scrollingZoneTarget,f=r.callbacks,v=f.setFirstPaintOver,g=l(f,m),S=t.useSprings(e.length,(function(t){return u({},null==i?void 0:i.styleMixin,{x:(t<e.length-1?t:-1)*s.itemSize,onRest:function(){if(!o)return v(!0)},from:{x:t*s.itemSize},config:{tension:260,friction:50}})})),p=S[0],h=S[1];return{target:c,bind:n.useDrag((function(t){d(h,"x",u({},s,{dataLength:e.length,axis:-t.offset[0]/(i.scrollSpeed||.5),dAxis:-t.direction[0],active:!(!t.active&&!t.dragging),config:i.config}))}),{eventOptions:{passive:!0,capture:!1,once:!0},preventDefault:!0,axis:"x",filterTaps:!0}),springs:p,state:{currentIndex:a,itemSize:s.itemSize,firstAnimationOver:o},refCallbacks:g}},exports.useInfiniteVerticalScroll=function(e,i){var a=s.useIsMobile(),o=x("y",i),c=o.gestureParams,f=o.currentIndex,g=o.firstAnimationOver,S=o.callbacks,m=S.setFirstPaintOver,z=l(S,h),b=e.length-1,y=r.useCallback((function(e){return u({},null==i?void 0:i.styleMixin,{scale:i.scaleOptions.initialScale||.92,y:(e<b?e:-1)*c.itemSize,onRest:function(){g||m(!0)},config:p})}),[b,c.itemSize,g]),O=t.useSprings(e.length,y,[c.itemSize]),R=r.useRef(0),I=r.useRef(0),k=r.useRef(0);return{bind:n.useGesture({onDrag:v(O,{axis:"y",itemSize:c.itemSize,indexOptions:{current:k,setIndex:void 0,last:b}}),onWheel:function(t){var n=t.active,i=t.last,r=t.offset[1],s=t.movement[1],a=t.direction[1];a&&(R.current=r,d(O[1],"y",u({},c,{dataLength:e.length,active:n,axis:I.current+r/3.2,dAxis:a,mAxis:s,last:i})))}},{drag:{axis:"y",preventScrollAxis:"x"}}),springs:O[0],state:{currentIndex:a?0:f,itemSize:c.itemSize,firstAnimationOver:g},refCallbacks:z}},exports.useLimitedHorizontalSwipe=function(e,t,n){return z("x",e,t,n)},exports.useLimitedVerticalSwipe=function(e,t,n){return z("y",e,t,n)},exports.usePinchZoomAndDrag=function(e,i,r){var s=S("x",null==i?void 0:i.sizeOptions,r),a=s.refs,l=a.itemSize,o=a.scrollingZoneTarget,c=s.refCallbacks,f=t.useSprings(e.length,(function(e){return u({},null==i?void 0:i.styleMixin,{x:e*l,y:0,scale:1,display:"block"})}),[e.length]),d=f[0],v=f[1];return{bind:n.useGesture({onDrag:function(e){var t=e.offset,n=t[0],i=t[1];if(e.pinching)return(0,e.cancel)();v.start({x:n,y:i})},onPinch:g([d,v],{ref:o})},{drag:{from:function(){return[d[0].x.get(),d[0].y.get()]},bound:null==o?void 0:o.getBoundingClientRect()},pinch:{scaleBounds:{min:.8,max:3},rubberband:!0}}),springs:d,state:{currentIndex:0,itemSize:l},refCallbacks:c}},exports.useScrollZoneRef=S,exports.useScrollingAnimationSetup=x; //# sourceMappingURL=carousel-hooks.cjs.production.min.js.map