react-count-animation
Version:
A animation react component for count change
1 lines • 13.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define("react-count-animation",["react"],e):"object"==typeof exports?exports["react-count-animation"]=e(require("react")):t["react-count-animation"]=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(e,r){e.exports=t},function(t,e,r){"use strict";function n(t,e,r){var n=parseFloat(t).toFixed(e);if(r){t<0&&(n=n.substring(1,n.length));var o=n.split(".")[0].split("").reverse().join("");if(o=o.replace(/(\d{3})(?=[^$])/g,"$1,"),o=o.split("").reverse().join(""),e>=1){n=o+"."+n.split(".")[1]}else n=o;t<0&&(n="-"+n)}return n}function o(t,e){if(t===e)return!0;if(!(t instanceof Object&&e instanceof Object))return!1;if(t.constructor!==e.constructor)return!1;for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r)){if(!Object.prototype.hasOwnProperty.call(e,r))return!1;if(t[r]!==e[r]){if("object"!==i(t[r]))return!1;if(!o(t[r],e[r]))return!1}}for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)&&!Object.prototype.hasOwnProperty.call(t,n))return!1;return!0}Object.defineProperty(e,"__esModule",{value:!0});var i="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};e.formatNumber=n,e.equalObject=o},function(t,e,r){t.exports=r(3)},function(t,e,r){"use strict";t.exports=r(4)},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var u=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),s=r(0),l=n(s),p=r(5),c=n(p),f=r(6),m=n(f),y=r(7),h=n(y),d=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"renderComponent",value:function(){var t={start:this.props.start,count:this.props.count,duration:this.props.duration,decimals:this.props.decimals,useGroup:this.props.useGroup,animation:this.props.animation};switch(this.props.animation){case"up":return l.default.createElement(c.default,t);case"roll":return l.default.createElement(m.default,t);case"slide":return l.default.createElement(h.default,t);default:return null}}},{key:"render",value:function(){return this.renderComponent()}}]),e}(s.Component);d.displayName="AnimationCount",d.propTypes={start:s.PropTypes.number,count:s.PropTypes.number,duration:s.PropTypes.number,decimals:s.PropTypes.number,useGroup:s.PropTypes.bool,animation:s.PropTypes.string},e.default=d},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),u=r(0),s=function(t){return t&&t.__esModule?t:{default:t}}(u),l=r(1),p=function(t){function e(t){n(this,e);var r=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.setTimer=function(){r.timer||(r.timer=setInterval(function(){var t=(new Date).getTime()-r.state.startTime,e=r.props.start,n=r.props.count-r.props.start,o=r.props.duration,i=void 0;t<r.props.duration?i=r.countUp(t,e,n,o):(i=(0,l.formatNumber)(r.props.count,r.props.decimals,r.props.useGroup),clearInterval(r.timer)),r.setState({value:i})},10))},r.clearTimer=function(){clearInterval(r.timer),r.timer=null},r.countUp=function(t,e,n,o){var i=parseFloat(n*(1-Math.pow(2,-10*t/o))*1024/1023+e);return i=(0,l.formatNumber)(i,r.props.decimals,r.props.useGroup)},r.state={value:(0,l.formatNumber)(r.props.start,r.props.decimals,r.props.useGroup),startTime:(new Date).getTime()},r}return i(e,t),a(e,[{key:"componentDidMount",value:function(){this.setTimer()}},{key:"shouldComponentUpdate",value:function(t,e){return(0,l.equalObject)(this.props,t)?!(0,l.equalObject)(this.state,e):(this.setState({value:(0,l.formatNumber)(this.props.start),startTime:(new Date).getTime()}),this.clearTimer(),this.setTimer(),!0)}},{key:"componentWillUnmount",value:function(){this.clearTimer()}},{key:"render",value:function(){return s.default.createElement("div",null,this.state.value)}}]),e}(u.Component);p.displayName="AnimationCount",p.propTypes={start:u.PropTypes.number,count:u.PropTypes.number,duration:u.PropTypes.number,decimals:u.PropTypes.number,useGroup:u.PropTypes.bool},e.default=p},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},u=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),s=r(0),l=function(t){return t&&t.__esModule?t:{default:t}}(s),p=r(1),c=function(t){function e(t){n(this,e);var r=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.getAllCount=function(){for(var t=0,e=void 0,n=[],o=r.props.count-r.props.start,i=r.props.start,a=r.props.duration,u=a/19,s=0;s<19;s+=1)t+=u,e=t<r.props.duration?r.countUp(t,i,o,a):(0,p.formatNumber)(r.props.count,r.props.decimals,r.props.useGroup),n.unshift(e);r.setState({arrayLi:n})},r.setInit=function(t,e,n,o){r.setState({height:t,animationStyle:r.setAnimationStyle(19*t,!0),valueStart:(0,p.formatNumber)(e,n,o)})},r.setAnimationStyle=function(t,e){return{transitionDuration:e?"0s":r.props.duration/1e3+"s",WebkitTransitionDuration:e?"0s":r.props.duration/1e3+"s",MozAnimationDirection:e?"0s":r.props.duration/1e3+"s",OTransitionDuration:e?"0s":r.props.duration/1e3+"s",transform:"translate3d(0, -"+t+"px, 0)",WebkitTransform:"translate3d(0, -"+t+"px, 0)",MozTransform:"translate3d(0, -"+t+"px, 0)",OTransform:"translate3d(0, -"+t+"px, 0)"}},r.startAnimation=function(){r.timer&&(clearTimeout(r.timer),r.timer=null),r.timer=setTimeout(function(){r.setState({animationStyle:r.setAnimationStyle(0,!1)})},200)},r.restartAnimation=function(){r.setState({animationStyle:r.setAnimationStyle(19*r.state.height,!0)}),r.startAnimation()},r.countUp=function(t,e,n,o){var i=r.props,a=i.decimals,u=i.useGroup,s=t/o-1,l=n*(Math.pow(s,5)+1)+e;return(0,p.formatNumber)(l,a,u)},r.state={valueStart:(0,p.formatNumber)(r.props.start,r.props.decimals,r.props.useGroup),height:"auto",animationStyle:r.setAnimationStyle(0,!1),arrayLi:[]},r}return i(e,t),u(e,[{key:"componentWillMount",value:function(){this.getAllCount()}},{key:"componentDidMount",value:function(){var t=this.elementLi.offsetHeight,e=this.props,r=e.start,n=e.decimals,o=e.useGroup;this.setInit(t,r,n,o),this.startAnimation()}},{key:"shouldComponentUpdate",value:function(t,e){var r=!(0,p.equalObject)(this.props,t),n=!(0,p.equalObject)(this.state,e);if(r){var o=t.start,i=t.decimals,a=t.useGroup;return this.setInit(this.state.height,o,i,a),this.getAllCount(),this.startAnimation(),!0}return!!n}},{key:"componentWillUnmout",value:function(){clearTimeout(this.timer)}},{key:"render",value:function(){var t=this;return l.default.createElement("div",{className:"count-roll-main",style:{height:this.state.height}},l.default.createElement("ul",{className:"count-roll-ul",style:a({},this.state.animationStyle)},this.state.arrayLi.map(function(t){return l.default.createElement("li",null,t)}),l.default.createElement("li",{className:"count-roll-li",ref:function(e){return t.elementLi=e}},this.state.valueStart)))}}]),e}(s.Component);c.displayName="CountRoll",c.propTypes={start:s.PropTypes.number,count:s.PropTypes.number,duration:s.PropTypes.number,decimals:s.PropTypes.number,useGroup:s.PropTypes.bool},e.default=c},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},u=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),s=r(0),l=function(t){return t&&t.__esModule?t:{default:t}}(s),p=r(1),c=function(t){function e(t){n(this,e);var r=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.setInit=function(){for(var t=0,e=[],n=[],o=r.ul.children,i=0,a=o.length;i<a;i++){n.push(!1);var u=o[i];0===i?(e.push(u.offsetWidth/2),t+=3*u.offsetWidth/2):(e.push(t),t+=u.offsetWidth)}r.setState({ulStyle:{width:t+"px",height:o[0].offsetHeight+"px"},listPosition:e,listClass:n,updateState:!1})},r.setLiStyle=function(t,e){var n=r.state.listStyle,o=r.state.listClass;n[t]={transitionDuration:e/1e3+"s",WebkitTransitionDuration:e/1e3+"s",MozAnimationDirection:e/1e3+"s",OTransitionDuration:e/1e3+"s",left:r.state.listPosition[t]+"px"},t>1&&t<=r.state.arrayLi.length&&(o[t-2]=!0),r.setState({listStyle:n,listClass:o})},r.startAnimation=function(){var t=r.props.duration/r.state.arrayLi.length,e=0;r.timer||(r.timer=setInterval(function(){e===r.state.arrayLi.length?(r.setLiStyle(e,t),r.clearTimer()):(r.setLiStyle(e,t),e+=1)},t))},r.clearTimer=function(){clearInterval(r.timer),r.timer=null},r.state={arrayLi:(0,p.formatNumber)(r.props.count,r.props.decimals,r.props.useGroup).split(""),ulStyle:{width:"auto",height:"auto"},listPosition:[],start:!1,listStyle:[],listClass:[],updateState:!1},r.elLi=[],r}return i(e,t),u(e,[{key:"componentWillMount",value:function(){var t=[],e={};this.state.arrayLi.forEach(function(){e={left:"100%"},t.push(e)}),this.setState({listStyle:t})}},{key:"componentDidMount",value:function(){this.setInit(),this.startAnimation()}},{key:"componentWillReceiveProps",value:function(t){if(!(0,p.equalObject)(this.props,t)){this.elLi=[],this.clearTimer();var e=[],r={};this.state.arrayLi.forEach(function(){r={left:"100%"},e.push(r)}),this.setState({arrayLi:(0,p.formatNumber)(t.count,t.decimals,t.useGroup).split(""),updateState:!0,listStyle:e})}}},{key:"componentDidUpdate",value:function(){this.state.updateState&&(this.setInit(),this.startAnimation())}},{key:"componentWillUnmount",value:function(){this.clearTimer()}},{key:"render",value:function(){var t=this;return l.default.createElement("div",{className:"count-slide-main"},l.default.createElement("ul",{className:"count-slide-ul",style:a({},this.state.ulStyle),ref:function(e){return t.ul=e}},this.state.arrayLi.map(function(e,r){return l.default.createElement("li",{className:"count-slide-li "+(t.state.listClass[r]?"count-slide-li-tremble":""),style:a({},t.state.listStyle[r])},e)})))}}]),e}(s.Component);c.displayName="CountSlide",c.propTypes={count:s.PropTypes.number,duration:s.PropTypes.number,decimals:s.PropTypes.number,useGroup:s.PropTypes.bool},e.default=c}])});