ScrollNumber.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. import _extends from 'babel-runtime/helpers/extends';
  2. import classNames from 'classnames';
  3. import PropTypes from '../_util/vue-types';
  4. import BaseMixin from '../_util/BaseMixin';
  5. import { getStyle } from '../_util/props-util';
  6. import omit from 'omit.js';
  7. import { cloneElement } from '../_util/vnode';
  8. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  9. function getNumberArray(num) {
  10. return num ? num.toString().split('').reverse().map(function (i) {
  11. var current = Number(i);
  12. return isNaN(current) ? i : current;
  13. }) : [];
  14. }
  15. var ScrollNumberProps = {
  16. prefixCls: PropTypes.string,
  17. count: PropTypes.any,
  18. component: PropTypes.string,
  19. title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
  20. displayComponent: PropTypes.any,
  21. className: PropTypes.object
  22. };
  23. export default {
  24. mixins: [BaseMixin],
  25. props: ScrollNumberProps,
  26. inject: {
  27. configProvider: { 'default': function _default() {
  28. return ConfigConsumerProps;
  29. } }
  30. },
  31. data: function data() {
  32. return {
  33. animateStarted: true,
  34. sCount: this.count
  35. };
  36. },
  37. watch: {
  38. count: function count() {
  39. this.lastCount = this.sCount;
  40. this.setState({
  41. animateStarted: true
  42. });
  43. }
  44. },
  45. updated: function updated() {
  46. var _this = this;
  47. var animateStarted = this.animateStarted,
  48. count = this.count;
  49. if (animateStarted) {
  50. this.clearTimeout();
  51. // Let browser has time to reset the scroller before actually
  52. // performing the transition.
  53. this.timeout = setTimeout(function () {
  54. _this.setState({
  55. animateStarted: false,
  56. sCount: count
  57. }, _this.onAnimated);
  58. });
  59. }
  60. },
  61. beforeDestroy: function beforeDestroy() {
  62. this.clearTimeout();
  63. },
  64. methods: {
  65. clearTimeout: function (_clearTimeout) {
  66. function clearTimeout() {
  67. return _clearTimeout.apply(this, arguments);
  68. }
  69. clearTimeout.toString = function () {
  70. return _clearTimeout.toString();
  71. };
  72. return clearTimeout;
  73. }(function () {
  74. if (this.timeout) {
  75. clearTimeout(this.timeout);
  76. this.timeout = undefined;
  77. }
  78. }),
  79. getPositionByNum: function getPositionByNum(num, i) {
  80. var sCount = this.sCount;
  81. var currentCount = Math.abs(Number(sCount));
  82. var lastCount = Math.abs(Number(this.lastCount));
  83. var currentDigit = Math.abs(getNumberArray(sCount)[i]);
  84. var lastDigit = Math.abs(getNumberArray(this.lastCount)[i]);
  85. if (this.animateStarted) {
  86. return 10 + num;
  87. }
  88. // 同方向则在同一侧切换数字
  89. if (currentCount > lastCount) {
  90. if (currentDigit >= lastDigit) {
  91. return 10 + num;
  92. }
  93. return 20 + num;
  94. }
  95. if (currentDigit <= lastDigit) {
  96. return 10 + num;
  97. }
  98. return num;
  99. },
  100. onAnimated: function onAnimated() {
  101. this.$emit('animated');
  102. },
  103. renderNumberList: function renderNumberList(position, className) {
  104. var h = this.$createElement;
  105. var childrenToReturn = [];
  106. for (var i = 0; i < 30; i++) {
  107. childrenToReturn.push(h(
  108. 'p',
  109. {
  110. key: i.toString(),
  111. 'class': classNames(className, {
  112. current: position === i
  113. })
  114. },
  115. [i % 10]
  116. ));
  117. }
  118. return childrenToReturn;
  119. },
  120. renderCurrentNumber: function renderCurrentNumber(prefixCls, num, i) {
  121. var h = this.$createElement;
  122. if (typeof num === 'number') {
  123. var position = this.getPositionByNum(num, i);
  124. var removeTransition = this.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
  125. var style = {
  126. transition: removeTransition ? 'none' : undefined,
  127. msTransform: 'translateY(' + -position * 100 + '%)',
  128. WebkitTransform: 'translateY(' + -position * 100 + '%)',
  129. transform: 'translateY(' + -position * 100 + '%)'
  130. };
  131. return h(
  132. 'span',
  133. { 'class': prefixCls + '-only', style: style, key: i },
  134. [this.renderNumberList(position, prefixCls + '-only-unit')]
  135. );
  136. }
  137. return h(
  138. 'span',
  139. { key: 'symbol', 'class': prefixCls + '-symbol' },
  140. [num]
  141. );
  142. },
  143. renderNumberElement: function renderNumberElement(prefixCls) {
  144. var _this2 = this;
  145. var sCount = this.sCount;
  146. if (sCount && Number(sCount) % 1 === 0) {
  147. return getNumberArray(sCount).map(function (num, i) {
  148. return _this2.renderCurrentNumber(prefixCls, num, i);
  149. }).reverse();
  150. }
  151. return sCount;
  152. }
  153. },
  154. render: function render() {
  155. var h = arguments[0];
  156. var customizePrefixCls = this.prefixCls,
  157. title = this.title,
  158. _component = this.component,
  159. Tag = _component === undefined ? 'sup' : _component,
  160. displayComponent = this.displayComponent,
  161. className = this.className;
  162. var getPrefixCls = this.configProvider.getPrefixCls;
  163. var prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
  164. if (displayComponent) {
  165. return cloneElement(displayComponent, {
  166. 'class': prefixCls + '-custom-component'
  167. });
  168. }
  169. var style = getStyle(this, true);
  170. // fix https://fb.me/react-unknown-prop
  171. var restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
  172. var newProps = {
  173. props: _extends({}, restProps),
  174. attrs: {
  175. title: title
  176. },
  177. style: style,
  178. 'class': classNames(prefixCls, className)
  179. };
  180. // allow specify the border
  181. // mock border-color by box-shadow for compatible with old usage:
  182. // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
  183. if (style && style.borderColor) {
  184. newProps.style.boxShadow = '0 0 0 1px ' + style.borderColor + ' inset';
  185. }
  186. return h(
  187. Tag,
  188. newProps,
  189. [this.renderNumberElement(prefixCls)]
  190. );
  191. }
  192. };