2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2016-07-14 13:29:50 +08:00
|
|
|
import { createElement, Component } from 'react';
|
2016-09-10 17:17:55 +08:00
|
|
|
import omit from 'omit.js';
|
2017-07-03 16:57:11 +08:00
|
|
|
import classNames from 'classnames';
|
2015-11-23 22:58:11 +08:00
|
|
|
|
|
|
|
function getNumberArray(num) {
|
|
|
|
return num ?
|
2016-05-10 15:15:09 +08:00
|
|
|
num.toString()
|
|
|
|
.split('')
|
|
|
|
.reverse()
|
|
|
|
.map(i => Number(i)) : [];
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
|
2016-10-24 16:51:53 +08:00
|
|
|
export interface ScrollNumberProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
|
|
|
count?: string | number;
|
|
|
|
component?: string;
|
|
|
|
onAnimated?: Function;
|
2016-12-19 15:19:15 +08:00
|
|
|
style?: React.CSSProperties;
|
2016-10-24 16:51:53 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-scroll-number',
|
|
|
|
count: null,
|
2016-06-22 13:18:43 +08:00
|
|
|
onAnimated() {
|
|
|
|
},
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-07-14 13:29:50 +08:00
|
|
|
lastCount: any;
|
|
|
|
|
2015-11-23 22:58:11 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2015-11-24 15:29:57 +08:00
|
|
|
animateStarted: true,
|
2016-05-11 09:32:33 +08:00
|
|
|
count: props.count,
|
2015-11-23 22:58:11 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
getPositionByNum(num, i) {
|
2015-11-24 15:29:57 +08:00
|
|
|
if (this.state.animateStarted) {
|
2015-11-23 22:58:11 +08:00
|
|
|
return 10 + num;
|
|
|
|
}
|
2015-11-24 15:29:57 +08:00
|
|
|
const currentDigit = getNumberArray(this.state.count)[i];
|
2015-11-23 22:58:11 +08:00
|
|
|
const lastDigit = getNumberArray(this.lastCount)[i];
|
|
|
|
// 同方向则在同一侧切换数字
|
2015-11-24 15:29:57 +08:00
|
|
|
if (this.state.count > this.lastCount) {
|
2015-11-23 22:58:11 +08:00
|
|
|
if (currentDigit >= lastDigit) {
|
|
|
|
return 10 + num;
|
|
|
|
}
|
2016-01-07 14:21:29 +08:00
|
|
|
return 20 + num;
|
|
|
|
}
|
|
|
|
if (currentDigit <= lastDigit) {
|
|
|
|
return 10 + num;
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
2016-01-07 14:21:29 +08:00
|
|
|
return num;
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
2016-02-02 18:17:50 +08:00
|
|
|
if ('count' in nextProps) {
|
2016-02-02 18:23:00 +08:00
|
|
|
if (this.state.count === nextProps.count) {
|
|
|
|
return;
|
|
|
|
}
|
2015-11-24 15:29:57 +08:00
|
|
|
this.lastCount = this.state.count;
|
|
|
|
// 复原数字初始位置
|
|
|
|
this.setState({
|
|
|
|
animateStarted: true,
|
|
|
|
}, () => {
|
|
|
|
// 等待数字位置复原完毕
|
|
|
|
// 开始设置完整的数字
|
|
|
|
setTimeout(() => {
|
|
|
|
this.setState({
|
|
|
|
animateStarted: false,
|
|
|
|
count: nextProps.count,
|
|
|
|
}, () => {
|
2016-10-24 16:51:53 +08:00
|
|
|
const onAnimated = this.props.onAnimated;
|
|
|
|
if (onAnimated) {
|
|
|
|
onAnimated();
|
|
|
|
}
|
2015-11-24 15:29:57 +08:00
|
|
|
});
|
|
|
|
}, 5);
|
|
|
|
});
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-03-30 23:02:11 +08:00
|
|
|
renderNumberList(position) {
|
2016-10-24 12:04:26 +08:00
|
|
|
const childrenToReturn: React.ReactElement<any>[] = [];
|
2015-11-23 22:58:11 +08:00
|
|
|
for (let i = 0; i < 30; i++) {
|
2016-10-24 12:04:26 +08:00
|
|
|
const currentClassName = (position === i) ? 'current' : '';
|
2016-10-24 11:48:25 +08:00
|
|
|
childrenToReturn.push(<p key={i.toString()} className={currentClassName}>{i % 10}</p>);
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
return childrenToReturn;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderCurrentNumber(num, i) {
|
|
|
|
const position = this.getPositionByNum(num, i);
|
2015-11-24 15:29:57 +08:00
|
|
|
const removeTransition = this.state.animateStarted ||
|
|
|
|
(getNumberArray(this.lastCount)[i] === undefined);
|
2015-11-23 22:58:11 +08:00
|
|
|
return createElement('span', {
|
|
|
|
className: `${this.props.prefixCls}-only`,
|
|
|
|
style: {
|
2015-11-24 15:29:57 +08:00
|
|
|
transition: removeTransition && 'none',
|
2017-03-24 14:33:56 +08:00
|
|
|
msTransform: `translateY(${-position * 100}%)`,
|
2017-02-03 14:20:42 +08:00
|
|
|
WebkitTransform: `translateY(${-position * 100}%)`,
|
|
|
|
transform: `translateY(${-position * 100}%)`,
|
2015-11-23 22:58:11 +08:00
|
|
|
},
|
|
|
|
key: i,
|
2016-03-30 23:02:11 +08:00
|
|
|
}, this.renderNumberList(position));
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
renderNumberElement() {
|
2015-11-24 15:29:57 +08:00
|
|
|
const state = this.state;
|
|
|
|
if (!state.count || isNaN(state.count)) {
|
|
|
|
return state.count;
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
2015-11-24 15:29:57 +08:00
|
|
|
return getNumberArray(state.count)
|
|
|
|
.map((num, i) => this.renderCurrentNumber(num, i)).reverse();
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-07-03 16:57:11 +08:00
|
|
|
const { prefixCls, className, style, component = 'sup' } = this.props;
|
2016-07-08 10:14:45 +08:00
|
|
|
// fix https://fb.me/react-unknown-prop
|
2017-07-03 16:57:11 +08:00
|
|
|
const restProps = omit(this.props, [
|
2016-07-08 10:14:45 +08:00
|
|
|
'count',
|
|
|
|
'onAnimated',
|
2016-07-08 16:34:02 +08:00
|
|
|
'component',
|
|
|
|
'prefixCls',
|
2017-07-03 16:57:11 +08:00
|
|
|
]);
|
|
|
|
const newProps = {
|
|
|
|
...restProps,
|
|
|
|
className: classNames({
|
|
|
|
[`${prefixCls}`]: !!prefixCls,
|
|
|
|
[`${className}`]: !!className,
|
|
|
|
}),
|
|
|
|
};
|
2017-02-03 14:20:42 +08:00
|
|
|
// allow specify the border
|
|
|
|
// mock border-color by box-shadow for compatible with old usage:
|
|
|
|
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
|
2017-07-03 16:57:11 +08:00
|
|
|
if (style && style.borderColor) {
|
|
|
|
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
|
2017-02-03 14:20:42 +08:00
|
|
|
}
|
2016-01-07 14:21:29 +08:00
|
|
|
return createElement(
|
2017-07-03 16:57:11 +08:00
|
|
|
component as any,
|
|
|
|
newProps,
|
2017-03-23 21:15:49 +08:00
|
|
|
this.renderNumberElement(),
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2015-11-23 22:58:11 +08:00
|
|
|
}
|
|
|
|
}
|