146 lines
		
	
	
	
		
			3.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			146 lines
		
	
	
	
		
			3.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
/*
 | 
						|
 | 
						|
`<StatusHeader>`
 | 
						|
================
 | 
						|
 | 
						|
Originally a part of `<Status>`, but extracted into a separate
 | 
						|
component for better documentation and maintainance by
 | 
						|
@kibi@glitch.social as a part of glitch-soc/mastodon.
 | 
						|
 | 
						|
*/
 | 
						|
 | 
						|
//  * * * * * * *  //
 | 
						|
 | 
						|
//  Imports
 | 
						|
//  -------
 | 
						|
 | 
						|
//  Package imports.
 | 
						|
import React from 'react';
 | 
						|
import PropTypes from 'prop-types';
 | 
						|
import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
						|
import { defineMessages, injectIntl } from 'react-intl';
 | 
						|
 | 
						|
//  Mastodon imports.
 | 
						|
import Avatar from '../../../mastodon/components/avatar';
 | 
						|
import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
 | 
						|
import DisplayName from '../../../mastodon/components/display_name';
 | 
						|
import IconButton from '../../../mastodon/components/icon_button';
 | 
						|
import VisibilityIcon from './visibility_icon';
 | 
						|
 | 
						|
//  * * * * * * *  //
 | 
						|
 | 
						|
//  Initial setup
 | 
						|
//  -------------
 | 
						|
 | 
						|
//  Messages for use with internationalization stuff.
 | 
						|
const messages = defineMessages({
 | 
						|
  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
 | 
						|
  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
 | 
						|
  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
 | 
						|
  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
 | 
						|
  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
 | 
						|
  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
 | 
						|
});
 | 
						|
 | 
						|
//  * * * * * * *  //
 | 
						|
 | 
						|
//  The component
 | 
						|
//  -------------
 | 
						|
 | 
						|
@injectIntl
 | 
						|
export default class StatusHeader extends React.PureComponent {
 | 
						|
 | 
						|
  static propTypes = {
 | 
						|
    status: ImmutablePropTypes.map.isRequired,
 | 
						|
    friend: ImmutablePropTypes.map,
 | 
						|
    mediaIcon: PropTypes.string,
 | 
						|
    collapsible: PropTypes.bool,
 | 
						|
    collapsed: PropTypes.bool,
 | 
						|
    parseClick: PropTypes.func.isRequired,
 | 
						|
    setExpansion: PropTypes.func.isRequired,
 | 
						|
    intl: PropTypes.object.isRequired,
 | 
						|
  };
 | 
						|
 | 
						|
  //  Handles clicks on collapsed button
 | 
						|
  handleCollapsedClick = (e) => {
 | 
						|
    const { collapsed, setExpansion } = this.props;
 | 
						|
    if (e.button === 0) {
 | 
						|
      setExpansion(collapsed ? null : false);
 | 
						|
      e.preventDefault();
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  //  Handles clicks on account name/image
 | 
						|
  handleAccountClick = (e) => {
 | 
						|
    const { status, parseClick } = this.props;
 | 
						|
    parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
 | 
						|
  }
 | 
						|
 | 
						|
  //  Rendering.
 | 
						|
  render () {
 | 
						|
    const {
 | 
						|
      status,
 | 
						|
      friend,
 | 
						|
      mediaIcon,
 | 
						|
      collapsible,
 | 
						|
      collapsed,
 | 
						|
      intl,
 | 
						|
    } = this.props;
 | 
						|
 | 
						|
    const account = status.get('account');
 | 
						|
 | 
						|
    return (
 | 
						|
      <header className='status__info'>
 | 
						|
        <a
 | 
						|
          href={account.get('url')}
 | 
						|
          target='_blank'
 | 
						|
          className='status__avatar'
 | 
						|
          onClick={this.handleAccountClick}
 | 
						|
        >
 | 
						|
          {
 | 
						|
            friend ? (
 | 
						|
              <AvatarOverlay account={account} friend={friend} />
 | 
						|
            ) : (
 | 
						|
              <Avatar account={account} size={48} />
 | 
						|
            )
 | 
						|
          }
 | 
						|
        </a>
 | 
						|
        <a
 | 
						|
          href={account.get('url')}
 | 
						|
          target='_blank'
 | 
						|
          className='status__display-name'
 | 
						|
          onClick={this.handleAccountClick}
 | 
						|
        >
 | 
						|
          <DisplayName account={account} />
 | 
						|
        </a>
 | 
						|
        <div className='status__info__icons'>
 | 
						|
          {mediaIcon ? (
 | 
						|
            <i
 | 
						|
              className={`fa fa-fw fa-${mediaIcon}`}
 | 
						|
              aria-hidden='true'
 | 
						|
            />
 | 
						|
          ) : null}
 | 
						|
          {(
 | 
						|
            <VisibilityIcon visibility={status.get('visibility')} />
 | 
						|
          )}
 | 
						|
          {collapsible ? (
 | 
						|
            <IconButton
 | 
						|
              className='status__collapse-button'
 | 
						|
              animate flip
 | 
						|
              active={collapsed}
 | 
						|
              title={
 | 
						|
                collapsed ?
 | 
						|
                intl.formatMessage(messages.uncollapse) :
 | 
						|
                intl.formatMessage(messages.collapse)
 | 
						|
              }
 | 
						|
              icon='angle-double-up'
 | 
						|
              onClick={this.handleCollapsedClick}
 | 
						|
            />
 | 
						|
          ) : null}
 | 
						|
        </div>
 | 
						|
 | 
						|
      </header>
 | 
						|
    );
 | 
						|
  }
 | 
						|
 | 
						|
}
 |