remove emoji selector related changes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/emoji_selector.js

@@ -15,64 +15,25 @@ class EmojiSelector extends ImmutablePureComponent {
 
   static propTypes = {
     onReact: PropTypes.func.isRequired,
-    onUnfocus: PropTypes.func,
     visible: PropTypes.bool,
-    focused: PropTypes.bool,
   }
 
   static defaultProps = {
     onReact: () => {},
-    onUnfocus: () => {},
     visible: false,
   }
 
-  handleBlur = e => {
-    const { focused, onUnfocus } = this.props;
-
-    if (focused && (!e.relatedTarget || !e.relatedTarget.classList.contains('emoji-react-selector__emoji'))) {
-      onUnfocus();
-    }
-  }
-
-  handleKeyUp = i => e => {
-    switch (e.key) {
-    case 'Left':
-    case 'ArrowLeft':
-      if (i !== 0) {
-        this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus();
-      }
-      break;
-    case 'Right':
-    case 'ArrowRight':
-      if (i !== this.props.allowedEmoji.size - 1) {
-        this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus();
-      }
-      break;
-    }
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-
   render() {
-    const { onReact, visible, focused, allowedEmoji } = this.props;
+    const { onReact, visible, allowedEmoji } = this.props;
 
     return (
-      <div
+      <div className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible })}>
-        className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
-        onBlur={this.handleBlur}
-        ref={this.setRef}
-      >
         {allowedEmoji.map((emoji, i) => (
           <button
             key={i}
             className='emoji-react-selector__emoji'
             dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
             onClick={onReact(emoji)}
-            onKeyUp={this.handleKeyUp(i)}
-            tabIndex={(visible || focused) ? 0 : -1}
           />
         ))}
       </div>

app/soapbox/features/status/components/action_bar.js

@@ -48,7 +48,6 @@ 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 => {
@@ -104,7 +103,6 @@ class ActionBar extends React.PureComponent {
 
   state = {
     emojiSelectorVisible: false,
-    emojiSelectorFocused: false,
   }
 
   handleReplyClick = () => {
@@ -167,23 +165,10 @@ class ActionBar extends React.PureComponent {
       } else {
         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 = () => {
     this.props.onDelete(this.props.status, this.context.router.history);
   }
@@ -273,13 +258,13 @@ class ActionBar extends React.PureComponent {
   componentDidMount() {
     document.addEventListener('click', e => {
       if (this.node && !this.node.contains(e.target))
-        this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
+        this.setState({ emojiSelectorVisible: false });
     });
   }
 
   render() {
     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 mutingConversation = status.get('muted');
@@ -379,12 +364,7 @@ class ActionBar extends React.PureComponent {
           onMouseLeave={this.handleLikeButtonLeave}
           ref={this.setRef}
         >
-          <EmojiSelector
+          <EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
-            onReact={this.handleReactClick}
-            visible={emojiSelectorVisible}
-            focused={emojiSelectorFocused}
-            onUnfocus={this.handleEmojiSelectorUnfocus}
-          />
           <IconButton
             className='star-icon'
             animate
@@ -395,14 +375,6 @@ 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}
 

app/soapbox/locales/pl.json

@@ -686,7 +686,6 @@
   "status.reactions.like": "Lubię",
   "status.reactions.open_mouth": "Wow",
   "status.reactions.weary": "Nuda…",
-  "status.reactions_expand": "Wybierz emoji",
   "status.read_more": "Czytaj dalej",
   "status.reblog": "Podbij",
   "status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu",

app/styles/components/detailed-status.scss

@@ -87,22 +87,6 @@
       transform: translateY(-1px);
     }
   }
-
-  .emoji-picker-expand {
-    display: none;
-  }
-
-  &:focus-within {
-    .emoji-picker-expand {
-      display: inline-flex;
-      width: 0;
-      overflow: hidden;
-
-      &:focus-within {
-        width: unset;
-      }
-    }
-  }
 }
 
 .detailed-status__wrapper {

app/styles/components/emoji-reacts.scss

@@ -80,8 +80,7 @@
   transition: 0.1s;
   z-index: 999;
 
-  &--visible,
+  &--visible {
-  &--focused {
     opacity: 1;
     pointer-events: all;
   }
@@ -100,8 +99,7 @@
       transition: 0.1s;
     }
 
-    &:hover,
+    &:hover {
-    &:focus {
       img {
         width: 36px;
         height: 36px;

app/styles/components/status.scss

@@ -667,22 +667,3 @@ a.status-card.compact:hover {
     border-radius: 4px;
   }
 }
-
-.status__action-bar,
-.detailed-status__action-bar {
-  .emoji-picker-expand {
-    display: none;
-  }
-
-  &:focus-within {
-    .emoji-picker-expand {
-      display: inline-flex;
-      width: 0;
-      overflow: hidden;
-
-      &:focus-within {
-        width: unset;
-      }
-    }
-  }
-}