logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: e7ab9bf8b4e4897b99937d43b9e4810462dd2714
parent: 894da3dcca781e27ce9c5130f1021526ac8a6887
Author: Nolan Lawson <nolan@nolanlawson.com>
Date:   Mon, 16 Oct 2017 00:30:09 -0700

Refactor and simplify icon_button.js (#5413)


Diffstat:

Mapp/javascript/mastodon/components/icon_button.js56++++++++++++++++++++++++++++----------------------------
1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js @@ -2,6 +2,7 @@ import React from 'react'; import Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; export default class IconButton extends React.PureComponent { @@ -50,42 +51,41 @@ export default class IconButton extends React.PureComponent { ...(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) { - classes.push('active'); - } - - if (this.props.disabled) { - 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); - } + const classes = classNames(className, 'icon-button', { + active, + disabled, + inverted, + overlayed: overlay, + }); 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 }) => <button - aria-label={this.props.title} - aria-pressed={this.props.pressed} - aria-expanded={this.props.expanded} - title={this.props.title} - className={classes.join(' ')} + aria-label={title} + aria-pressed={pressed} + aria-expanded={expanded} + title={title} + className={classes} onClick={this.handleClick} 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> } </Motion>