Hovercard: refactor detailed status

better-thread-display
Alex Gleason 2020-09-11 11:42:02 -05:00
rodzic 1d90950e59
commit 24bf880e0b
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 14 dodań i 32 usunięć

Wyświetl plik

@ -16,10 +16,8 @@ import classNames from 'classnames';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import PollContainer from 'soapbox/containers/poll_container'; import PollContainer from 'soapbox/containers/poll_container';
import { StatusInteractionBar } from './status_interaction_bar'; import { StatusInteractionBar } from './status_interaction_bar';
import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
import { isMobile } from 'soapbox/is_mobile';
import { debounce } from 'lodash';
import { getDomain } from 'soapbox/utils/accounts'; import { getDomain } from 'soapbox/utils/accounts';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
export default class DetailedStatus extends ImmutablePureComponent { export default class DetailedStatus extends ImmutablePureComponent {
@ -42,7 +40,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
state = { state = {
height: null, height: null,
profileCardVisible: false,
}; };
handleOpenVideo = (media, startTime) => { handleOpenVideo = (media, startTime) => {
@ -86,24 +83,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
} }
showProfileHoverCard = debounce(() => {
this.setState({ profileCardVisible: true });
}, 1200);
handleProfileHover = e => {
if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
}
handleProfileLeave = e => {
this.showProfileHoverCard.cancel();
this.setState({ profileCardVisible: false });
}
render() { render() {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
const outerStyle = { boxSizing: 'border-box' }; const outerStyle = { boxSizing: 'border-box' };
const { compact } = this.props; const { compact } = this.props;
const { profileCardVisible } = this.state;
const favicon = status.getIn(['account', 'pleroma', 'favicon']); const favicon = status.getIn(['account', 'pleroma', 'favicon']);
const domain = getDomain(status.get('account')); const domain = getDomain(status.get('account'));
@ -181,7 +164,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
return ( return (
<div style={outerStyle}> <div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', { compact })}> <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
<div className='detailed-status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}> <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
<div className='detailed-status__profile'>
<div className='detailed-status__display-name'> <div className='detailed-status__display-name'>
<NavLink to={`/@${status.getIn(['account', 'acct'])}`}> <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
<div className='detailed-status__display-avatar'> <div className='detailed-status__display-avatar'>
@ -192,10 +176,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' /> <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
</DisplayName> </DisplayName>
</div> </div>
{ profileCardVisible &&
<ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
}
</div> </div>
</HoverRefWrapper>
{status.get('group') && ( {status.get('group') && (
<div className='status__meta'> <div className='status__meta'>