Fix icon buttons animating when they haven't changed (#36824)

This commit is contained in:
diondiondion 2025-11-11 12:10:27 +01:00 committed by GitHub
parent 84cdb6cc66
commit b53ee04475
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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',
}); });