mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
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:
parent
bd97e7254a
commit
188b96971c
@ -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;
|
||||
|
@ -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', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user