fix(module:badge): fix number transition (#21834)

* fix(module:badge): fix toggling animation

close #21674

* chore: remove log

* fix: timer leak

* fix: willUnmount

* test: cov
This commit is contained in:
偏右 2020-03-05 13:29:53 +08:00 committed by GitHub
parent bd97e7254a
commit 188b96971c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 8 deletions

View File

@ -70,6 +70,8 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
lastCount?: string | number | null;
private timeout?: number;
constructor(props: ScrollNumberProps) {
super(props);
this.state = {
@ -82,17 +84,26 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
this.lastCount = prevState.count;
const { animateStarted } = this.state;
if (animateStarted) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState(
(__, props) => ({
animateStarted: false,
count: props.count,
}),
this.onAnimated,
);
this.clearTimeout();
// Let browser has time to reset the scroller before actually
// performing the transition.
this.timeout = setTimeout(() => {
// eslint-disable-next-line react/no-did-update-set-state
this.setState(
(__, props) => ({
animateStarted: false,
count: props.count,
}),
this.onAnimated,
);
});
}
}
componentWillUnmount() {
this.clearTimeout();
}
getPositionByNum(num: number, i: number) {
const { count } = this.state;
const currentCount = Math.abs(Number(count));
@ -209,6 +220,13 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
render() {
return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
}
private clearTimeout(): void {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = undefined;
}
}
}
export default ScrollNumber;

View File

@ -27,6 +27,7 @@ describe('Badge', () => {
expect(wrapper).toMatchSnapshot();
wrapper = mount(<Badge count="3.5" />);
expect(wrapper).toMatchSnapshot();
expect(() => wrapper.unmount()).not.toThrow();
});
it('badge dot not showing count == 0', () => {