Rewrite AvatarOverlay component with React hooks (#24543)
parent
cf3fa1e814
commit
9f8d34620b
3 changed files with 53 additions and 55 deletions
@ -1,51 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { autoPlayGif } from '../initial_state'; |
||||
import Avatar from './avatar'; |
||||
|
||||
export default class AvatarOverlay extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
account: ImmutablePropTypes.map.isRequired, |
||||
friend: ImmutablePropTypes.map.isRequired, |
||||
animate: PropTypes.bool, |
||||
size: PropTypes.number, |
||||
baseSize: PropTypes.number, |
||||
overlaySize: PropTypes.number, |
||||
}; |
||||
|
||||
static defaultProps = { |
||||
animate: autoPlayGif, |
||||
size: 46, |
||||
baseSize: 36, |
||||
overlaySize: 24, |
||||
}; |
||||
|
||||
state = { |
||||
hovering: false, |
||||
}; |
||||
|
||||
handleMouseEnter = () => { |
||||
if (this.props.animate) return; |
||||
this.setState({ hovering: true }); |
||||
}; |
||||
|
||||
handleMouseLeave = () => { |
||||
if (this.props.animate) return; |
||||
this.setState({ hovering: false }); |
||||
}; |
||||
|
||||
render() { |
||||
const { account, friend, animate, size, baseSize, overlaySize } = this.props; |
||||
const { hovering } = this.state; |
||||
|
||||
return ( |
||||
<div className='account__avatar-overlay' style={{ width: size, height: size }}> |
||||
<div className='account__avatar-overlay-base'><Avatar animate={hovering || animate} account={account} size={baseSize} /></div> |
||||
<div className='account__avatar-overlay-overlay'><Avatar animate={hovering || animate} account={friend} size={overlaySize} /></div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,51 @@ |
||||
import React from 'react'; |
||||
import type { Account } from '../../types/resources'; |
||||
import { useHovering } from '../../hooks/useHovering'; |
||||
import { autoPlayGif } from '../initial_state'; |
||||
|
||||
type Props = { |
||||
account: Account; |
||||
friend: Account; |
||||
size?: number; |
||||
baseSize?: number; |
||||
overlaySize?: number; |
||||
}; |
||||
|
||||
export const AvatarOverlay: React.FC<Props> = ({ |
||||
account, |
||||
friend, |
||||
size = 46, |
||||
baseSize = 36, |
||||
overlaySize = 24, |
||||
}) => { |
||||
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif); |
||||
const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static'); |
||||
const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static'); |
||||
|
||||
return ( |
||||
<div |
||||
className='account__avatar-overlay' style={{ width: size, height: size }} |
||||
onMouseEnter={handleMouseEnter} |
||||
onMouseLeave={handleMouseLeave} |
||||
> |
||||
<div className='account__avatar-overlay-base'> |
||||
<div |
||||
className='account__avatar' |
||||
style={{ width: `${baseSize}px`, height: `${baseSize}px` }} |
||||
> |
||||
{accountSrc && <img src={accountSrc} alt={account?.get('acct')} />} |
||||
</div> |
||||
</div> |
||||
<div className='account__avatar-overlay-overlay'> |
||||
<div |
||||
className='account__avatar' |
||||
style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }} |
||||
> |
||||
{friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default AvatarOverlay; |
Loading…
Reference in new issue