dtd/es/badge/ScrollNumber.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _extends from"babel-runtime/helpers/extends";import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import*as React from"react";import{createElement,Component}from"react";import omit from"omit.js";import classNames from"classnames";function getNumberArray(t){return t?t.toString().split("").reverse().map(function(t){return Number(t)}):[]}var ScrollNumber=function(t){function e(t){_classCallCheck(this,e);var r=_possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.state={animateStarted:!0,count:t.count},r}return _inherits(e,Component),_createClass(e,[{key:"getPositionByNum",value:function(t,e){if(this.state.animateStarted)return 10+t;var r=getNumberArray(this.state.count)[e],n=getNumberArray(this.lastCount)[e];return this.state.count>this.lastCount?r>=n?10+t:20+t:r<=n?10+t:t}},{key:"componentWillReceiveProps",value:function(t){var e=this;if("count"in t){if(this.state.count===t.count)return;this.lastCount=this.state.count,this.setState({animateStarted:!0},function(){setTimeout(function(){e.setState({animateStarted:!1,count:t.count},function(){var t=e.props.onAnimated;t&&t()})},5)})}}},{key:"renderNumberList",value:function(t){for(var e=[],r=0;r<30;r++){var n=t===r?"current":"";e.push(React.createElement("p",{key:r.toString(),className:n},r%10))}return e}},{key:"renderCurrentNumber",value:function(t,e){var r=this.getPositionByNum(t,e),n=this.state.animateStarted||void 0===getNumberArray(this.lastCount)[e];return createElement("span",{className:this.props.prefixCls+"-only",style:{transition:n&&"none",msTransform:"translateY("+100*-r+"%)",WebkitTransform:"translateY("+100*-r+"%)",transform:"translateY("+100*-r+"%)"},key:e},this.renderNumberList(r))}},{key:"renderNumberElement",value:function(){var t=this,e=this.state;return!e.count||isNaN(e.count)?e.count:getNumberArray(e.count).map(function(e,r){return t.renderCurrentNumber(e,r)}).reverse()}},{key:"render",value:function(){var t=this.props,e=t.prefixCls,r=t.className,n=t.style,s=t.title,o=t.component,a=void 0===o?"sup":o,i=omit(this.props,["count","onAnimated","component","prefixCls"]),u=_extends({},i,{className:classNames(e,r),title:s});return n&&n.borderColor&&(u.style.boxShadow="0 0 0 1px "+n.borderColor+" inset"),createElement(a,u,this.renderNumberElement())}}]),e}();export default ScrollNumber;ScrollNumber.defaultProps={prefixCls:"dt-scroll-number",count:null,onAnimated:function(){}};