nrd.li/mastodon
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactor and simplify icon_button.js (#5413)

Browse source
This commit is contained in:
Nolan Lawson 2017-10-16 00:30:09 -07:00 committed by Eugen Rochko
parent 894da3dcca
commit e7ab9bf8b4
1 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/javascript/mastodon/components/icon_button.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import Motion from 'react-motion/lib/Motion'; import Motion from 'react-motion/lib/Motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class IconButton extends React.PureComponent { export default class IconButton extends React.PureComponent {
@ -50,42 +51,41 @@ export default class IconButton extends React.PureComponent {
...(this.props.active ? this.props.activeStyle : {}), ...(this.props.active ? this.props.activeStyle : {}),
}; };
const classes = ['icon-button']; const {
active,
animate,
className,
disabled,
expanded,
icon,
inverted,
overlay,
pressed,
tabIndex,
title,
} = this.props;
if (this.props.active) { const classes = classNames(className, 'icon-button', {
classes.push('active'); active,
} disabled,
inverted,
if (this.props.disabled) { overlayed: overlay,
classes.push('disabled'); });
}
if (this.props.inverted) {
classes.push('inverted');
}
if (this.props.overlay) {
classes.push('overlayed');
}
if (this.props.className) {
classes.push(this.props.className);
}
return ( return (
<Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.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 }) =>
<button <button
aria-label={this.props.title} aria-label={title}
aria-pressed={this.props.pressed} aria-pressed={pressed}
aria-expanded={this.props.expanded} aria-expanded={expanded}
title={this.props.title} title={title}
className={classes.join(' ')} className={classes}
onClick={this.handleClick} onClick={this.handleClick}
style={style} style={style}
tabIndex={this.props.tabIndex} tabIndex={tabIndex}
> >
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
</button> </button>
} }
</Motion> </Motion>