mirror of
https://github.com/mastodon/mastodon.git
synced 2025-11-27 18:10:58 +00:00
Fix icon buttons animating when they haven't changed (#36824)
This commit is contained in:
parent
84cdb6cc66
commit
b53ee04475
|
|
@ -2,6 +2,8 @@ import { useCallback, forwardRef } from 'react';
|
||||||
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { usePrevious } from '../hooks/usePrevious';
|
||||||
|
|
||||||
import { AnimatedNumber } from './animated_number';
|
import { AnimatedNumber } from './animated_number';
|
||||||
import type { IconProp } from './icon';
|
import type { IconProp } from './icon';
|
||||||
import { Icon } from './icon';
|
import { Icon } from './icon';
|
||||||
|
|
@ -91,12 +93,15 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
|
||||||
...(active ? activeStyle : {}),
|
...(active ? activeStyle : {}),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const previousActive = usePrevious(active) ?? active;
|
||||||
|
const shouldAnimate = animate && active !== previousActive;
|
||||||
|
|
||||||
const classes = classNames(className, 'icon-button', {
|
const classes = classNames(className, 'icon-button', {
|
||||||
active,
|
active,
|
||||||
disabled,
|
disabled,
|
||||||
inverted,
|
inverted,
|
||||||
activate: animate && active,
|
activate: shouldAnimate && active,
|
||||||
deactivate: animate && !active,
|
deactivate: shouldAnimate && !active,
|
||||||
overlayed: overlay,
|
overlayed: overlay,
|
||||||
'icon-button--with-counter': typeof counter !== 'undefined',
|
'icon-button--with-counter': typeof counter !== 'undefined',
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user