From 8f55fee1c32777ad715566dd89930949209a6d5a Mon Sep 17 00:00:00 2001
From: Nuary Pradipta <nuary.pradipta@gmail.com>
Date: Tue, 11 Oct 2022 21:05:36 +0700
Subject: [PATCH] Add Emoji Picker to Postbox

---
 .../Orbis/FloatingChat/EmojiPicker.module.css |  2 +-
 .../@shared/Orbis/Postbox.module.css          |  9 +++++
 src/components/@shared/Orbis/Postbox.tsx      | 30 +++++++++++------
 src/stylesGlobal/_emojipicker.css             | 33 ++++++++++++++++++-
 4 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css
index 8962db6b5..5cfeac42d 100644
--- a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css
+++ b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css
@@ -3,7 +3,7 @@
   padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 3);
   cursor: pointer;
   white-space: nowrap;
-  top: 0;
+  bottom: 0;
   right: 0;
   width: auto !important;
 }
diff --git a/src/components/@shared/Orbis/Postbox.module.css b/src/components/@shared/Orbis/Postbox.module.css
index 5a25d9921..4a8fb0991 100644
--- a/src/components/@shared/Orbis/Postbox.module.css
+++ b/src/components/@shared/Orbis/Postbox.module.css
@@ -8,6 +8,11 @@
   border: 1px solid var(--border-color);
   min-height: 80px;
   margin-bottom: calc(var(--spacer) / 4);
+  outline: none;
+}
+
+.postbox .editable:focus {
+  border-color: var(--brand-white);
 }
 
 .postbox .editable:empty:before {
@@ -18,3 +23,7 @@
 .postbox .sendButtonWrap {
   text-align: right;
 }
+
+.postbox .postboxInput {
+  position: relative;
+}
diff --git a/src/components/@shared/Orbis/Postbox.tsx b/src/components/@shared/Orbis/Postbox.tsx
index ced9fc5b0..1d2998601 100644
--- a/src/components/@shared/Orbis/Postbox.tsx
+++ b/src/components/@shared/Orbis/Postbox.tsx
@@ -1,7 +1,9 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import Button from '@shared/atoms/Button'
 import styles from './Postbox.module.css'
 import { useOrbis } from '@context/Orbis'
+import EmojiPicker from './FloatingChat/EmojiPicker'
+import { EmojiClickData, EmojiStyle } from 'emoji-picker-react'
 
 export default function Postbox({
   id,
@@ -12,11 +14,16 @@ export default function Postbox({
   id: string
   callbackPost: (post: OrbisPostInterface) => void
 }) {
-  const [post, setPost] = useState()
+  const [post, setPost] = useState<string>('')
 
   const postBoxArea = useRef(null)
   const { orbis, account } = useOrbis()
 
+  const onEmojiClick = (emojiData: EmojiClickData) => {
+    setPost((prevInput) => prevInput + emojiData.emoji)
+    postBoxArea.current.innerText += emojiData.emoji
+  }
+
   function handleInput(e: any) {
     setPost(e.currentTarget.innerText)
     const _keyCode = e.nativeEvent.data
@@ -67,14 +74,17 @@ export default function Postbox({
   return (
     <>
       <div className={styles.postbox}>
-        <div
-          id="postbox-area"
-          ref={postBoxArea}
-          className={styles.editable}
-          contentEditable={true}
-          data-placeholder={placeholder}
-          onInput={(e) => handleInput(e)}
-        ></div>
+        <div className={styles.postboxInput}>
+          <div
+            id="postbox-area"
+            ref={postBoxArea}
+            className={styles.editable}
+            contentEditable={true}
+            data-placeholder={placeholder}
+            onInput={(e) => handleInput(e)}
+          ></div>
+          <EmojiPicker onEmojiClick={onEmojiClick} />
+        </div>
         <div className={styles.sendButtonWrap}>
           <Button
             style="primary"
diff --git a/src/stylesGlobal/_emojipicker.css b/src/stylesGlobal/_emojipicker.css
index b02bdaa0b..7434bef6d 100644
--- a/src/stylesGlobal/_emojipicker.css
+++ b/src/stylesGlobal/_emojipicker.css
@@ -1,3 +1,6 @@
+.EmojiPickerReact * {
+  font-family: var(--font-family-base) !important;
+}
 .EmojiPickerReact.epr-dark-theme {
   --epr-bg-color: var(--background-content) !important;
   --epr-category-label-bg-color: #141414e6 !important;
@@ -6,12 +9,40 @@
   --epr-emoji-size: 24px !important;
 }
 
+.EmojiPickerReact .epr-search-container input.epr-search {
+  background-color: transparent !important;
+  border-color: var(--border-color) !important;
+  border-radius: var(--border-radius) !important;
+  color: var(--brand-black) !important;
+}
+
 .EmojiPickerReact .epr-search-container input.epr-search:focus {
   background-color: var(--epr-search-input-bg-color-active);
-  border: 1px solid var(--border-color) !important;
+  border-color: var(--brand-black) !important;
+}
+
+.EmojiPickerReact.epr-dark-theme .epr-search-container input.epr-search {
+  color: var(--brand-white) !important;
+}
+
+.EmojiPickerReact.epr-dark-theme .epr-search-container input.epr-search:focus {
+  border-color: var(--brand-white) !important;
 }
 
 .EmojiPickerReact .epr-category-nav > button.epr-cat-btn {
   -webkit-filter: hue-rotate(110deg) saturate(2);
   filter: hue-rotate(110deg) saturate(2);
 }
+
+.EmojiPickerReact .epr-body::-webkit-scrollbar {
+  display: none;
+}
+
+.EmojiPickerReact .epr-body {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+aside.EmojiPickerReact.epr-main {
+  border-width: 0 !important;
+}