refactor: upgrade emoji lib

src/common/component/EmojiPicker.tsx

@@ -1,53 +0,0 @@
-import { useState, useEffect, FC } from "react";
-import { EmojiData } from "emoji-mart";
-import "emoji-mart/css/emoji-mart.css";
-import { Picker } from "emoji-mart";
-import styled from "styled-components";
-
-interface Props {
-  onSelect: (emoji: EmojiData) => void;
-}
-
-const StyledWrapper = styled.div`
-  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
-  border-radius: 12px;
-  .emoji-mart {
-    border: none;
-    border-radius: 12px;
-  }
-  .emoji-mart-emoji {
-    cursor: pointer;
-    span {
-      cursor: inherit;
-    }
-  }
-`;
-
-const EmojiPicker: FC<Props> = ({ onSelect, ...rest }) => {
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    const inter = setTimeout(() => {
-      setVisible(true);
-    }, 500);
-    return () => {
-      clearTimeout(inter);
-    };
-  }, []);
-
-  return (
-    <StyledWrapper>
-      {visible ? (
-        <Picker
-          perLine={10}
-          emojiSize={24}
-          emojiTooltip={true}
-          showSkinTones={false}
-          onSelect={onSelect}
-          {...rest}
-        />
-      ) : null}
-    </StyledWrapper>
-  );
-};
-
-export default EmojiPicker;

src/common/component/Message/Reaction.tsx

@@ -1,10 +1,8 @@
 import { FC } from "react";
 import styled from "styled-components";
-import { getEmojiDataFromNative } from "emoji-mart";
-import AppleEmojiData from "emoji-mart/data/apple.json";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
-import ReactionItem, { Emojis } from "../ReactionItem";
+import ReactionItem, { Emojis, ReactionMap } from "../ReactionItem";
 import ReactionPicker from "./ReactionPicker";
 import Tooltip from "../Tooltip";
 import { useReactMessageMutation } from "../../../app/services/message";
@@ -105,6 +103,7 @@ const StyledDetails = styled.div`
     color: #1d2939;
   }
 `;
+
 const ReactionDetails = ({
   uids = [],
   emoji,
@@ -118,7 +117,7 @@ const ReactionDetails = ({
   const names = uids.map((id) => {
     return usersData[id]?.name;
   });
-  const emojiData = getEmojiDataFromNative(emoji || "", "apple", AppleEmojiData);
+  // const emojiData = getEmojiDataFromNative(emoji || "", "apple", AppleEmojiData);
   const prefixDesc =
     names.length > 3
       ? `${names.join(", ")} and ${names.length - 3} others reacted with`
@@ -130,7 +129,7 @@ const ReactionDetails = ({
       </div>
       <div className="desc">
         <span>{prefixDesc}</span>
-        <span>{emojiData?.colons}</span>
+        <span>{ReactionMap[emoji]}</span>
       </div>
     </StyledDetails>
   );

src/common/component/ReactionItem.tsx

@@ -18,7 +18,16 @@ export interface Emojis {
   "🙁": ReactElement;
   "🎉": ReactElement;
 }
-
+export const ReactionMap = {
+  "🎉": ":tada:",
+  "👍": ":+1:",
+  "🙁": ":slightly_frown_face:",
+  "❤️": ":heart:",
+  "👎": ":thumb_down:",
+  "😄": ":smile:",
+  "👀": ":eyes:",
+  "🚀": ":rocket:",
+};
 const emojis: Emojis = {
   "👍": <EmojiThumbUp className="emoji" />,
   "👎": <EmojiThumbDown className="emoji" />,

src/common/component/Send/EmojiPicker.tsx

@@ -1,10 +1,9 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 import { useOutsideClick } from "rooks";
 import Tooltip from "../Tooltip";
-import Picker from "../EmojiPicker";
+import { Picker } from 'emoji-mart';
 import SmileIcon from "../../../assets/icons/emoji.smile.svg";
-import { BaseEmoji, EmojiData } from "emoji-mart";
 
 const Styled = styled.div`
   position: relative;
@@ -13,19 +12,20 @@ const Styled = styled.div`
   align-items: center;
   > .emoji {
     cursor: pointer;
+    user-select: none;
   }
   > svg {
     width: 22px;
     height: 22px;
   }
   > .picker {
-    visibility: hidden;
+    display: none;
     position: absolute;
     top: -20px;
     left: -20px;
     transform: translateY(-100%);
     &.visible {
-      visibility: visible;
+      display: block;
     }
   }
 `;
@@ -33,14 +33,32 @@ const Styled = styled.div`
 export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string) => void }) {
   const ref = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
-
   const togglePickerVisible = () => {
     setVisible((prev) => !prev);
   };
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.innerHTML = "";
+      new Picker({
+        data: async () => {
+          const response = await fetch(
+            'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
+          );
 
-  const handleSelect = (emoji: EmojiData) => {
-    selectEmoji((emoji as BaseEmoji).native);
-  };
+          return response.json();
+        },
+        parent: ref.current,
+        onEmojiSelect: (item) => {
+          console.log("eee333", item);
+
+          selectEmoji(item.native);
+        },
+        // onClickOutside: () => {
+        //   setVisible(false);
+        // }
+      });
+    }
+  }, [selectEmoji]);
 
   useOutsideClick(
     ref,
@@ -59,7 +77,7 @@ export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string)
     <Tooltip placement="top" tip="Emojis" disabled={visible}>
       <Styled>
         <div ref={ref} className={`picker ${visible ? "visible" : ""}`}>
-          <Picker onSelect={handleSelect} />
+          {/* emoji picker */}
         </div>
         <SmileIcon data-emoji="toggler" className="emoji" onClick={togglePickerVisible} />
       </Styled>