ScrollNumber.js 6.6 KB

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