Merge pull request #751 from GetStream/close-emoji-picker

allows user to close emoji picker using smiley button

Author: yetieaterxb1

src/components/MessageInput/MessageInputFlat.js

@@ -50,10 +50,18 @@ const MessageInputFlat = (props) => {
             )}
 
             <div className="str-chat__emojiselect-wrapper">
-              <Tooltip>{t('Open emoji picker')}</Tooltip>
+              <Tooltip>
+                {messageInput.emojiPickerIsOpen
+                  ? t('Close emoji picker')
+                  : t('Open emoji picker')}
+              </Tooltip>
               <span
                 className="str-chat__input-flat-emojiselect"
-                onClick={messageInput.openEmojiPicker}
+                onClick={
+                  messageInput.emojiPickerIsOpen
+                    ? messageInput.closeEmojiPicker
+                    : messageInput.openEmojiPicker
+                }
                 onKeyDown={messageInput.handleEmojiKeyDown}
                 role="button"
                 tabIndex={0}

src/components/MessageInput/MessageInputLarge.js

@@ -118,10 +118,18 @@ const MessageInputLarge = (props) => {
             )}
 
             <div className="str-chat__emojiselect-wrapper">
-              <Tooltip>{t('Open emoji picker')}</Tooltip>
+              <Tooltip>
+                {messageInput.emojiPickerIsOpen
+                  ? t('Close emoji picker')
+                  : t('Open emoji picker')}
+              </Tooltip>
               <span
                 className="str-chat__input-emojiselect"
-                onClick={messageInput.openEmojiPicker}
+                onClick={
+                  messageInput.emojiPickerIsOpen
+                    ? messageInput.closeEmojiPicker
+                    : messageInput.openEmojiPicker
+                }
                 onKeyDown={messageInput.handleEmojiKeyDown}
                 ref={messageInput.emojiPickerRef}
                 role="button"

src/components/MessageInput/MessageInputSimple.js

@@ -47,10 +47,18 @@ const MessageInputSimple = (props) => {
           />
 
           <div className="str-chat__emojiselect-wrapper">
-            <Tooltip>{t('Open emoji picker')}</Tooltip>
+            <Tooltip>
+              {messageInput.emojiPickerIsOpen
+                ? t('Close emoji picker')
+                : t('Open emoji picker')}
+            </Tooltip>
             <span
               className="str-chat__input-flat-emojiselect"
-              onClick={messageInput.openEmojiPicker}
+              onClick={
+                messageInput.emojiPickerIsOpen
+                  ? messageInput.closeEmojiPicker
+                  : messageInput.openEmojiPicker
+              }
               onKeyDown={messageInput.handleEmojiKeyDown}
               role="button"
               tabIndex={0}

src/components/MessageInput/MessageInputSmall.js

@@ -93,10 +93,18 @@ const MessageInputSmall = (props) => {
             )}
 
             <div className="str-chat__emojiselect-wrapper">
-              <Tooltip>{t('Open emoji picker')}</Tooltip>
+              <Tooltip>
+                {messageInput.emojiPickerIsOpen
+                  ? t('Close emoji picker')
+                  : t('Open emoji picker')}
+              </Tooltip>
               <span
                 className="str-chat__small-message-input-emojiselect"
-                onClick={messageInput.openEmojiPicker}
+                onClick={
+                  messageInput.emojiPickerIsOpen
+                    ? messageInput.closeEmojiPicker
+                    : messageInput.openEmojiPicker
+                }
                 onKeyDown={messageInput.handleEmojiKeyDown}
                 role="button"
                 tabIndex={0}

src/components/MessageInput/hooks/messageInput.js

@@ -797,6 +797,7 @@ export default function useMessageInput(props) {
     handleChange,
     onPaste,
     onSelectItem,
+    closeEmojiPicker,
     openEmojiPicker,
     handleEmojiKeyDown,
   };

src/i18n/en.json

@@ -4,6 +4,7 @@
   "Cancel": "Cancel",
   "Channel Missing": "Channel Missing",
   "Close": "Close",
+  "Close emoji picker": "Close emoji picker",
   "Commands matching": "Commands matching",
   "Connection failure, reconnecting now...": "Connection failure, reconnecting now...",
   "Delete": "Delete",

src/i18n/fr.json

@@ -4,6 +4,7 @@
   "Cancel": "Annuler",
   "Channel Missing": "Canal Manquant",
   "Close": "Fermer",
+  "Close emoji picker": "Fermer le sélecteur d'emojis",
   "Commands matching": "Correspondance des commandes",
   "Connection failure, reconnecting now...": "Échec de la connexion, reconnexion en cours...",
   "Delete": "Supprimer",

src/i18n/hi.json

@@ -4,6 +4,7 @@
   "Cancel": "रद्द करें",
   "Channel Missing": "चैनल उपलब्ध नहीं है",
   "Close": "बंद करे",
+  "Close emoji picker": "इमोजी पिकर बंद करें",
   "Commands matching": "मेल खाती है",
   "Connection failure, reconnecting now...": "कनेक्शन विफल रहा, अब पुनः कनेक्ट हो रहा है ...",
   "Delete": "डिलीट",

src/i18n/it.json

@@ -4,6 +4,7 @@
   "Cancel": "Annulla",
   "Channel Missing": "Il canale non esiste",
   "Close": "Chiudi",
+  "Close emoji picker": "Chiudi il selettore di emoji",
   "Commands matching": "Comandi corrispondenti",
   "Connection failure, reconnecting now...": "Connessione fallitta, riconnessione in corso...",
   "Delete": "Cancella",

src/i18n/nl.json

@@ -4,6 +4,7 @@
   "Cancel": "Annuleer",
   "Channel Missing": "Kanaal niet gevonden",
   "Close": "Sluit",
+  "Close emoji picker": "Sluit de emoji-kiezer",
   "Commands matching": "Bijpassende opdrachten",
   "Connection failure, reconnecting now...": "Probleem met de verbinding, opnieuw verbinding maken...",
   "Delete": "Verwijder",