app/javascript/themes/glitch/components/status_header.js

   1 //  Package imports.
   2 import React from 'react';
   3 import PropTypes from 'prop-types';
   4 import ImmutablePropTypes from 'react-immutable-proptypes';
   5 import { defineMessages, injectIntl } from 'react-intl';
   6
   7 //  Mastodon imports.
   8 import Avatar from './avatar';
   9 import AvatarOverlay from './avatar_overlay';
  10 import DisplayName from './display_name';
  11 import IconButton from './icon_button';
  12 import VisibilityIcon from './status_visibility_icon';
  13
  14 //  Messages for use with internationalization stuff.
  15 const messages = defineMessages({
  16   collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
  17   uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
  18   public: { id: 'privacy.public.short', defaultMessage: 'Public' },
  19   unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
  20   private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
  21   direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
  22 });
  23
  24 @injectIntl
  25 export default class StatusHeader extends React.PureComponent {
  26
  27   static propTypes = {
  28     status: ImmutablePropTypes.map.isRequired,
  29     friend: ImmutablePropTypes.map,
  30     mediaIcon: PropTypes.string,
  31     collapsible: PropTypes.bool,
  32     collapsed: PropTypes.bool,
  33     parseClick: PropTypes.func.isRequired,
  34     setExpansion: PropTypes.func.isRequired,
  35     intl: PropTypes.object.isRequired,
  36   };
  37
  38   //  Handles clicks on collapsed button
  39   handleCollapsedClick = (e) => {
  40     const { collapsed, setExpansion } = this.props;
  41     if (e.button === 0) {
  42       setExpansion(collapsed ? null : false);
  43       e.preventDefault();
  44     }
  45   }
  46
  47   //  Handles clicks on account name/image
  48   handleAccountClick = (e) => {
  49     const { status, parseClick } = this.props;
  50     parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
  51   }
  52
  53   //  Rendering.
  54   render () {
  55     const {
  56       status,
  57       friend,
  58       mediaIcon,
  59       collapsible,
  60       collapsed,
  61       intl,
  62     } = this.props;
  63
  64     const account = status.get('account');
  65
  66     return (
  67       <header className='status__info'>
  68         <a
  69           href={account.get('url')}
  70           target='_blank'
  71           className='status__avatar'
  72           onClick={this.handleAccountClick}
  73         >
  74           {
  75             friend ? (
  76               <AvatarOverlay account={account} friend={friend} />
  77             ) : (
  78               <Avatar account={account} size={48} />
  79             )
  80           }
  81         </a>
  82         <a
  83           href={account.get('url')}
  84           target='_blank'
  85           className='status__display-name'
  86           onClick={this.handleAccountClick}
  87         >
  88           <DisplayName account={account} />
  89         </a>
  90         <div className='status__info__icons'>
  91           {mediaIcon ? (
  92             <i
  93               className={`fa fa-fw fa-${mediaIcon}`}
  94               aria-hidden='true'
  95             />
  96           ) : null}
  97           {(
  98             <VisibilityIcon visibility={status.get('visibility')} />
  99           )}
 100           {collapsible ? (
 101             <IconButton
 102               className='status__collapse-button'
 103               animate flip
 104               active={collapsed}
 105               title={
 106                 collapsed ?
 107                 intl.formatMessage(messages.uncollapse) :
 108                 intl.formatMessage(messages.collapse)
 109               }
 110               icon='angle-double-up'
 111               onClick={this.handleCollapsedClick}
 112             />
 113           ) : null}
 114         </div>
 115
 116       </header>
 117     );
 118   }
 119
 120 }