app/javascript/mastodon/components/status_action_bar.js

   1 import React from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import PropTypes from 'prop-types';
   4 import IconButton from './icon_button';
   5 import DropdownMenu from './dropdown_menu';
   6 import { defineMessages, injectIntl } from 'react-intl';
   7
   8 const messages = defineMessages({
   9   delete: { id: 'status.delete', defaultMessage: 'Delete' },
  10   mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
  11   mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
  12   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
  13   reply: { id: 'status.reply', defaultMessage: 'Reply' },
  14   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
  15   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
  16   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
  17   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
  18   open: { id: 'status.open', defaultMessage: 'Expand this status' },
  19   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
  20   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
  21   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
  22 });
  23
  24 class StatusActionBar extends React.PureComponent {
  25
  26   static contextTypes = {
  27     router: PropTypes.object,
  28   };
  29
  30   static propTypes = {
  31     status: ImmutablePropTypes.map.isRequired,
  32     onReply: PropTypes.func,
  33     onFavourite: PropTypes.func,
  34     onReblog: PropTypes.func,
  35     onDelete: PropTypes.func,
  36     onMention: PropTypes.func,
  37     onMute: PropTypes.func,
  38     onBlock: PropTypes.func,
  39     onReport: PropTypes.func,
  40     onMuteConversation: PropTypes.func,
  41     me: PropTypes.number.isRequired,
  42     withDismiss: PropTypes.bool,
  43     intl: PropTypes.object.isRequired,
  44   };
  45
  46   handleReplyClick = () => {
  47     this.props.onReply(this.props.status, this.context.router);
  48   }
  49
  50   handleFavouriteClick = () => {
  51     this.props.onFavourite(this.props.status);
  52   }
  53
  54   handleReblogClick = (e) => {
  55     this.props.onReblog(this.props.status, e);
  56   }
  57
  58   handleDeleteClick = () => {
  59     this.props.onDelete(this.props.status);
  60   }
  61
  62   handleMentionClick = () => {
  63     this.props.onMention(this.props.status.get('account'), this.context.router);
  64   }
  65
  66   handleMuteClick = () => {
  67     this.props.onMute(this.props.status.get('account'));
  68   }
  69
  70   handleBlockClick = () => {
  71     this.props.onBlock(this.props.status.get('account'));
  72   }
  73
  74   handleOpen = () => {
  75     this.context.router.push(`/statuses/${this.props.status.get('id')}`);
  76   }
  77
  78   handleReport = () => {
  79     this.props.onReport(this.props.status);
  80     this.context.router.push('/report');
  81   }
  82
  83   handleConversationMuteClick = () => {
  84     this.props.onMuteConversation(this.props.status);
  85   }
  86
  87   render () {
  88     const { status, me, intl, withDismiss } = this.props;
  89     const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
  90     const mutingConversation = status.get('muted');
  91
  92     let menu = [];
  93     let reblogIcon = 'retweet';
  94     let replyIcon;
  95     let replyTitle;
  96
  97     menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
  98     menu.push(null);
  99
 100     if (withDismiss) {
 101       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
 102       menu.push(null);
 103     }
 104
 105     if (status.getIn(['account', 'id']) === me) {
 106       menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
 107     } else {
 108       menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
 109       menu.push(null);
 110       menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
 111       menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
 112       menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
 113     }
 114
 115     if (status.get('visibility') === 'direct') {
 116       reblogIcon = 'envelope';
 117     } else if (status.get('visibility') === 'private') {
 118       reblogIcon = 'lock';
 119     }
 120
 121     if (status.get('in_reply_to_id', null) === null) {
 122       replyIcon = "reply";
 123       replyTitle = intl.formatMessage(messages.reply);
 124     } else {
 125       replyIcon = "reply-all";
 126       replyTitle = intl.formatMessage(messages.replyAll);
 127     }
 128
 129     return (
 130       <div className='status__action-bar'>
 131         <div className='status__action-bar-button-wrapper'><IconButton title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /></div>
 132         <div className='status__action-bar-button-wrapper'><IconButton disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
 133         <div className='status__action-bar-button-wrapper'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} className='star-icon' /></div>
 134
 135         <div className='status__action-bar-dropdown'>
 136           <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" ariaLabel="More"/>
 137         </div>
 138       </div>
 139     );
 140   }
 141
 142 }
 143
 144 export default injectIntl(StatusActionBar);