mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-18 08:00:53 +08:00
Code Issues Actions 17 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

56
components/badge/ScrollNumber.tsx
View File

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