diff options
Diffstat (limited to 'app/javascript/mastodon/components/avatar.js')
-rw-r--r-- | app/javascript/mastodon/components/avatar.js | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js new file mode 100644 index 000000000..47f2715c7 --- /dev/null +++ b/app/javascript/mastodon/components/avatar.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +class Avatar extends React.PureComponent { + + constructor (props, context) { + super(props, context); + + this.state = { + hovering: false + }; + + this.handleMouseEnter = this.handleMouseEnter.bind(this); + this.handleMouseLeave = this.handleMouseLeave.bind(this); + } + + handleMouseEnter () { + if (this.props.animate) return; + this.setState({ hovering: true }); + } + + handleMouseLeave () { + if (this.props.animate) return; + this.setState({ hovering: false }); + } + + render () { + const { src, size, staticSrc, animate } = this.props; + const { hovering } = this.state; + + const style = { + ...this.props.style, + width: `${size}px`, + height: `${size}px`, + backgroundSize: `${size}px ${size}px` + }; + + if (hovering || animate) { + style.backgroundImage = `url(${src})`; + } else { + style.backgroundImage = `url(${staticSrc})`; + } + + return ( + <div + className='account__avatar' + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} + style={style} + /> + ); + } + +} + +Avatar.propTypes = { + src: PropTypes.string.isRequired, + staticSrc: PropTypes.string, + size: PropTypes.number.isRequired, + style: PropTypes.object, + animate: PropTypes.bool +}; + +Avatar.defaultProps = { + animate: false +}; + +export default Avatar; |