gab-social/app/javascript/gabsocial/components/avatar.js

68 lines
1.8 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { Map as ImmutableMap } from 'immutable'
import { autoPlayGif } from '../initial_state'
import Image from './image'
2020-02-28 15:20:47 +00:00
export default
class Avatar extends ImmutablePureComponent {
2020-02-19 23:57:07 +00:00
static propTypes = {
account: ImmutablePropTypes.map,
size: PropTypes.number.isRequired,
animate: PropTypes.bool,
}
static defaultProps = {
animate: autoPlayGif,
size: 40,
}
state = {
hovering: false,
2020-03-14 17:31:29 +00:00
sameImg: !this.props.account ? false : this.props.account.get('avatar') === this.props.account.get('avatar_static'),
}
componentDidUpdate (prevProps) {
if (prevProps.account !== this.props.account) {
this.setState({
sameImg: !this.props.account ? false : this.props.account.get('avatar') === this.props.account.get('avatar_static'),
})
}
2020-02-19 23:57:07 +00:00
}
handleMouseEnter = () => {
2020-02-28 15:20:47 +00:00
// : todo : user popover
2020-02-19 23:57:07 +00:00
this.setState({ hovering: true })
}
handleMouseLeave = () => {
this.setState({ hovering: false })
}
2020-02-25 16:04:44 +00:00
render() {
2020-02-19 23:57:07 +00:00
const { account, size, animate } = this.props
const { hovering, sameImg } = this.state
const shouldAnimate = animate || !sameImg
const options = {
2020-04-08 02:06:59 +01:00
alt: !account ? 'Avatar' : account.get('display_name'),
2020-03-04 03:45:16 +00:00
className: [_s.default, _s.circle, _s.overflowHidden].join(' '),
2020-02-19 23:57:07 +00:00
onMouseEnter: shouldAnimate ? this.handleMouseEnter : undefined,
onMouseLeave: shouldAnimate ? this.handleMouseLeave : undefined,
2020-03-14 17:31:29 +00:00
src: !account ? undefined : account.get((hovering || animate) ? 'avatar' : 'avatar_static'),
alt: !account ? undefined : account.get('display_name'),
2020-02-19 23:57:07 +00:00
style: {
width: `${size}px`,
height: `${size}px`,
},
}
return (
<Image {...options} />
)
}
}