From 53d6bd767ed4f3b77c6cc454d186be70a1a299b8 Mon Sep 17 00:00:00 2001
From: Krajcik Ondrej <ondrakrajcik@gmail.com>
Date: Thu, 28 Oct 2021 14:46:27 +0200
Subject: [PATCH] emojiSet to props

---
 .../Widget/components/Conversation/index.tsx    | 17 +++++++++++------
 src/components/Widget/index.tsx                 |  6 +++++-
 src/components/Widget/layout.tsx                |  9 ++++++---
 src/index.tsx                                   |  8 ++++++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/Widget/components/Conversation/index.tsx b/src/components/Widget/components/Conversation/index.tsx
index 49acf8702..76e395f23 100644
--- a/src/components/Widget/components/Conversation/index.tsx
+++ b/src/components/Widget/components/Conversation/index.tsx
@@ -15,6 +15,8 @@ interface ISenderRef {
   onSelectEmoji: (event: any) => void;
 }
 
+export type EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';
+
 type Props = {
   title: string;
   subtitle: string;
@@ -34,6 +36,7 @@ type Props = {
   showTimeStamp: boolean;
   resizable?: boolean;
   emojis?: boolean;
+  emojiSet?: EmojiSet;
 };
 
 function Conversation({
@@ -54,7 +57,8 @@ function Conversation({
   sendButtonAlt,
   showTimeStamp,
   resizable,
-  emojis
+  emojis,
+  emojiSet,
 }: Props) {
   const [containerDiv, setContainerDiv] = useState<HTMLElement | null>();
   let startX, startWidth;
@@ -85,11 +89,11 @@ function Conversation({
     window.removeEventListener('mousemove', resize, false);
     window.removeEventListener('mouseup', stopResize, false);
   }
-  
+
   const [pickerOffset, setOffset] = useState(0)
   const senderRef = useRef<ISenderRef>(null!);
-  const [pickerStatus, setPicket] = useState(false) 
- 
+  const [pickerStatus, setPicket] = useState(false)
+
   const onSelectEmoji = (emoji) => {
     senderRef.current?.onSelectEmoji(emoji)
   }
@@ -104,7 +108,7 @@ function Conversation({
   }
 
   return (
-    <div id="rcw-conversation-container" onMouseDown={initResize} 
+    <div id="rcw-conversation-container" onMouseDown={initResize}
       className={cn('rcw-conversation-container', className)} aria-live="polite">
       {resizable && <div className="rcw-conversation-resizer" />}
       <Header
@@ -120,9 +124,10 @@ function Conversation({
         showTimeStamp={showTimeStamp}
       />
       <QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
-      {emojis && pickerStatus && (<Picker 
+      {emojis && pickerStatus && (<Picker
         style={{ position: 'absolute', bottom: pickerOffset, left: '0', width: '100%' }}
         onSelect={onSelectEmoji}
+        set={emojiSet ?? undefined}
       />)}
       <Sender
         ref={senderRef}
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
index cb9714c2e..6e230cff8 100644
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@@ -5,6 +5,7 @@ import { isWidgetOpened } from '../../store/dispatcher';
 import { AnyFunction } from '../../utils/types';
 
 import WidgetLayout from './layout';
+import {EmojiSet} from "./components/Conversation";
 
 type Props = {
   title: string;
@@ -34,6 +35,7 @@ type Props = {
   showBadge?: boolean;
   resizable?: boolean;
   emojis?: boolean;
+  emojiSet?: EmojiSet;
 }
 
 function Widget({
@@ -63,7 +65,8 @@ function Widget({
   handleSubmit,
   showBadge,
   resizable,
-  emojis
+  emojis,
+  emojiSet,
 }: Props) {
   const dispatch = useDispatch();
 
@@ -115,6 +118,7 @@ function Widget({
       showBadge={showBadge}
       resizable={resizable}
       emojis={emojis}
+      emojiSet={emojiSet}
     />
   );
 }
diff --git a/src/components/Widget/layout.tsx b/src/components/Widget/layout.tsx
index 982fcecee..5879c2136 100644
--- a/src/components/Widget/layout.tsx
+++ b/src/components/Widget/layout.tsx
@@ -6,7 +6,7 @@ import { GlobalState } from 'src/store/types';
 import { AnyFunction } from 'src/utils/types';
 import { openFullscreenPreview } from '../../store/actions';
 
-import Conversation from './components/Conversation';
+import Conversation, {EmojiSet} from './components/Conversation';
 import Launcher from './components/Launcher';
 import FullScreenPreview from './components/FullScreenPreview';
 
@@ -38,7 +38,8 @@ type Props = {
   zoomStep?: number;
   showBadge?: boolean;
   resizable?: boolean;
-  emojis?: boolean
+  emojis?: boolean;
+  emojiSet?: EmojiSet;
 }
 
 function WidgetLayout({
@@ -67,7 +68,8 @@ function WidgetLayout({
   zoomStep,
   showBadge,
   resizable,
-  emojis
+  emojis,
+  emojiSet,
 }: Props) {
   const dispatch = useDispatch();
   const { dissableInput, showChat, visible } = useSelector((state: GlobalState) => ({
@@ -147,6 +149,7 @@ function WidgetLayout({
           showTimeStamp={showTimeStamp}
           resizable={resizable}
           emojis={emojis}
+          emojiSet={emojiSet}
         />
       }
       {customLauncher ?
diff --git a/src/index.tsx b/src/index.tsx
index 758e5088c..c28bb4b83 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ import Widget from './components/Widget';
 import store from  './store';
 
 import { AnyFunction } from './utils/types';
+import {EmojiSet} from "./components/Widget/components/Conversation";
 
 type Props = {
   handleNewUserMessage: AnyFunction;
@@ -31,6 +32,7 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   emojis?: boolean;
+  emojiSet?: EmojiSet;
   handleSubmit?: AnyFunction;
   showBadge?: boolean;
   resizable?: boolean;
@@ -63,7 +65,8 @@ function ConnectedWidget({
   handleSubmit,
   showBadge,
   resizable,
-  emojis
+  emojis,
+  emojiSet,
 }: Props) {
   return (
     <Provider store={store}>
@@ -90,11 +93,12 @@ function ConnectedWidget({
         sendButtonAlt={sendButtonAlt}
         showTimeStamp={showTimeStamp}
         imagePreview={imagePreview}
-        zoomStep={zoomStep} 
+        zoomStep={zoomStep}
         handleSubmit={handleSubmit}
         showBadge={showBadge}
         resizable={resizable}
         emojis={emojis}
+        emojiSet={emojiSet}
       />
     </Provider>
   );