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