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

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/badge/ScrollNumber.tsx
View File

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

1
components/badge/__tests__/index.test.js
View File

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