mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

refactor: update lifecycle method for Badge

Browse Source
This commit is contained in:
zy410419243 2019-03-07 16:03:02 +08:00
parent ad30c02710
commit 4dc533c202
1 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/badge/ScrollNumber.tsx
View File

@ -3,6 +3,7 @@ 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';
function getNumberArray(num: string | number | undefined | null) {
return num
@ -30,13 +31,24 @@ export interface ScrollNumberState {
count?: string | number | null;
}
export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
let lastCount: any;
class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
static defaultProps = {
count: null,
onAnimated() {},
};
lastCount: any;
static getDerivedStateFromProps(nextProps: ScrollNumberProps, nextState: ScrollNumberState) {
if ('count' in nextProps) {
if (nextState.count === nextProps.count) {
return null;
}
lastCount = nextState.count;
return { animateStarted: true };
}
return null;
}
constructor(props: ScrollNumberProps) {
super(props);
@ -51,9 +63,9 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
return 10 + num;
}
const currentDigit = getNumberArray(this.state.count)[i];
const lastDigit = getNumberArray(this.lastCount)[i];
const lastDigit = getNumberArray(lastCount)[i];
// 同方向则在同一侧切换数字
if (this.state.count! > this.lastCount) {
if (this.state.count! > lastCount) {
if (currentDigit >= lastDigit) {
return 10 + num;
}
@ -65,36 +77,14 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
return num;
}
componentWillReceiveProps(nextProps: ScrollNumberProps) {
if ('count' in nextProps) {
if (this.state.count === nextProps.count) {
return;
}
this.lastCount = this.state.count;
// 复原数字初始位置
this.setState(
{
animateStarted: true,
},
() => {
// 等待数字位置复原完毕
// 开始设置完整的数字
setTimeout(() => {
this.setState(
{
animateStarted: false,
count: nextProps.count,
},
() => {
const onAnimated = this.props.onAnimated;
if (onAnimated) {
onAnimated();
}
},
);
}, 5);
},
);
componentDidUpdate() {
if (this.state.animateStarted) {
this.setState({ animateStarted: false, count: this.props.count }, () => {
const onAnimated = this.props.onAnimated;
if (onAnimated) {
onAnimated();
}
});
}
}
@ -114,7 +104,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
renderCurrentNumber(prefixCls: string, num: number, i: number) {
const position = this.getPositionByNum(num, i);
const removeTransition =
this.state.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
this.state.animateStarted || getNumberArray(lastCount)[i] === undefined;
return createElement(
'span',
{
@ -189,3 +179,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
}
}
polyfill(ScrollNumber);
export default ScrollNumber;