|
|
|
@ -65,61 +65,6 @@ const processBio = (data) => {
|
|
|
|
|
return props;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const makeMapStateToProps = () => {
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
|
autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return mapStateToProps;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class Avatar extends ImmutablePureComponent {
|
|
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
|
account: ImmutablePropTypes.map.isRequired,
|
|
|
|
|
autoPlayGif: PropTypes.bool.isRequired,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
|
isHovered: false,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleMouseOver = () => {
|
|
|
|
|
if (this.state.isHovered) return;
|
|
|
|
|
this.setState({ isHovered: true });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleMouseOut = () => {
|
|
|
|
|
if (!this.state.isHovered) return;
|
|
|
|
|
this.setState({ isHovered: false });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { account, autoPlayGif } = this.props;
|
|
|
|
|
const { isHovered } = this.state;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
|
|
|
|
|
{({ radius }) =>
|
|
|
|
|
<a // eslint-disable-line jsx-a11y/anchor-has-content
|
|
|
|
|
href={account.get('url')}
|
|
|
|
|
className='account__header__avatar'
|
|
|
|
|
target='_blank'
|
|
|
|
|
rel='noopener'
|
|
|
|
|
style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
|
|
|
|
|
onMouseOver={this.handleMouseOver}
|
|
|
|
|
onMouseOut={this.handleMouseOut}
|
|
|
|
|
onFocus={this.handleMouseOver}
|
|
|
|
|
onBlur={this.handleMouseOut}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
</Motion>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@connect(makeMapStateToProps)
|
|
|
|
|
@injectIntl
|
|
|
|
|
export default class Header extends ImmutablePureComponent {
|
|
|
|
|
|
|
|
|
|