ant-design/components/badge/ScrollNumber.tsx

195 lines
5.1 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2016-07-14 13:29:50 +08:00
import { createElement, Component } from 'react';
import omit from 'omit.js';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { polyfill } from 'react-lifecycles-compat';
2015-11-23 22:58:11 +08:00
2018-07-23 23:16:19 +08:00
function getNumberArray(num: string | number | undefined | null) {
2018-12-07 20:02:01 +08:00
return num
? num
.toString()
.split('')
.reverse()
.map(i => Number(i))
: [];
2015-11-23 22:58:11 +08:00
}
export interface ScrollNumberProps {
prefixCls?: string;
className?: string;
2018-07-23 23:16:19 +08:00
count?: string | number | null;
displayComponent?: React.ReactElement<any>;
component?: string;
onAnimated?: Function;
2016-12-19 15:19:15 +08:00
style?: React.CSSProperties;
2018-07-23 23:16:19 +08:00
title?: string | number | null;
}
2017-11-22 11:25:05 +08:00
export interface ScrollNumberState {
animateStarted?: boolean;
2018-07-23 23:16:19 +08:00
count?: string | number | null;
2017-11-22 11:25:05 +08:00
}
class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
static defaultProps = {
count: null,
2018-12-07 20:02:01 +08:00
onAnimated() {},
2016-07-13 11:14:24 +08:00
};
static getDerivedStateFromProps(nextProps: ScrollNumberProps, nextState: ScrollNumberState) {
if ('count' in nextProps) {
if (nextState.count === nextProps.count) {
return null;
}
2019-03-11 16:54:29 +08:00
return {
animateStarted: true,
};
}
return null;
}
2016-07-14 13:29:50 +08:00
2019-03-08 15:34:29 +08:00
lastCount?: string | number | null;
2017-11-22 11:25:05 +08:00
constructor(props: ScrollNumberProps) {
2015-11-23 22:58:11 +08:00
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
};
}
2017-11-22 11:25:05 +08:00
getPositionByNum(num: number, i: number) {
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];
2019-03-08 15:34:29 +08:00
const lastDigit = getNumberArray(this.lastCount)[i];
2015-11-23 22:58:11 +08:00
// 同方向则在同一侧切换数字
2019-03-08 15:57:07 +08:00
if (Number(this.state.count) > Number(this.lastCount)) {
2015-11-23 22:58:11 +08:00
if (currentDigit >= lastDigit) {
return 10 + num;
}
return 20 + num;
}
if (currentDigit <= lastDigit) {
return 10 + num;
2015-11-23 22:58:11 +08:00
}
return num;
2015-11-23 22:58:11 +08:00
}
2019-03-08 15:34:29 +08:00
componentDidUpdate(_: any, prevState: ScrollNumberState) {
this.lastCount = prevState.count;
2019-03-11 16:54:29 +08:00
const { animateStarted } = this.state;
const { onAnimated } = this.props;
if (animateStarted) {
2019-03-11 17:13:59 +08:00
this.setState(
{
animateStarted: false,
count: this.props.count,
},
() => {
if (onAnimated) {
onAnimated();
}
},
);
2015-11-23 22:58:11 +08:00
}
}
2017-11-22 11:25:05 +08:00
renderNumberList(position: number) {
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++) {
2018-12-07 20:02:01 +08:00
const currentClassName = position === i ? 'current' : '';
childrenToReturn.push(
<p key={i.toString()} className={currentClassName}>
{i % 10}
</p>,
);
2015-11-23 22:58:11 +08:00
}
return childrenToReturn;
}
renderCurrentNumber(prefixCls: string, num: number, i: number) {
2015-11-23 22:58:11 +08:00
const position = this.getPositionByNum(num, i);
2018-12-07 20:02:01 +08:00
const removeTransition =
2019-03-08 15:34:29 +08:00
this.state.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
2018-12-07 20:02:01 +08:00
return createElement(
'span',
{
className: `${prefixCls}-only`,
style: {
transition: removeTransition ? 'none' : undefined,
msTransform: `translateY(${-position * 100}%)`,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
},
key: i,
2015-11-23 22:58:11 +08:00
},
2018-12-07 20:02:01 +08:00
this.renderNumberList(position),
);
2015-11-23 22:58:11 +08:00
}
renderNumberElement(prefixCls: string) {
const { count } = this.state;
if (count && Number(count) % 1 === 0) {
return getNumberArray(count)
.map((num, i) => this.renderCurrentNumber(prefixCls, num, i))
.reverse();
2015-11-23 22:58:11 +08:00
}
return count;
2015-11-23 22:58:11 +08:00
}
renderScrollNumber = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
2018-12-07 20:02:01 +08:00
className,
style,
title,
component = 'sup',
displayComponent,
} = this.props;
2016-07-08 10:14:45 +08:00
// fix https://fb.me/react-unknown-prop
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',
'displayComponent',
]);
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
const newProps = {
...restProps,
2017-08-31 10:55:25 +08:00
className: classNames(prefixCls, className),
title: title as string,
};
// 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' }} />
if (style && style.borderColor) {
newProps.style = {
...style,
boxShadow: `0 0 0 1px ${style.borderColor} inset`,
};
}
if (displayComponent) {
return React.cloneElement(displayComponent, {
className: classNames(
`${prefixCls}-custom-component`,
displayComponent.props && displayComponent.props.className,
),
});
}
2018-12-07 20:02:01 +08:00
return createElement(component as any, newProps, this.renderNumberElement(prefixCls));
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
2015-11-23 22:58:11 +08:00
}
}
polyfill(ScrollNumber);
export default ScrollNumber;