Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrite AvatarOverlay component with React hooks #24543

Merged
merged 3 commits into from
Apr 17, 2023

Conversation

takayamaki
Copy link
Contributor

@takayamaki takayamaki commented Apr 15, 2023

This PR rewrites AvatarOverlay component with React hooks.
And fix animation behavior when component hoverd.

@takayamaki takayamaki force-pushed the refactor/AvatarOverlay branch from 49c7ae3 to d9844b0 Compare April 15, 2023 08:50
hovering: false,
};

handleMouseEnter = () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both event handler function object of handleMouseEnter and handleMouseLeave are unused this component.


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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to pass animate arguments to Avatar component why they have hovering state and its event handler in themself.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the event handlers were not hooked up but I think the intent was that both avatars would play at the same time when the overlay was hovered.

Copy link
Contributor Author

@takayamaki takayamaki Apr 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the event handlers were not hooked up but I think the intent was that both avatars would play at the same time when the overlay was hovered.

I seem so too.
I will fix it

This movie is behavior of current main branch(e5c0b16).

admin.@admin@localhost_3000.-.Mastodon.Dev.-.Google.Chrome.2023-04-16.14-58-24.mp4

Copy link
Contributor Author

@takayamaki takayamaki Apr 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made a commit.
b1397f8

admin.@admin@localhost_3000.-.Mastodon.Dev.-.Google.Chrome.2023-04-16.16-59-09.mp4

static propTypes = {
account: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map.isRequired,
animate: PropTypes.bool,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

animate argument is unused.

statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;

<div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>

const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);

@takayamaki takayamaki force-pushed the refactor/AvatarOverlay branch from d9844b0 to d770fd2 Compare April 15, 2023 09:07
@takayamaki takayamaki force-pushed the refactor/AvatarOverlay branch from d770fd2 to b1397f8 Compare April 16, 2023 08:35
@takayamaki takayamaki requested a review from Gargron April 17, 2023 04:40
@Gargron Gargron merged commit 9f8d346 into mastodon:main Apr 17, 2023
@takayamaki takayamaki deleted the refactor/AvatarOverlay branch April 17, 2023 09:53
michealmikeyb pushed a commit to michealmikeyb/mastodon that referenced this pull request May 3, 2023
skerit pushed a commit to 11ways/mastodon that referenced this pull request Jul 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants