Avoid unnecessary Motion components in icon_button.js (#5544)

main
Nolan Lawson 2017-10-27 10:08:07 -07:00 committed by Eugen Rochko
parent ec487166db
commit e843f62f47
1 changed files with 19 additions and 0 deletions

View File

@ -72,6 +72,25 @@ export default class IconButton extends React.PureComponent {
overlayed: overlay, overlayed: overlay,
}); });
if (!animate) {
// Perf optimization: avoid unnecessary <Motion> components unless
// we actually need to animate.
return (
<button
aria-label={title}
aria-pressed={pressed}
aria-expanded={expanded}
title={title}
className={classes}
onClick={this.handleClick}
style={style}
tabIndex={tabIndex}
>
<i className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
</button>
);
}
return ( return (
<Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}> <Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
{({ rotate }) => {({ rotate }) =>