react-move/dist/react-move.min.js

Beautiful, data-driven animations for React.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactMove={},t.React)}(this,(function(t,e){"use strict";var n="default"in e?e.default:e;var r,i,o,a=function(t,e){return t(e={exports:{}},e.exports),e.exports}((function(t){t.exports=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},t.exports.default=t.exports,t.exports.__esModule=!0})),s=(r=a)&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r,u=0,l=0,c=0,f=0,p=0,h=0,y="object"==typeof performance&&performance.now?performance:Date,d="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(t){setTimeout(t,17)};function v(){return p||(d(m),p=y.now()+h)}function m(){p=0}function g(){this._call=this._time=this._next=null}function w(t,e,n){var r=new g;return r.restart(t,e,n),r}function b(){p=(f=y.now())+h,u=l=0;try{!function(){v(),++u;for(var t,e=i;e;)(t=p-e._time)>=0&&e._call.call(null,t),e=e._next;--u}()}finally{u=0,function(){var t,e,n=i,r=1/0;for(;n;)n._call?(r>n._time&&(r=n._time),t=n,n=n._next):(e=n._next,n._next=null,n=t?t._next=e:i=e);o=t,E(r)}(),p=0}}function _(){var t=y.now(),e=t-f;e>1e3&&(h-=e,f=t)}function E(t){u||(l&&(l=clearTimeout(l)),t-p>24?(t<1/0&&(l=setTimeout(b,t-y.now()-h)),c&&(c=clearInterval(c))):(c||(f=y.now(),c=setInterval(_,1e3)),u=1,d(b)))}function x(t,e,n){var r=new g;return e=null==e?0:+e,r.restart((function(n){r.stop(),t(n+e)}),e,n),r}function T(t){return(T="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}g.prototype=w.prototype={constructor:g,restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?v():+n)+(null==e?0:+e),this._next||o===this||(o?o._next=this:i=this,o=this),this._call=t,this._time=n,E()},stop:function(){this._call&&(this._call=null,this._time=1/0,E())}};var k=0;function S(t,e){for(var n in e)t[n]=e[n]}var A={delay:0,duration:250,ease:function(t){return+t}};var D=function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.start=null,this.interrupt=null,this.end=null,e.events&&Object.keys(e.events).forEach((function(t){if("function"!=typeof e.events[t])throw new Error("Event handlers must be a function");var r,i;n[t]=(r=e.events[t],i=!1,function(){i||(i=!0,r.call(this))})}))};function j(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})))),r.forEach((function(e){O(t,e,n[e])}))}return t}function O(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function P(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var K=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.state=e||{}}var e,n,r;return e=t,(n=[{key:"transition",value:function(t){if(Array.isArray(t)){var e=!0,n=!1,r=void 0;try{for(var i,o=t[Symbol.iterator]();!(e=(i=o.next()).done);e=!0){var a=i.value;this.parse(a)}}catch(t){n=!0,r=t}finally{try{e||null==o.return||o.return()}finally{if(n)throw r}}}else this.parse(t)}},{key:"isTransitioning",value:function(){return!!this.transitionData}},{key:"stopTransitions",value:function(){var t=this.transitionData;t&&Object.keys(t).forEach((function(e){t[e].timer.stop()}))}},{key:"setState",value:function(t){S(this.state,"function"==typeof t?t(this.state):t)}},{key:"parse",value:function(t){var e=this,n=j({},t),r=new D(n);n.events&&delete n.events;var i=j({},A,n.timing||{},{time:v()});n.timing&&delete n.timing,Object.keys(n).forEach((function(t){var o,a,s=[],u=n[t];if("object"===T(a=u)&&!1===Array.isArray(a))Object.keys(u).forEach((function(n){var r=u[n];Array.isArray(r)?1===r.length?s.push(e.getTween(n,r[0],t)):(e.setState((function(e){var i,o;return(o={})[t]=j({},e[t],((i={})[n]=r[0],i)),o})),s.push(e.getTween(n,r[1],t))):"function"==typeof r?s.push((function(){return function(i){e.setState((function(e){var o,a;return(a={})[t]=j({},e[t],((o={})[n]=r(i),o)),a}))}})):(e.setState((function(e){var i,o;return(o={})[t]=j({},e[t],((i={})[n]=r,i)),o})),s.push(e.getTween(n,r,t)))}));else if(Array.isArray(u))1===u.length?s.push(e.getTween(t,u[0],null)):(e.setState(((o={})[t]=u[0],o)),s.push(e.getTween(t,u[1],null)));else if("function"==typeof u)s.push((function(){return function(n){var r;e.setState(((r={})[t]=u(n),r))}}));else{var l;e.setState(((l={})[t]=u,l)),s.push(e.getTween(t,u,null))}e.update({stateKey:t,timing:i,tweens:s,events:r,status:0})}))}},{key:"getTween",value:function(t,e,n){var r=this;return function(){var i=n?r.state[n][t]:r.state[t];if(i===e)return null;var o=r.getInterpolator(i,e,t,n);return null===n?function(e){var n;r.setState(((n={})[t]=o(e),n))}:function(e){r.setState((function(r){var i,a;return(a={})[n]=j({},r[n],((i={})[t]=o(e),i)),a}))}}}},{key:"update",value:function(t){this.transitionData||(this.transitionData={}),this.init(++k,t)}},{key:"init",value:function(t,e){var n=this,r=e.tweens.length,i=new Array(r);this.transitionData[t]=e,e.timer=w((function(t){e.status=1,e.timer.restart(o,e.timing.delay,e.timing.time),e.timing.delay<=t&&o(t-e.timing.delay)}),0,e.timing.time);var o=function o(u){if(1!==e.status)return s();for(var l in n.transitionData){var c=n.transitionData[l];if(c.stateKey===e.stateKey){if(3===c.status)return x(o);4===c.status?(c.status=6,c.timer.stop(),c.events.interrupt&&c.events.interrupt.call(n),delete n.transitionData[l]):+l<t&&(c.status=6,c.timer.stop(),delete n.transitionData[l])}}if(x((function(){3===e.status&&(e.status=4,e.timer.restart(a,e.timing.delay,e.timing.time),a(u))})),e.status=2,e.events.start&&e.events.start.call(n),2===e.status){e.status=3;for(var f=-1,p=0;p<r;++p){var h=e.tweens[p]();h&&(i[++f]=h)}i.length=f+1}},a=function(t){var r=1;t<e.timing.duration?r=e.timing.ease(t/e.timing.duration):(e.timer.restart(s),e.status=5);for(var o=-1;++o<i.length;)i[o](r);5===e.status&&(e.events.end&&e.events.end.call(n),s())},s=function(){for(var r in e.status=6,e.timer.stop(),delete n.transitionData[t],n.transitionData)return;delete n.transitionData}}}])&&P(e.prototype,n),r&&P(e,r),t}();function I(t,e){const n=+t,r=+e-n;return function(t){return n+r*t}}class C extends e.Component{constructor(t){super(t),s(this,"animate",()=>{const{nodeKeys:t,nodeHash:e}=this.state;if(this.unmounting)return;let n=!1;const r=[],i=t.length;for(let o=0;o<i;o++){const i=t[o],a=e[i],s=a.isTransitioning();s&&(n=!0),"LEAVE"!==a.type||s?r.push(i):delete e[i]}n||this.interval.stop(),this.setState(()=>({nodeKeys:r,nodes:r.map(t=>e[t])}))}),s(this,"interval",null),s(this,"unmounting",!1);const{interpolation:e}=t;this.state={Node:class extends K{constructor(t,n){super(),s(this,"getInterpolator",e),this.key=t,this.data=n,this.type="ENTER"}},nodeKeys:[],nodeHash:{},nodes:[],data:null}}static getDerivedStateFromProps(t,e){if(t.data!==e.data){const{data:n,keyAccessor:r,start:i,enter:o,update:a,leave:s}=t,{Node:u,nodeKeys:l,nodeHash:c}=e,f={};for(let t=0;t<l.length;t++)f[l[t]]=t;const p={},h=[];for(let t=0;t<n.length;t++){const e=n[t],i=r(e,t);if(p[i]=t,h.push(i),void 0===f[i]){const t=new u;t.key=i,t.data=e,t.type="ENTER",c[i]=t}}for(let t=0;t<l.length;t++){const e=l[t],r=c[e];void 0!==p[e]?(r.data=n[p[e]],r.type="UPDATE"):r.type="LEAVE"}const y=function(t,e,n,r){const i=[];for(let t=0;t<n.length;t++)i[t]=n[t];for(let e=0;e<t.length;e++)void 0===r[t[e]]&&i.push(t[e]);return i.sort((t,i)=>{const o=r[t],a=r[i],s=e[t],u=e[i];if(null!=o&&null!=a)return r[t]-r[i];if(null!=s&&null!=u)return e[t]-e[i];if(null!=o){for(let t=0;t<n.length;t++){const i=n[t];if(e[i]){if(o<r[i]&&u>e[i])return-1;if(o>r[i]&&u<e[i])return 1}}return 1}for(let t=0;t<n.length;t++){const i=n[t];if(e[i]){if(a<r[i]&&s>e[i])return 1;if(a>r[i]&&s<e[i])return-1}}return-1})}(l,f,h,p);for(let t=0;t<y.length;t++){const e=y[t],n=c[e],r=n.data;"ENTER"===n.type?(n.setState(i(r,p[e])),n.transition(o(r,p[e]))):"LEAVE"===n.type?n.transition(s(r,f[e])):n.transition(a(r,p[e]))}return{data:n,nodes:y.map(t=>c[t]),nodeHash:c,nodeKeys:y}}return null}componentDidMount(){this.startInterval()}componentDidUpdate(t){t.data===this.props.data||this.unmounting||this.startInterval()}startInterval(){var t,e,n,r,i;this.interval?this.interval.restart(this.animate):this.interval=(t=this.animate,r=new g,i=e,null==e?(r.restart(t,e,n),r):(e=+e,n=null==n?v():+n,r.restart((function o(a){a+=i,r.restart(o,i+=e,n),t(a)}),e,n),r))}componentWillUnmount(){const{nodeKeys:t,nodeHash:e}=this.state;this.unmounting=!0,this.interval&&this.interval.stop(),t.forEach(t=>{e[t].stopTransitions()})}render(){const t=this.props.children(this.state.nodes);return t&&n.Children.only(t)}}C.defaultProps={enter:()=>{},update:()=>{},leave:()=>{},interpolation:I};const N=()=>"$$key$$";class H extends e.Component{render(){const{show:t,start:e,enter:r,update:i,leave:o,interpolation:a,children:s}=this.props,u="function"==typeof e?e():e;return n.createElement(C,{data:t?[u]:[],start:()=>u,keyAccessor:N,interpolation:a,enter:"function"==typeof r?r:()=>r,update:"function"==typeof i?i:()=>i,leave:"function"==typeof o?o:()=>o},t=>{if(!t[0])return null;const e=s(t[0].state);return e&&n.Children.only(e)})}}H.defaultProps={show:!0,interpolation:I},t.Animate=H,t.NodeGroup=C,Object.defineProperty(t,"__esModule",{value:!0})}));