react-easy-flip/lib/index.es.js

A lightweight React library for smooth FLIP animations

import{useLayoutEffect as e,useEffect as n,createContext as r,useState as t,useRef as i,useMemo as a,createElement as o,useContext as u,Children as c,isValidElement as f,cloneElement as s}from"react";function l(){return(l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function d(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}function p(e,n){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,n){if(e){if("string"==typeof e)return d(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?d(e,void 0):void 0}}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var t=0;return function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}var v="undefined"!=typeof window&&window.document&&window.document.createElement?e:n,h=function(e){return"running"===e.playState},y=function(e){return"paused"===e.playState},m=function(e){return 0===e.size},g=function(e){return e.getBoundingClientRect()},w=function(e){return getComputedStyle(e).getPropertyValue("background-color")},M=function(e){return document.querySelector("[data-flip-id="+e+"]")},b=r({forceRender:function(){},pauseAll:function(){},resumeAll:function(){},cachedAnimations:new Map,cachedStyles:new Map,childKeyCache:new Map}),x=function(e){var n=e.children,r=t(0),u=r[0],c=r[1],f=i(new Map).current,s=i(new Map).current,l=i(new Map).current,d=a(function(){return{forceRender:function(){c(u+1)},pauseAll:function(){for(var e,n=p(f.values());!(e=n()).done;){var r=e.value;h(r)&&r.pause()}},resumeAll:function(){for(var e,n=p(f.values());!(e=n()).done;){var r=e.value;y(r)&&r.play()}},cachedAnimations:f,cachedStyles:s,childKeyCache:l}},[u,l,s,f]);return o(b.Provider,{value:d},n)};function A(e){return e}function k(e){return 1-Math.cos(e*Math.PI/2)}function E(e){return Math.sin(e*Math.PI/2)}function S(e){return-(Math.cos(Math.PI*e)-1)/2}function C(e){return e*e*e}function I(e){return 1-Math.pow(1-e,3)}function P(e){return e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2}function O(e){return e*e*e*e*e}function j(e){return 1-Math.pow(1-e,5)}function K(e){return e<.5?16*e*e*e*e*e:1-Math.pow(-2*e+2,5)/2}function R(e){return 2.70158*e*e*e-1.70158*e*e}function q(e){return 1+2.70158*Math.pow(e-1,3)+1.70158*Math.pow(e-1,2)}function z(e){var n=2.5949095;return e<.5?Math.pow(2*e,2)*(7.189819*e-n)/2:(Math.pow(2*e-2,2)*((n+1)*(2*e-2)+n)+2)/2}var F=I,L=new Map,B=new Map,T={prewrite:[],read:[],render:[]},U=function(e){for(var n,r=p(e);!(n=r()).done;)(0,n.value)();e.length=0},V=function(){U(T.prewrite),U(T.read),U(T.render)},$=function(e){return function(n){n&&T[e].push(n)}},D={prewrite:$("prewrite"),read:$("read"),render:$("render"),flush:V,jobLength:function(){return[T.prewrite.length,T.read.length,T.render.length]}},G=function(e,r,t){void 0===r&&(r={});for(var a,o=u(b),c=o.cachedAnimations,f=o.cachedStyles,s=o.pauseAll,l=o.resumeAll,d=i(new Map).current,y=r.delay,x=void 0===y?0:y,A=r.duration,k=void 0===A?400:A,E=r.easing,S=void 0===E?F:E,C=r.animateColor,I=void 0!==C&&C,P=function(){var e=a.value,n=M(e);if(!m(c)&&n){var r=c.get(e);r&&h(r)&&f.get(e)&&(D.prewrite(function(){f.set(e,{rect:g(n),styles:{bgColor:w(M(e))}})}),D.render(function(){r.finish()}))}},O=p(f.keys());!(a=O()).done;)P();return D.flush(),n(function(){for(var n,r=p(function(e){return document.querySelectorAll("[data-flip-root-id="+e+"]")}(e));!(n=r()).done;)for(var t,i=p(n.value.querySelectorAll("[data-flip-id]"));!(t=i()).done;){var a=t.value;f.set(a.dataset.flipId,{styles:{bgColor:w(a)},rect:g(a)})}},[e,t,f]),v(function(){if(!m(f)){for(var e,n=function(){var n=e.value,r=n[0],t=n[1],i=t.rect,a=t.styles,o=M(r);o&&D.read(function(){var e=g(o),n=function(e,n){return e.y-n.y}(i,e),t=function(e,n){return e.x-n.x}(i,e),u=function(e,n){return e.width/Math.max(n.width,.001)}(i,e),c=function(e,n){return e.height/Math.max(n.height,.001)}(i,e);f.get(r).rect=e;var s=w(o);if(0!==t||0!==n||1!==u||1!==c){var l=function(e){var n=e.sx,r=void 0===n?1:n,t=e.sy,i=void 0===t?1:t,a=e.dx,o=void 0===a?0:a,u=e.dy,c=void 0===u?0:u,f=e.easeFn,s=e.calculateInverse,l=void 0!==s&&s,d=""+Math.round(r)+Math.round(i)+Math.round(o)+Math.round(c),p=B.get(d);if(p)return p;for(var v=[],h=[],y=0;y<=100;y+=5){var m=y/100,g=L.get(m),w=g||f(m);!g&&L.set(m,w);var M=r+(1-r)*w,b=i+(1-i)*w;v.push({transform:"scale("+M+", "+b+") translate("+(o-o*w)+"px, "+(c-c*w)+"px)"}),l&&h.push({transform:"scale("+1/M+", "+1/b+") translate(0px, 0px)"})}return B.set(d,{animations:v,inverseAnimations:h}),{animations:v,inverseAnimations:h}}({sx:u,sy:c,dx:t,dy:n,easeFn:S,calculateInverse:!0});I&&(l.animations[0].background=a.bgColor,l.animations[20].background=s),d.set(r,{elm:o,kfs:l.animations}),a.bgColor=s}})},r=p(f.entries());!(e=r()).done;)n();for(var t,i={duration:k,easing:"linear",delay:x,fill:"both"},a=function(){var e=t.value;D.render(function(){var n=d.get(e);if(n){var r=function(e,n,r){var t=r.delay,i=r.stagger,a=r.staggerStep,o=new KeyframeEffect(e,n,{duration:r.duration,easing:"linear",delay:(void 0===t?0:t)+(void 0===i?0:i)*(void 0===a?0:a),fill:"both"});return new Animation(o,document.timeline)}(n.elm,n.kfs,i);c.set(e,r),d.delete(e),r.play()}})},o=p(f.keys());!(t=o()).done;)a()}}),v(V),{pause:s,resume:l}},H={from:{opacity:1,transform:"scale(1,1)"},to:{opacity:0,transform:"scale(0,0)"},duration:500,easing:"ease-out"},J={from:{opacity:0,transform:"scale(0,0)"},to:{opacity:1,transform:"scale(1,1)"},duration:500,easing:"ease-out"},N=function(e){return""+e.key||""},Q=function(n){var r=i(null),t=i(!1),a=i(null),o=u(b).cachedStyles;e(function(){if(n.preventAnimation)t.current=!0;else if((!t.current||n.isExiting)&&r.current&&(n.isExiting||!n.isCached)){var e=a.current;if(!e||!h(e)){var i=n.keyframes,u=n.isExiting?i.out:i.in,c=new KeyframeEffect(r.current,[u.from,u.to],{duration:u.duration,easing:u.easing||"ease",fill:"both"}),f=new Animation(c,document.timeline),s=n.children.props["data-flip-id"];n.isExiting&&(f.onfinish=function(){o.delete(s),n.callback&&n.callback()}),n.isExiting||(f.onfinish=function(){o.set(s,{styles:{bgColor:w(r.current)},rect:g(r.current)})}),f.play(),a.current=f,t.current=!0}}},[n,o]);var c=l({},n.children.props.style||{},{pointerEvents:"none"});return s(n.children,l({},n.children.props,n.isExiting?{style:c,"data-flip-id":void 0,ref:r}:{ref:r}))},W=function(e){var r=e.children,t=e.in,a=void 0===t?J:t,s=e.out,l=void 0===s?H:s,d=e.playOnFirstRender,v=void 0!==d&&d,h=e.itemAmount,y=void 0===h?void 0:h,m=u(b),g=m.forceRender,w=m.childKeyCache,M=i(new Set).current,x=i(y),A=i(!0),k={in:a,out:l},E=void 0===y||y!==x.current;x.current=y;var S=function(e){var n=[];return c.forEach(e,function(e){f(e)&&n.push(e)}),n}(r),C=i(S);if(n(function(){c.forEach(S,function(e){w.set(N(e),e)})}),A.current)return A.current=!1,S.map(function(e){return o(Q,{isExiting:!1,key:N(e),childProps:e.props,keyframes:k,isCached:!v,preventAnimation:!v},e)});if(!E){if(0!==M.size)return C.current;var I=S.map(function(e){return M.has(N(e))?e:o(Q,{isExiting:!1,childProps:e.props,key:N(e),keyframes:k,isCached:!0},e)});return C.current=I,I}for(var P,O=C.current.map(N),j=S.map(N),K=p(O);!(P=K()).done;){var R=P.value;j.includes(R)?M.delete(R):M.add(R)}var q=[].concat(S);return M.forEach(function(e){if(-1===j.indexOf(e)){var n=w.get(e);if(n){var r=O.indexOf(e);q.splice(r,0,o(Q,{isExiting:!0,childProps:n.props,key:e,keyframes:k,callback:function(){return function(e){if(M.has(e)){w.delete(e),M.delete(e);var n=C.current.findIndex(function(n){return n.key===e});C.current.splice(n,1),0===M.size&&(C.current=S,g())}}(e)},isCached:!0},n))}}}),q=q.map(function(e){var n=N(e);return M.has(n)?e:o(Q,{isExiting:!1,childProps:e.props,key:n,keyframes:k,isCached:!!w.get(n)},e)}),C.current=q,q};export{W as AnimateInOut,b as FlipContext,x as FlipProvider,R as easeInBack,C as easeInCubic,z as easeInOutBack,P as easeInOutCubic,K as easeInOutQuint,S as easeInOutSine,O as easeInQuint,k as easeInSine,q as easeOutBack,I as easeOutCubic,j as easeOutQuint,E as easeOutSine,A as linear,G as useFlip};