|
|
@ -48,7 +48,6 @@ const messages = defineMessages({
|
|
|
|
reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
|
|
|
|
reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
|
|
|
|
reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
|
|
|
|
reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
|
|
|
|
reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
|
|
|
|
reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
|
|
|
|
emojiPickerExpand: { id: 'status.reactions_expand', defaultMessage: 'Select emoji' },
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const mapStateToProps = state => {
|
|
|
|
const mapStateToProps = state => {
|
|
|
@ -104,7 +103,6 @@ class ActionBar extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
state = {
|
|
|
|
emojiSelectorVisible: false,
|
|
|
|
emojiSelectorVisible: false,
|
|
|
|
emojiSelectorFocused: false,
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleReplyClick = () => {
|
|
|
|
handleReplyClick = () => {
|
|
|
@ -167,23 +165,10 @@ class ActionBar extends React.PureComponent {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.props.onOpenUnauthorizedModal();
|
|
|
|
this.props.onOpenUnauthorizedModal();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
|
|
|
|
this.setState({ emojiSelectorVisible: false });
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleEmojiSelectorExpand = e => {
|
|
|
|
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
|
|
|
|
this.setState({ emojiSelectorFocused: true });
|
|
|
|
|
|
|
|
const firstEmoji = this.node.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
|
|
|
|
|
|
|
|
firstEmoji.focus();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleEmojiSelectorUnfocus = () => {
|
|
|
|
|
|
|
|
this.setState({ emojiSelectorFocused: false });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleDeleteClick = () => {
|
|
|
|
handleDeleteClick = () => {
|
|
|
|
this.props.onDelete(this.props.status, this.context.router.history);
|
|
|
|
this.props.onDelete(this.props.status, this.context.router.history);
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -273,13 +258,13 @@ class ActionBar extends React.PureComponent {
|
|
|
|
componentDidMount() {
|
|
|
|
componentDidMount() {
|
|
|
|
document.addEventListener('click', e => {
|
|
|
|
document.addEventListener('click', e => {
|
|
|
|
if (this.node && !this.node.contains(e.target))
|
|
|
|
if (this.node && !this.node.contains(e.target))
|
|
|
|
this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
|
|
|
|
this.setState({ emojiSelectorVisible: false });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { status, intl, me, isStaff, allowedEmoji } = this.props;
|
|
|
|
const { status, intl, me, isStaff, allowedEmoji } = this.props;
|
|
|
|
const { emojiSelectorVisible, emojiSelectorFocused } = this.state;
|
|
|
|
const { emojiSelectorVisible } = this.state;
|
|
|
|
|
|
|
|
|
|
|
|
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
|
|
|
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
|
|
|
const mutingConversation = status.get('muted');
|
|
|
|
const mutingConversation = status.get('muted');
|
|
|
@ -379,12 +364,7 @@ class ActionBar extends React.PureComponent {
|
|
|
|
onMouseLeave={this.handleLikeButtonLeave}
|
|
|
|
onMouseLeave={this.handleLikeButtonLeave}
|
|
|
|
ref={this.setRef}
|
|
|
|
ref={this.setRef}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<EmojiSelector
|
|
|
|
<EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
|
|
|
|
onReact={this.handleReactClick}
|
|
|
|
|
|
|
|
visible={emojiSelectorVisible}
|
|
|
|
|
|
|
|
focused={emojiSelectorFocused}
|
|
|
|
|
|
|
|
onUnfocus={this.handleEmojiSelectorUnfocus}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<IconButton
|
|
|
|
<IconButton
|
|
|
|
className='star-icon'
|
|
|
|
className='star-icon'
|
|
|
|
animate
|
|
|
|
animate
|
|
|
@ -395,14 +375,6 @@ class ActionBar extends React.PureComponent {
|
|
|
|
text={meEmojiTitle}
|
|
|
|
text={meEmojiTitle}
|
|
|
|
onClick={this.handleLikeButtonClick}
|
|
|
|
onClick={this.handleLikeButtonClick}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<IconButton
|
|
|
|
|
|
|
|
className='emoji-picker-expand'
|
|
|
|
|
|
|
|
animate
|
|
|
|
|
|
|
|
title={intl.formatMessage(messages.emojiPickerExpand)}
|
|
|
|
|
|
|
|
icon='caret-down'
|
|
|
|
|
|
|
|
onKeyUp={this.handleEmojiSelectorExpand}
|
|
|
|
|
|
|
|
onHover
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{shareButton}
|
|
|
|
{shareButton}
|
|
|
|
|
|
|
|
|
|
|
|