Add ability to add emoji's and convert text to emojis in ChatInput

Author: C-Garza

streams-react/src/components/ChatContainer/ChatContainer.module.css

@@ -30,8 +30,9 @@
   border: 1px solid black;
   cursor: pointer;
   transform: translate(-100%, -50%);
+  transition: all 0.1s ease-out;
 }
-.chat__button:hover {
+.chat__button:hover, .chat__button:focus {
   color: white;
   background-color: rgba(0,0,0,0.4);
 }

streams-react/src/components/ChatInput/ChatInput.js

@@ -1,10 +1,18 @@
+import { useEffect, useState, useRef} from "react";
 import FormInputs from "../FormInputs/FormInputs";
 import useForm from "../../hooks/useForm";
+import "emoji-mart/css/emoji-mart.css";
+import {Picker, Emoji, emojiIndex} from "emoji-mart";
 import styles from "./ChatInput.module.css";
 import {messageInputs} from "../../data/messageInputs";
+import {emojiTrayMap} from "../../data/emojiTrayMap";
 
 const ChatInput = () => {
-  const {values, handleChange, clearInput} = useForm({message: ""});
+  const {values, handleChange, handleAdd, clearInput} = useForm({message: ""});
+  const [showEmojis, setShowEmojis] = useState(false);
+  const [trayEmoji, setTrayEmoji] = useState("blush");
+  const hasConvertedRef = useRef(false);
+  const nodeRef = useRef(null);
 
   const formInputs = messageInputs.map(input => {
     return {
@@ -13,12 +21,118 @@ const ChatInput = () => {
     }
   });
 
+  useEffect(() => {
+    if(!hasConvertedRef.current) {
+      convertInputToEmoji(values.message);
+    }
+    else {
+      hasConvertedRef.current = false;
+    }
+  }, [values]);
+
+  useEffect(() => {
+    if(showEmojis) {
+      window.addEventListener("mousedown", handleClickOutside);
+    }
+    else {
+      window.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      window.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showEmojis]);
+
+  const handleClickOutside = (e) => {
+    if(nodeRef.current.contains(e.target)) return;
+
+    setShowEmojis(false);
+  };
+
+  const handleClick = () => {
+    setShowEmojis(!showEmojis);
+  };
+  
+  const handleEmojiHover = () => {
+    let newEmoji = emojiTrayMap[Math.floor(Math.random() * emojiTrayMap.length)];
+    while(newEmoji === trayEmoji) {
+      newEmoji = emojiTrayMap[Math.floor(Math.random() * emojiTrayMap.length)];
+    }
+    setTrayEmoji(newEmoji);
+  };
+
+  const handleEmoji = (e) => {
+    const pseudoTarget = {target : {value: e.native, name: "message"}};
+    handleAdd(pseudoTarget);
+  };
+
+  const convertInputToEmoji = (userText) => {
+    if(!userText.length) return;
+    const textArray = userText.split(" ");
+    let newValues = [];
+
+    for(let value of textArray) {
+      if(value[0] !== ":") {
+        newValues.push(value);
+        continue;
+      }
+
+      let emojiArray = [];
+      let isEmojiCode = value[value.length - 1] === ":" && value.length > 1;
+
+      if(isEmojiCode) value = value.replaceAll(":", "");
+
+      emojiArray = emojiIndex.search(value).filter(emoji => {
+        if(!isEmojiCode && emoji.emoticons.length) {
+          for(let emoticon of emoji.emoticons) {
+            if(emoticon === value) return emoji.native;
+          }
+        }
+        if(value === emoji.id) return emoji.native;
+        return false
+      });
+      
+      if(emojiArray.length) newValues.push(emojiArray[0].native);
+      else {
+        newValues.push(value);
+      }
+    }
+
+    let newText = newValues.join(" ");
+    if(newText !== userText) {
+      const pseudoTarget = {target : {value: newText, name: "message"}};
+      hasConvertedRef.current = true;
+      handleChange(pseudoTarget);
+    }
+  };
+
   return(
     <div className={styles.container}>
       <div className={styles.input__container}>
         <FormInputs inputs={formInputs} handleChange={handleChange} clearInput={clearInput} />
       </div>
       <div className={styles.controls__container}>
+        <div ref={nodeRef} className={styles.emoji__container}>
+          <button 
+            type="button" 
+            title={"Pick your emoji..."}
+            className={styles.emoji__button} 
+            onClick={handleClick} 
+            onMouseOver={handleEmojiHover}
+          >
+            <Emoji emoji={trayEmoji} size={18} native={true} />
+          </button>
+          {showEmojis &&
+            <div className={styles.emoji__mart}>
+              <Picker 
+                title={"Pick your emoji..."} 
+                onSelect={handleEmoji}
+                emoji={"wave"}
+                native={true}
+              />
+            </div>
+          }
+        </div>
         <button type="button" className={styles.send__button}><i className="fas fa-play"></i></button>
       </div>
     </div>

streams-react/src/components/ChatInput/ChatInput.module.css

@@ -8,7 +8,7 @@
 .input__container {
   flex: 0.75;
   margin-left: 15px;
-  margin-right: 15px;
+  margin-right: 5px;
 }
 .input__container label {
   position: absolute;
@@ -22,8 +22,45 @@
   border: 0;
 }
 .controls__container {
+  display: flex;
+  justify-content: space-around;
   flex: 0.25;
 }
+.emoji__container {
+  position: relative;
+  margin-right: 5px;
+}
+.emoji__button {
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.emoji__button:hover, .emoji__button:focus {
+  transform: scale(1.1);
+}
+.emoji__mart {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-95%, -105%);
+}
 .send__button {
   cursor: pointer;
+  font-size: 18px;
+}
+
+/*** 
+  EMOJI MART CUSTOM CSS 
+***/
+
+:global(.emoji-mart) {
+  width: 300px !important;
+}
+:global(.emoji-mart-title-label) {
+  font-size: 16px !important;
+}
+:global(.emoji-mart-emoji) {
+  cursor: pointer !important;
+}
+:global(.emoji-mart-emoji) > span {
+  cursor: pointer !important;
 }

streams-react/src/data/emojiTrayMap.js

@@ -0,0 +1,15 @@
+const emojiTrayMap = [
+  "blush", 
+  "smile", 
+  "joy", 
+  "rolling_on_the_floor_laughing", 
+  "heart_eyes", 
+  "sweat_smile",
+  "kissing_heart",
+  "smiling_face_with_3_hearts",
+  "smiley",
+  "relaxed",
+  "hugging_face"
+];
+
+export {emojiTrayMap};

streams-react/src/hooks/useForm.js

@@ -15,6 +15,13 @@ export default function useForm(init = {}) {
       [name]: value
     });
   };
+  const handleAdd = e => {
+    let {value, name} = e.target;
+    setValues({
+      ...values,
+      [name]: values[name] + value
+    });
+  };
   const resetForm = () => {
     setValues(init);
   };
@@ -31,6 +38,7 @@ export default function useForm(init = {}) {
     values,
     setValues,
     handleChange,
+    handleAdd,
     resetForm,
     clearForm,
     clearInput