@crowdlinker/react-native-pager
Version:
simple pager component for react-native
3 lines (2 loc) • 8.12 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t,n=require("react"),r=e(n),i=require("react-native"),a=e(require("react-native-reanimated")),o=require("react-native-gesture-handler");function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}(t=exports.Extrapolate||(exports.Extrapolate={})).EXTEND="extend",t.CLAMP="clamp",t.IDENTITY="identity";var c=a.event,s=a.block,d=a.Value,v=a.divide,f=a.cond,h=a.eq,p=a.add,m=a.stopClock,x=a.Clock,g=a.set,y=a.clockRunning,w=a.multiply,E=a.sub,I=a.call,C=a.max,b=a.min,V=a.greaterThan,P=a.abs,S=a.ceil,O=a.interpolate,j=a.concat,k=a.neq,D=a.and,T=a.startClock,q=a.spring;function A(e){var t,n,o=e.children,c=e.index,s=e.minimum,d=e.maximum,v=e.dimension,f=e.targetTransform,h=e.targetDimension,p=e.pageInterpolation,m=e.animatedIndex,x=J(w(c,v)),g=J(b(C(x,s),d)),y=J(((n={})[h]=v,n.transform=[(t={},t[f]=g,t)],n)),I=J(E(c,m)),V=J(B(I,p)),P=V.zIndex,S=l(V,["zIndex"]);return P||(P=0),r.createElement(a.View,{style:u({},i.StyleSheet.absoluteFillObject,{},y,{zIndex:P})},r.createElement(a.View,{style:[i.StyleSheet.absoluteFillObject,S]},o))}function z(e,t){void 0===t&&(t=0);var r=J(new d(void 0!==e?e:t));return n.useEffect(function(){void 0!==e&&r.setValue(e)},[e]),r}var F=n.createContext(void 0);function L(){var e=n.useContext(F);if(void 0===e)throw new Error("usePager() must be used within a <PagerProvider />");return e}var M=r.createContext(!1);function N(e){return r.createElement(M.Provider,{value:e.focused},e.children)}function X(){return n.useContext(M)}var R=r.createContext(void 0);function Y(e){return r.createElement(R.Provider,{value:e.index},e.children)}function G(){var e=n.useContext(R);if(void 0===e)throw new Error("useIndex() must be used within an <IndexProvider />");return e}function H(){return L()[2]}function W(e){var t=H();return J(E(e,t))}function B(e,t){return t?Object.keys(t).reduce(function(n,r){var i=t[r];if(Array.isArray(i)){var a=i.map(function(t){return B(e,t)});return n[r]=a,n}if("object"==typeof i){var o,u=l(i,["unit"]);return o=i.unit?j(O(e,u),i.unit):O(e,i),n[r]=o,n}if("function"==typeof i){var c=i(e);return n[r]=c,n}return n},{}):{}}function J(e){return r.useRef(e).current}var K={stiffness:1e3,damping:500,mass:3,overshootClamping:!1,restDisplacementThreshold:.01,restSpeedThreshold:.01};function Q(e,t,n,r){var i={finished:new d(0),velocity:new d(0),position:t,time:new d(0)},a=u({},K,{},r,{toValue:new d(0)});return s([f(y(e),[f(k(a.toValue,n),[g(i.finished,0),g(a.toValue,n)])],[g(i.finished,0),g(i.time,0),g(i.velocity,0),g(a.toValue,n),T(e)]),q(e,i,a),f(i.finished,[m(e),g(i.position,t)]),i.position])}var U=a.interpolate,Z=a.concat;function $(e,t){return t?Object.keys(t).reduce(function(n,r){var i=t[r];if(Array.isArray(i)){var a=i.map(function(t){return $(e,t)});return n[r]=a,n}if("object"==typeof i){var o,u=l(i,["unit"]);return o=i.unit?Z(U(e,u),i.unit):U(e,i),n[r]=o,n}if("function"==typeof i){var c=i(e);return n[r]=c,n}return n},{}):{}}function _(e){return n.useRef(e).current}var ee=a.Value,te=a.divide,ne=a.multiply,re=a.add,ie={height:50,width:"100%",flexDirection:"row"};function ae(e){var t=e.children,n=e.pageInterpolation,i=e.style,o=_($(W(e.index),n));return r.createElement(a.View,{style:[i||{flex:1},o]},t)}var oe={height:2,backgroundColor:"aquamarine"};exports.FocusProvider=N,exports.IndexProvider=Y,exports.Pager=function(e){var t,i,u=e.activeIndex,l=e.onChange,O=e.initialIndex,j=void 0===O?0:O,k=e.children,T=e.springConfig,q=e.panProps,L=void 0===q?{}:q,M=e.pageSize,X=void 0===M?1:M,R=e.threshold,G=void 0===R?.1:R,H=e.minIndex,W=void 0===H?0:H,B=e.maxIndex,K=e.adjacentChildOffset,U=void 0===K?10:K,Z=e.style,$=e.containerStyle,_=e.type,ee=void 0===_?"horizontal":_,te=e.pageInterpolation,ne=e.clamp,re=void 0===ne?{}:ne,ie=e.clampDrag,ae=void 0===ie?{}:ie,oe=e.animatedValue,ue=n.useContext(F),le=void 0!==u,ce=n.useState(j),se=ce[1],de=le?u:ue?ue[0]:ce[0],ve=n.Children.count(k),fe=void 0===B?Math.ceil((ve-1)/X):B,he=le?l:ue?ue[1]:se,pe=J(new d(0)),me=J(new d(0)),xe=J(new d(0)),ge=J(c([{nativeEvent:{translationX:pe,translationY:me}}],{useNativeDriver:!0})),ye=J(c([{nativeEvent:{state:xe}}],{useNativeDriver:!0})),we=-1;Z&&Z.width&&"number"==typeof Z.width&&(we=Z.width);var Ee=-1;Z&&Z.height&&"number"==typeof Z.height&&(Ee=Z.height);var Ie=n.useState(we),Ce=Ie[0],be=Ie[1],Ve=n.useState(Ee),Pe=Ve[0],Se=Ve[1],Oe=J(new d(0)),je="vertical"===ee?"height":"width",ke="vertical"===ee?"translateY":"translateX",De="vertical"===ee?me:pe,Te="vertical"===ee?Pe:Ce,qe=w(Oe,ve),Ae="vertical"===ee?1:2,ze=z(G),Fe=z(ae.prev,1e9),Le=z(ae.next,1e9),Me=z(fe),Ne=z(W),Xe=J(new d(de)),Re=oe||(ue?ue[2]:Xe),Ye=J(new d(0)),Ge=J(new d(0)),He=J(new d(de)),We=J(new d(de)),Be=J(E(We,Re)),Je=J(P(Be)),Ke=J(V(Je,ze)),Qe=J(new d(0)),Ue=J(b(C(v(De,Oe),w(Le,-1)),Fe)),Ze=J(new x);n.useEffect(function(){de>=W&&de<=fe&&He.setValue(de)},[de,W,fe]);var $e=J(s([f(h(xe,o.State.ACTIVE),[f(y(Ze),m(Ze)),f(Ge,0,[g(Ye,Re),g(Ge,1)]),g(Re,E(Ye,Ue))],[f(Ge,[g(Ge,0),f(Ke,[g(Qe,S(Je)),g(He,f(V(Be,0),b(C(E(We,Qe),Ne),Me),b(C(p(We,Qe),Ne),Me))),I([He],function(e){return he(e[0])})])]),g(We,He),g(Re,Q(Ze,Re,He,T))]),Re])),_e=z(re.prev,ve),et=z(re.next,ve),tt=J(w(E($e,_e),Oe)),nt=J(w(p($e,et),Oe)),rt=z(X),it=J(w($e,Oe,rt,-1)),at=void 0!==U?k.slice(Math.max(de-U,0),Math.min(de+U+1,ve)):k;return r.createElement(a.View,{style:$||(Z&&Z.height?{height:Z.height}:void 0)||{flex:1}},r.createElement(a.Code,{key:Te,exec:f(D(h(Oe,Ce),h(Oe,Pe)),[],[f(h(Ae,1),g(Oe,Pe),g(Oe,Ce))])}),r.createElement(o.PanGestureHandler,Object.assign({},L,{onGestureEvent:ge,onHandlerStateChange:ye}),r.createElement(a.View,{style:{flex:1}},r.createElement(a.View,{style:Z||{flex:1}},r.createElement(a.View,{style:{flex:1},onLayout:function(e){var t=e.nativeEvent.layout;t.width!==Ce&&be(t.width),t.height!==Pe&&Se(t.height)}},r.createElement(a.View,{style:(i={flex:1},i[je]=qe,i.transform=[(t={},t[ke]=it,t)],i)},-1===Ce?null:at.map(function(e,t){var n=t;return void 0!==U&&(n=de<=U?t:de-U+t),r.createElement(Y,{index:n,key:n},r.createElement(N,{focused:n===de},r.createElement(A,{index:n,animatedIndex:$e,minimum:tt,maximum:nt,dimension:Oe,targetTransform:ke,targetDimension:je,pageInterpolation:te},e)))})))))))},exports.PagerContext=F,exports.PagerProvider=function(e){var t=e.children,i=e.initialIndex,a=e.activeIndex,o=e.onChange,u=void 0===o?function(){return console.warn("<PagerProvider /> should have an onChange() prop if it is controlled")}:o,l=n.useState(void 0===i?0:i),c=void 0!==a,s=c?a:l[0],v=c?u:l[1],f=J(new d(s));return r.createElement(F.Provider,{value:[s,v,f]},"function"==typeof t?t({activeIndex:s,onChange:v,animatedIndex:f}):t)},exports.Pagination=function(e){var t=e.children,i=e.pageInterpolation;return r.createElement(a.View,{style:u({},ie,{},e.style)},n.Children.map(t,function(e,t){return r.createElement(ae,{index:t,pageInterpolation:i,style:e.props.style},e)}))},exports.Progress=function(e){var t=e.numberOfScreens,n=e.style,i=H(),o=_(new ee(0)),l=_(te(o,t,te(1,re(i,1))));return r.createElement(a.View,{onLayout:function(e){o.setValue(e.nativeEvent.layout.width)}},r.createElement(a.View,{style:u({width:l,height:2,backgroundColor:"rebeccapurple"},oe,{},n)}))},exports.Slider=function(e){var t=e.numberOfScreens,n=e.style,i=H(),o=_(new ee(0)),l=te(o,t),c=_(ne(i,l));return r.createElement(a.View,{onLayout:function(e){o.setValue(e.nativeEvent.layout.width)}},r.createElement(a.View,{style:u({width:l,transform:[{translateX:c}]},oe,{},n)}))},exports.interpolateWithConfig=$,exports.useAnimatedIndex=H,exports.useFocus=X,exports.useIndex=G,exports.useInterpolation=function(e,t){return J(B(W(void 0!==t?t:G()),e))},exports.useOffset=W,exports.useOnFocus=function(e){var t=X();n.useEffect(function(){t&&e()},[t])},exports.usePager=L;
//# sourceMappingURL=react-native-pager.cjs.production.min.js.map