1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3 | import classNames from 'classnames';
|
4 | import * as React from 'react';
|
5 | function UnitNumber(_ref) {
|
6 | var prefixCls = _ref.prefixCls,
|
7 | value = _ref.value,
|
8 | current = _ref.current,
|
9 | _ref$offset = _ref.offset,
|
10 | offset = _ref$offset === void 0 ? 0 : _ref$offset;
|
11 | var style;
|
12 | if (offset) {
|
13 | style = {
|
14 | position: 'absolute',
|
15 | top: offset + "00%",
|
16 | left: 0
|
17 | };
|
18 | }
|
19 | return React.createElement("span", {
|
20 | style: style,
|
21 | className: classNames(prefixCls + "-only-unit", {
|
22 | current: current
|
23 | })
|
24 | }, value);
|
25 | }
|
26 | function getOffset(start, end, unit) {
|
27 | var index = start;
|
28 | var offset = 0;
|
29 | while ((index + 10) % 10 !== end) {
|
30 | index += unit;
|
31 | offset += unit;
|
32 | }
|
33 | return offset;
|
34 | }
|
35 | export default function SingleNumber(props) {
|
36 | var prefixCls = props.prefixCls,
|
37 | originCount = props.count,
|
38 | originValue = props.value;
|
39 | var value = Number(originValue);
|
40 | var count = Math.abs(originCount);
|
41 | var _React$useState = React.useState(value),
|
42 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
43 | prevValue = _React$useState2[0],
|
44 | setPrevValue = _React$useState2[1];
|
45 | var _React$useState3 = React.useState(count),
|
46 | _React$useState4 = _slicedToArray(_React$useState3, 2),
|
47 | prevCount = _React$useState4[0],
|
48 | setPrevCount = _React$useState4[1];
|
49 |
|
50 | var onTransitionEnd = function onTransitionEnd() {
|
51 | setPrevValue(value);
|
52 | setPrevCount(count);
|
53 | };
|
54 |
|
55 | React.useEffect(function () {
|
56 | var timeout = setTimeout(function () {
|
57 | onTransitionEnd();
|
58 | }, 1000);
|
59 | return function () {
|
60 | clearTimeout(timeout);
|
61 | };
|
62 | }, [value]);
|
63 |
|
64 |
|
65 | var unitNodes;
|
66 | var offsetStyle;
|
67 | if (prevValue === value || Number.isNaN(value) || Number.isNaN(prevValue)) {
|
68 |
|
69 | unitNodes = [React.createElement(UnitNumber, _extends({}, props, {
|
70 | key: value,
|
71 | current: true
|
72 | }))];
|
73 | offsetStyle = {
|
74 | transition: 'none'
|
75 | };
|
76 | } else {
|
77 | unitNodes = [];
|
78 |
|
79 | var end = value + 10;
|
80 | var unitNumberList = [];
|
81 | for (var index = value; index <= end; index += 1) {
|
82 | unitNumberList.push(index);
|
83 | }
|
84 |
|
85 | var prevIndex = unitNumberList.findIndex(function (n) {
|
86 | return n % 10 === prevValue;
|
87 | });
|
88 | unitNodes = unitNumberList.map(function (n, index) {
|
89 | var singleUnit = n % 10;
|
90 | return React.createElement(UnitNumber, _extends({}, props, {
|
91 | key: n,
|
92 | value: singleUnit,
|
93 | offset: index - prevIndex,
|
94 | current: index === prevIndex
|
95 | }));
|
96 | });
|
97 |
|
98 | var unit = prevCount < count ? 1 : -1;
|
99 | offsetStyle = {
|
100 | transform: "translateY(" + -getOffset(prevValue, value, unit) + "00%)"
|
101 | };
|
102 | }
|
103 | return React.createElement("span", {
|
104 | className: prefixCls + "-only",
|
105 | style: offsetStyle,
|
106 | onTransitionEnd: onTransitionEnd
|
107 | }, unitNodes);
|
108 | } |
\ | No newline at end of file |