mastodon-glitch/app/javascript/flavours/glitch/components/icon_button.js

138 lines
3.2 KiB
JavaScript
Raw Normal View History

import React from 'react';
2017-12-04 07:26:40 +00:00
import Motion from 'flavours/glitch/util/optional_motion';
import spring from 'react-motion/lib/spring';
import PropTypes from 'prop-types';
import classNames from 'classnames';
2016-08-31 20:58:10 +00:00
export default class IconButton extends React.PureComponent {
2016-08-31 20:58:10 +00:00
static propTypes = {
className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
pressed: PropTypes.bool,
expanded: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
2017-06-22 02:05:24 +00:00
flip: PropTypes.bool,
overlay: PropTypes.bool,
tabIndex: PropTypes.string,
label: PropTypes.string,
};
static defaultProps = {
size: 18,
active: false,
disabled: false,
animate: false,
overlay: false,
tabIndex: '0',
};
handleClick = (e) => {
2016-08-31 20:58:10 +00:00
e.preventDefault();
if (!this.props.disabled) {
this.props.onClick(e);
}
}
2016-08-31 20:58:10 +00:00
render () {
let style = {
2016-09-29 22:00:45 +00:00
fontSize: `${this.props.size}px`,
height: `${this.props.size * 1.28571429}px`,
2016-11-02 21:29:19 +00:00
lineHeight: `${this.props.size}px`,
...this.props.style,
...(this.props.active ? this.props.activeStyle : {}),
2016-09-29 22:00:45 +00:00
};
if (!this.props.label) {
style.width = `${this.props.size * 1.28571429}px`;
} else {
style.textAlign = 'left';
}
2016-09-29 22:00:45 +00:00
const {
active,
animate,
className,
disabled,
expanded,
icon,
inverted,
flip,
overlay,
pressed,
tabIndex,
title,
} = this.props;
const classes = classNames(className, 'icon-button', {
active,
disabled,
inverted,
overlayed: overlay,
});
const flipDeg = flip ? -180 : -360;
const rotateDeg = active ? flipDeg : 0;
2017-09-20 18:34:11 +00:00
const motionDefaultStyle = {
rotate: rotateDeg,
};
const springOpts = {
stiffness: this.props.flip ? 60 : 120,
damping: 7,
};
const motionStyle = {
2017-10-16 19:13:34 +00:00
rotate: animate ? spring(rotateDeg, springOpts) : 0,
2017-09-20 18:34:11 +00:00
};
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>
);
}
2016-08-31 20:58:10 +00:00
return (
2017-10-16 19:13:34 +00:00
<Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
2017-01-11 03:21:49 +00:00
{({ rotate }) =>
(<button
aria-label={title}
aria-pressed={pressed}
aria-expanded={expanded}
title={title}
className={classes}
2017-01-11 03:21:49 +00:00
onClick={this.handleClick}
style={style}
tabIndex={tabIndex}
>
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
{this.props.label}
</button>)
2017-01-11 03:21:49 +00:00
}
</Motion>
2016-08-31 20:58:10 +00:00
);
}
}