logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

avatar.js (1596B)


  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import ImmutablePropTypes from 'react-immutable-proptypes';
  4. import { autoPlayGif } from '../initial_state';
  5. export default class Avatar extends React.PureComponent {
  6. static propTypes = {
  7. account: ImmutablePropTypes.map.isRequired,
  8. size: PropTypes.number.isRequired,
  9. style: PropTypes.object,
  10. inline: PropTypes.bool,
  11. animate: PropTypes.bool,
  12. };
  13. static defaultProps = {
  14. animate: autoPlayGif,
  15. size: 20,
  16. inline: false,
  17. };
  18. state = {
  19. hovering: false,
  20. };
  21. handleMouseEnter = () => {
  22. if (this.props.animate) return;
  23. this.setState({ hovering: true });
  24. }
  25. handleMouseLeave = () => {
  26. if (this.props.animate) return;
  27. this.setState({ hovering: false });
  28. }
  29. render () {
  30. const { account, size, animate, inline } = this.props;
  31. const { hovering } = this.state;
  32. const src = account.get('avatar');
  33. const staticSrc = account.get('avatar_static');
  34. let className = 'account__avatar';
  35. if (inline) {
  36. className = className + ' account__avatar-inline';
  37. }
  38. const style = {
  39. ...this.props.style,
  40. width: `${size}px`,
  41. height: `${size}px`,
  42. backgroundSize: `${size}px ${size}px`,
  43. };
  44. if (hovering || animate) {
  45. style.backgroundImage = `url(${src})`;
  46. } else {
  47. style.backgroundImage = `url(${staticSrc})`;
  48. }
  49. return (
  50. <div
  51. className={className}
  52. onMouseEnter={this.handleMouseEnter}
  53. onMouseLeave={this.handleMouseLeave}
  54. style={style}
  55. />
  56. );
  57. }
  58. }