react-easy-flip/lib/index.js

A lightweight React library for smooth FLIP animations

var e=require("react");function n(){return(n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function t(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function r(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 t(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)?t(e,void 0):void 0}}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var i=0;return function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}}}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 i="undefined"!=typeof window&&window.document&&window.document.createElement?e.useLayoutEffect:e.useEffect,a=function(e){return"running"===e.playState},o=function(e){return"paused"===e.playState},u=function(e){return 0===e.size},c=function(e){return e.getBoundingClientRect()},s=function(e){return getComputedStyle(e).getPropertyValue("background-color")},f=function(e){return document.querySelector("[data-flip-id="+e+"]")},l=e.createContext({forceRender:function(){},pauseAll:function(){},resumeAll:function(){},cachedAnimations:new Map,cachedStyles:new Map,childKeyCache:new Map});function d(e){return 1-Math.pow(1-e,3)}var p=d,v=new Map,h=new Map,m={prewrite:[],read:[],render:[]},y=function(e){for(var n,t=r(e);!(n=t()).done;)(0,n.value)();e.length=0},g=function(){y(m.prewrite),y(m.read),y(m.render)},x=function(e){return function(n){n&&m[e].push(n)}},w={prewrite:x("prewrite"),read:x("read"),render:x("render"),flush:g,jobLength:function(){return[m.prewrite.length,m.read.length,m.render.length]}},b={from:{opacity:1,transform:"scale(1,1)"},to:{opacity:0,transform:"scale(0,0)"},duration:500,easing:"ease-out"},M={from:{opacity:0,transform:"scale(0,0)"},to:{opacity:1,transform:"scale(1,1)"},duration:500,easing:"ease-out"},E=function(e){return""+e.key||""},C=function(t){var r=e.useRef(null),i=e.useRef(!1),o=e.useRef(null),u=e.useContext(l).cachedStyles;e.useLayoutEffect(function(){if(t.preventAnimation)i.current=!0;else if((!i.current||t.isExiting)&&r.current&&(t.isExiting||!t.isCached)){var e=o.current;if(!e||!a(e)){var n=t.keyframes,f=t.isExiting?n.out:n.in,l=new KeyframeEffect(r.current,[f.from,f.to],{duration:f.duration,easing:f.easing||"ease",fill:"both"}),d=new Animation(l,document.timeline),p=t.children.props["data-flip-id"];t.isExiting&&(d.onfinish=function(){u.delete(p),t.callback&&t.callback()}),t.isExiting||(d.onfinish=function(){u.set(p,{styles:{bgColor:s(r.current)},rect:c(r.current)})}),d.play(),o.current=d,i.current=!0}}},[t,u]);var f=n({},t.children.props.style||{},{pointerEvents:"none"});return e.cloneElement(t.children,n({},t.children.props,t.isExiting?{style:f,"data-flip-id":void 0,ref:r}:{ref:r}))};exports.AnimateInOut=function(n){var t=n.children,i=n.in,a=void 0===i?M:i,o=n.out,u=void 0===o?b:o,c=n.playOnFirstRender,s=void 0!==c&&c,f=n.itemAmount,d=void 0===f?void 0:f,p=e.useContext(l),v=p.forceRender,h=p.childKeyCache,m=e.useRef(new Set).current,y=e.useRef(d),g=e.useRef(!0),x={in:a,out:u},w=void 0===d||d!==y.current;y.current=d;var A=function(n){var t=[];return e.Children.forEach(n,function(n){e.isValidElement(n)&&t.push(n)}),t}(t),k=e.useRef(A);if(e.useEffect(function(){e.Children.forEach(A,function(e){h.set(E(e),e)})}),g.current)return g.current=!1,A.map(function(n){return e.createElement(C,{isExiting:!1,key:E(n),childProps:n.props,keyframes:x,isCached:!s,preventAnimation:!s},n)});if(!w){if(0!==m.size)return k.current;var S=A.map(function(n){return m.has(E(n))?n:e.createElement(C,{isExiting:!1,childProps:n.props,key:E(n),keyframes:x,isCached:!0},n)});return k.current=S,S}for(var I,O=k.current.map(E),R=A.map(E),P=r(O);!(I=P()).done;){var j=I.value;R.includes(j)?m.delete(j):m.add(j)}var F=[].concat(A);return m.forEach(function(n){if(-1===R.indexOf(n)){var t=h.get(n);if(t){var r=O.indexOf(n);F.splice(r,0,e.createElement(C,{isExiting:!0,childProps:t.props,key:n,keyframes:x,callback:function(){return function(e){if(m.has(e)){h.delete(e),m.delete(e);var n=k.current.findIndex(function(n){return n.key===e});k.current.splice(n,1),0===m.size&&(k.current=A,v())}}(n)},isCached:!0},t))}}}),F=F.map(function(n){var t=E(n);return m.has(t)?n:e.createElement(C,{isExiting:!1,childProps:n.props,key:t,keyframes:x,isCached:!!h.get(t)},n)}),k.current=F,F},exports.FlipContext=l,exports.FlipProvider=function(n){var t=n.children,i=e.useState(0),u=i[0],c=i[1],s=e.useRef(new Map).current,f=e.useRef(new Map).current,d=e.useRef(new Map).current,p=e.useMemo(function(){return{forceRender:function(){c(u+1)},pauseAll:function(){for(var e,n=r(s.values());!(e=n()).done;){var t=e.value;a(t)&&t.pause()}},resumeAll:function(){for(var e,n=r(s.values());!(e=n()).done;){var t=e.value;o(t)&&t.play()}},cachedAnimations:s,cachedStyles:f,childKeyCache:d}},[u,d,f,s]);return e.createElement(l.Provider,{value:p},t)},exports.easeInBack=function(e){return 2.70158*e*e*e-1.70158*e*e},exports.easeInCubic=function(e){return e*e*e},exports.easeInOutBack=function(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},exports.easeInOutCubic=function(e){return e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2},exports.easeInOutQuint=function(e){return e<.5?16*e*e*e*e*e:1-Math.pow(-2*e+2,5)/2},exports.easeInOutSine=function(e){return-(Math.cos(Math.PI*e)-1)/2},exports.easeInQuint=function(e){return e*e*e*e*e},exports.easeInSine=function(e){return 1-Math.cos(e*Math.PI/2)},exports.easeOutBack=function(e){return 1+2.70158*Math.pow(e-1,3)+1.70158*Math.pow(e-1,2)},exports.easeOutCubic=d,exports.easeOutQuint=function(e){return 1-Math.pow(1-e,5)},exports.easeOutSine=function(e){return Math.sin(e*Math.PI/2)},exports.linear=function(e){return e},exports.useFlip=function(n,t,o){void 0===t&&(t={});for(var d,m=e.useContext(l),y=m.cachedAnimations,x=m.cachedStyles,b=m.pauseAll,M=m.resumeAll,E=e.useRef(new Map).current,C=t.delay,A=void 0===C?0:C,k=t.duration,S=void 0===k?400:k,I=t.easing,O=void 0===I?p:I,R=t.animateColor,P=void 0!==R&&R,j=function(){var e=d.value,n=f(e);if(!u(y)&&n){var t=y.get(e);t&&a(t)&&x.get(e)&&(w.prewrite(function(){x.set(e,{rect:c(n),styles:{bgColor:s(f(e))}})}),w.render(function(){t.finish()}))}},F=r(x.keys());!(d=F()).done;)j();return w.flush(),e.useEffect(function(){for(var e,t=r(function(e){return document.querySelectorAll("[data-flip-root-id="+e+"]")}(n));!(e=t()).done;)for(var i,a=r(e.value.querySelectorAll("[data-flip-id]"));!(i=a()).done;){var o=i.value;x.set(o.dataset.flipId,{styles:{bgColor:s(o)},rect:c(o)})}},[n,o,x]),i(function(){if(!u(x)){for(var e,n=function(){var n=e.value,t=n[0],r=n[1],i=r.rect,a=r.styles,o=f(t);o&&w.read(function(){var e=c(o),n=function(e,n){return e.y-n.y}(i,e),r=function(e,n){return e.x-n.x}(i,e),u=function(e,n){return e.width/Math.max(n.width,.001)}(i,e),f=function(e,n){return e.height/Math.max(n.height,.001)}(i,e);x.get(t).rect=e;var l=s(o);if(0!==r||0!==n||1!==u||1!==f){var d=function(e){var n=e.sx,t=void 0===n?1:n,r=e.sy,i=void 0===r?1:r,a=e.dx,o=void 0===a?0:a,u=e.dy,c=void 0===u?0:u,s=e.easeFn,f=e.calculateInverse,l=void 0!==f&&f,d=""+Math.round(t)+Math.round(i)+Math.round(o)+Math.round(c),p=h.get(d);if(p)return p;for(var m=[],y=[],g=0;g<=100;g+=5){var x=g/100,w=v.get(x),b=w||s(x);!w&&v.set(x,b);var M=t+(1-t)*b,E=i+(1-i)*b;m.push({transform:"scale("+M+", "+E+") translate("+(o-o*b)+"px, "+(c-c*b)+"px)"}),l&&y.push({transform:"scale("+1/M+", "+1/E+") translate(0px, 0px)"})}return h.set(d,{animations:m,inverseAnimations:y}),{animations:m,inverseAnimations:y}}({sx:u,sy:f,dx:r,dy:n,easeFn:O,calculateInverse:!0});P&&(d.animations[0].background=a.bgColor,d.animations[20].background=l),E.set(t,{elm:o,kfs:d.animations}),a.bgColor=l}})},t=r(x.entries());!(e=t()).done;)n();for(var i,a={duration:S,easing:"linear",delay:A,fill:"both"},o=function(){var e=i.value;w.render(function(){var n=E.get(e);if(n){var t=function(e,n,t){var r=t.delay,i=t.stagger,a=t.staggerStep,o=new KeyframeEffect(e,n,{duration:t.duration,easing:"linear",delay:(void 0===r?0:r)+(void 0===i?0:i)*(void 0===a?0:a),fill:"both"});return new Animation(o,document.timeline)}(n.elm,n.kfs,a);y.set(e,t),E.delete(e),t.play()}})},l=r(x.keys());!(i=l()).done;)o()}}),i(g),{pause:b,resume:M}};