2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2024-04-08 14:04:08 +08:00
|
|
|
import classNames from 'classnames';
|
2021-01-29 14:27:36 +08:00
|
|
|
|
|
|
|
export interface UnitNumberProps {
|
|
|
|
prefixCls: string;
|
|
|
|
value: string | number;
|
|
|
|
offset?: number;
|
|
|
|
current?: boolean;
|
|
|
|
}
|
|
|
|
|
2024-07-28 10:43:45 +08:00
|
|
|
const UnitNumber: React.FC<Readonly<UnitNumberProps>> = (props) => {
|
|
|
|
const { prefixCls, value, current, offset = 0 } = props;
|
2021-01-29 14:27:36 +08:00
|
|
|
let style: React.CSSProperties | undefined;
|
|
|
|
if (offset) {
|
2024-07-28 10:43:45 +08:00
|
|
|
style = { position: 'absolute', top: `${offset}00%`, left: 0 };
|
2021-01-29 14:27:36 +08:00
|
|
|
}
|
|
|
|
return (
|
2024-07-28 10:43:45 +08:00
|
|
|
<span style={style} className={classNames(`${prefixCls}-only-unit`, { current })}>
|
2021-01-29 14:27:36 +08:00
|
|
|
{value}
|
2021-06-22 22:53:55 +08:00
|
|
|
</span>
|
2021-01-29 14:27:36 +08:00
|
|
|
);
|
2024-07-28 10:43:45 +08:00
|
|
|
};
|
2021-01-29 14:27:36 +08:00
|
|
|
|
|
|
|
export interface SingleNumberProps {
|
|
|
|
prefixCls: string;
|
|
|
|
value: string;
|
|
|
|
count: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getOffset(start: number, end: number, unit: -1 | 1) {
|
|
|
|
let index = start;
|
|
|
|
let offset = 0;
|
|
|
|
|
|
|
|
while ((index + 10) % 10 !== end) {
|
|
|
|
index += unit;
|
|
|
|
offset += unit;
|
|
|
|
}
|
|
|
|
|
|
|
|
return offset;
|
|
|
|
}
|
|
|
|
|
2024-07-28 10:43:45 +08:00
|
|
|
const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
|
2021-01-29 14:27:36 +08:00
|
|
|
const { prefixCls, count: originCount, value: originValue } = props;
|
|
|
|
const value = Number(originValue);
|
|
|
|
const count = Math.abs(originCount);
|
|
|
|
const [prevValue, setPrevValue] = React.useState(value);
|
|
|
|
const [prevCount, setPrevCount] = React.useState(count);
|
|
|
|
|
|
|
|
// ============================= Events =============================
|
2024-07-28 10:43:45 +08:00
|
|
|
const onTransitionEnd: React.TransitionEventHandler<HTMLSpanElement> = () => {
|
2021-01-29 14:27:36 +08:00
|
|
|
setPrevValue(value);
|
|
|
|
setPrevCount(count);
|
|
|
|
};
|
|
|
|
|
2023-10-03 05:44:09 +08:00
|
|
|
// Fallback if transition events are not supported
|
2021-01-29 14:27:36 +08:00
|
|
|
React.useEffect(() => {
|
2024-07-28 10:43:45 +08:00
|
|
|
const timer = setTimeout(onTransitionEnd, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
2021-01-29 14:27:36 +08:00
|
|
|
}, [value]);
|
|
|
|
|
|
|
|
// ============================= Render =============================
|
|
|
|
// Render unit list
|
|
|
|
let unitNodes: React.ReactElement[];
|
|
|
|
let offsetStyle: React.CSSProperties | undefined;
|
|
|
|
|
|
|
|
if (prevValue === value || Number.isNaN(value) || Number.isNaN(prevValue)) {
|
|
|
|
// Nothing to change
|
|
|
|
unitNodes = [<UnitNumber {...props} key={value} current />];
|
|
|
|
offsetStyle = {
|
|
|
|
transition: 'none',
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
unitNodes = [];
|
|
|
|
|
|
|
|
// Fill basic number units
|
|
|
|
const end = value + 10;
|
|
|
|
const unitNumberList: number[] = [];
|
|
|
|
for (let index = value; index <= end; index += 1) {
|
|
|
|
unitNumberList.push(index);
|
|
|
|
}
|
|
|
|
|
2024-11-13 11:12:39 +08:00
|
|
|
const unit = prevCount < count ? 1 : -1;
|
|
|
|
|
2021-01-29 14:27:36 +08:00
|
|
|
// Fill with number unit nodes
|
2022-11-19 13:47:33 +08:00
|
|
|
const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue);
|
2024-11-13 11:12:39 +08:00
|
|
|
|
|
|
|
// Cut list
|
|
|
|
const cutUnitNumberList =
|
|
|
|
unit < 0 ? unitNumberList.slice(0, prevIndex + 1) : unitNumberList.slice(prevIndex);
|
|
|
|
|
|
|
|
unitNodes = cutUnitNumberList.map((n, index) => {
|
2021-01-29 14:27:36 +08:00
|
|
|
const singleUnit = n % 10;
|
|
|
|
return (
|
|
|
|
<UnitNumber
|
|
|
|
{...props}
|
|
|
|
key={n}
|
|
|
|
value={singleUnit}
|
2024-11-13 11:12:39 +08:00
|
|
|
offset={unit < 0 ? index - prevIndex : index}
|
2021-01-29 14:27:36 +08:00
|
|
|
current={index === prevIndex}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
// Calculate container offset value
|
|
|
|
offsetStyle = {
|
|
|
|
transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span className={`${prefixCls}-only`} style={offsetStyle} onTransitionEnd={onTransitionEnd}>
|
|
|
|
{unitNodes}
|
|
|
|
</span>
|
|
|
|
);
|
2024-07-28 10:43:45 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default SingleNumber;
|