From 50db64b6e78bd0a63b7f7890609f15b89ee35d41 Mon Sep 17 00:00:00 2001
From: Cristian Vega <cristian.vega08@gmail.com>
Date: Fri, 4 Jun 2021 13:57:43 -0500
Subject: [PATCH] fix: picker position

---
 .../Messages/components/Message/index.tsx     |  4 +-
 .../Messages/components/Message/styles.scss   |  4 ++
 .../Sender/components/EmojiPicker/index.tsx   | 46 -------------------
 .../Sender/components/EmojiPicker/style.scss  | 18 --------
 .../Conversation/components/Sender/index.tsx  | 40 +++++++++++++---
 .../Conversation/components/Sender/style.scss |  6 ++-
 .../Widget/components/Conversation/index.tsx  | 32 ++++++++++++-
 .../Widget/components/Conversation/style.scss |  5 ++
 src/scss/_common.scss                         |  4 --
 9 files changed, 80 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx
 delete mode 100644 src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss

diff --git a/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx b/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx
index 5021c8039..a28f7031e 100644
--- a/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx
+++ b/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx
@@ -15,7 +15,7 @@ type Props = {
 }
 
 function Message({ message, showTimeStamp }: Props) {
-  const sanitizedHTML = markdownIt()
+  const sanitizedHTML = markdownIt({ break: true })
     .use(markdownItClass, {
       img: ['rcw-message-img']
     })
@@ -26,7 +26,7 @@ function Message({ message, showTimeStamp }: Props) {
 
   return (
     <div className={`rcw-${message.sender}`}>
-      <div className="rcw-message-text" dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+      <div className="rcw-message-text" dangerouslySetInnerHTML={{ __html: sanitizedHTML.replace(/\n$/,'') }} />
       {showTimeStamp && <span className="rcw-timestamp">{format(message.timestamp, 'hh:mm')}</span>}
     </div>
   );
diff --git a/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss b/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss
index c286b6289..7c4281e6e 100644
--- a/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss
+++ b/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss
@@ -4,6 +4,7 @@
 .rcw-message {
   margin: 10px;
   display: flex;
+  white-space: pre-wrap;
   word-wrap: break-word;
 }
 
@@ -19,6 +20,9 @@
 
   .rcw-message-text {
     @include message-bubble($turqois-2);
+
+    white-space: pre-wrap;
+    word-wrap: break-word;
   }
 
   .rcw-timestamp {
diff --git a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx b/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx
deleted file mode 100644
index c1b2f8c05..000000000
--- a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Picker } from 'emoji-mart';
-
-import { AnyFunction } from '../../../../../../../../utils/types';
-
-const emoji = require('../../../../../../../../../assets/icon-smiley.svg') as string;
-
-import './style.scss';
-
-type Props = {
-  onSelectEmoji: AnyFunction
-}
-
-function EmojiPicker({ onSelectEmoji } : Props) {
-  const [pickerStatus, setPickerState] = useState(false)
-  const togglePicker = () => {
-    setPickerState(prevPickerStatus => !prevPickerStatus)
-  }
-
-  useEffect(() => {
-    function onKeyup(e) {
-      if (e.key === "Escape" && !pickerStatus) togglePicker()
-    }
-    window.addEventListener('keyup', onKeyup);
-    return () => window.removeEventListener('keyup', onKeyup);
-  }, [])
-
-
-  return (
-    <>
-      {pickerStatus && (
-        <Picker 
-          emoji='point_up'
-          title='Pick your emoji…'
-          style={{ position: 'absolute', bottom: '100px', left: '0', width: '100%' }}
-          onSelect={onSelectEmoji}
-        />
-      )}
-      <button className='rcw-picker-btn' type="submit" onClick={togglePicker}>
-        <img src={emoji} className="rcw-picker-icon" alt="" />
-      </button>
-    </>
-  )
-}
-
-export default EmojiPicker;
diff --git a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss b/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss
deleted file mode 100644
index 57e16d81e..000000000
--- a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import 'variables/colors';
-@import "~emoji-mart/css/emoji-mart.css";
-
-// .rcw-picker-container {}
-
-.rcw-picker-btn { // Create mixin 
-  background: $grey-2;
-  border: 0;
-  cursor: pointer;
-
-  .rcw-piker-icon {
-    height: 25px;
-  }
-}
-
-.emoji-mart-preview {
-  display: none;
-}
diff --git a/src/components/Widget/components/Conversation/components/Sender/index.tsx b/src/components/Widget/components/Conversation/components/Sender/index.tsx
index 8d2d19c75..4b66d667a 100644
--- a/src/components/Widget/components/Conversation/components/Sender/index.tsx
+++ b/src/components/Widget/components/Conversation/components/Sender/index.tsx
@@ -1,12 +1,12 @@
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
 import { useSelector } from 'react-redux';
-import EmojiPicker from './components/EmojiPicker'
 import cn from 'classnames';
 
 import { GlobalState } from 'src/store/types';
 
 import { getCaretIndex, isFirefox, updateCaret, insertNodeAtCaret, getSelection } from '../../../../../../utils/contentEditable'
 const send = require('../../../../../../../assets/send_button.svg') as string;
+const emoji = require('../../../../../../../assets/icon-smiley.svg') as string;
 const brRegex = /<br>/g;
 
 import './style.scss';
@@ -17,18 +17,28 @@ type Props = {
   autofocus: boolean;
   sendMessage: (event: any) => void;
   buttonAlt: string;
+  onPressEmoji: () => void;
+  onChangeSize: (event: any) => void;
   onTextInputChange?: (event: any) => void;
 }
 
-function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt }: Props) {
+function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, onPressEmoji, onChangeSize }: Props, ref) {
   const showChat = useSelector((state: GlobalState) => state.behavior.showChat);
   const inputRef = useRef<HTMLDivElement>(null!);
+  const refContainer = useRef<HTMLDivElement>(null);
   const [enter, setEnter]= useState(false)
   const [firefox, setFirefox] = useState(false);
+  const [height, setHeight] = useState(0)
   // @ts-ignore
   useEffect(() => { if (showChat && autofocus) inputRef.current?.focus(); }, [showChat]);
   useEffect(() => { setFirefox(isFirefox())}, [])
 
+  useImperativeHandle(ref, () => {
+    return {
+      onSelectEmoji: handlerOnSelectEmoji,
+    };
+  });
+
   const handlerOnChange = (event) => {
     onTextInputChange && onTextInputChange(event)
   }
@@ -68,6 +78,16 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
     }
   }
 
+  // TODO use a context for checkSize and toggle picker
+  const checkSize = () => {
+    const senderEl = refContainer.current
+    if(senderEl && height !== senderEl.clientHeight) {
+      const {clientHeight} = senderEl;
+      setHeight(clientHeight)
+      onChangeSize(clientHeight ? clientHeight -1 : 0)
+    }
+  }
+
   const handlerOnKeyUp = (event) => {
     const el = inputRef.current;
     if(!el) return true;
@@ -81,6 +101,7 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
         el.innerHTML = el.innerHTML.replace(brRegex, '')
       }
     }
+    checkSize()
   }
 
   const handlerOnKeyDown= (event) => {
@@ -98,9 +119,16 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
     }
   }
 
+  const handlerPressEmoji = () => {
+    onPressEmoji();
+    checkSize();
+  }
+
   return (
-    <div className="rcw-sender">
-      <EmojiPicker onSelectEmoji={handlerOnSelectEmoji}/>
+    <div ref={refContainer} className="rcw-sender">
+      <button className='rcw-picker-btn' type="submit" onClick={handlerPressEmoji}>
+        <img src={emoji} className="rcw-picker-icon" alt="" />
+      </button>
       <div className={cn('rcw-new-message', {
           'rcw-message-disable': disabledInput,
         })
@@ -126,4 +154,4 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
   );
 }
 
-export default Sender;
+export default forwardRef(Sender);
diff --git a/src/components/Widget/components/Conversation/components/Sender/style.scss b/src/components/Widget/components/Conversation/components/Sender/style.scss
index e68a20055..e42a0838a 100644
--- a/src/components/Widget/components/Conversation/components/Sender/style.scss
+++ b/src/components/Widget/components/Conversation/components/Sender/style.scss
@@ -10,6 +10,7 @@
   min-height: 45px;
   overflow: hidden;
   padding: 10px;
+  position: relative;
 
   &.expand {
     height: 55px;
@@ -37,7 +38,7 @@
   display: block;
   height: 100%;
   line-height: 20px;
-  max-height: 75px;
+  max-height: 78px;
   overflow-y: auto;
   user-select: text;
   white-space: pre-wrap;
@@ -53,9 +54,10 @@
   }
 }
 
-.rcw-send {
+.rcw-send, .rcw-picker-btn {
   background: $grey-2;
   border: 0;
+  cursor: pointer;
 
   .rcw-send-icon {
     height: 25px;
diff --git a/src/components/Widget/components/Conversation/index.tsx b/src/components/Widget/components/Conversation/index.tsx
index bd626510c..58a38ecfe 100644
--- a/src/components/Widget/components/Conversation/index.tsx
+++ b/src/components/Widget/components/Conversation/index.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState, useEffect } from 'react';
+import { Picker } from 'emoji-mart';
 import cn from 'classnames';
 
 import Header from './components/Header';
@@ -9,6 +11,10 @@ import { AnyFunction } from '../../../../utils/types';
 
 import './style.scss';
 
+interface ISenderRef {
+  onSelectEmoji: (event: any) => void;
+}
+
 type Props = {
   title: string;
   subtitle: string;
@@ -44,6 +50,23 @@ function Conversation({
   sendButtonAlt,
   showTimeStamp
 }: Props) {
+  const [pickerOffset, setOffset] = useState(0)
+  const senderRef = useRef<ISenderRef>(null!);
+  const [pickerStatus, setPicket] = useState(false) 
+ 
+  const onSelectEmoji = (emoji) => {
+    senderRef.current?.onSelectEmoji(emoji)
+  }
+
+  const togglePicker = () => {
+    setPicket(prevPickerStatus => !prevPickerStatus)
+  }
+
+  const handlerSendMsn = (event) => {
+    sendMessage(event)
+    if(pickerStatus) setPicket(false)
+  }
+
   return (
     <div className={cn('rcw-conversation-container', className)} aria-live="polite">
       <Header
@@ -55,13 +78,20 @@ function Conversation({
       />
       <Messages profileAvatar={profileAvatar} showTimeStamp={showTimeStamp} />
       <QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
+      {pickerStatus && (<Picker 
+        style={{ position: 'absolute', bottom: pickerOffset, left: '0', width: '100%' }}
+        onSelect={onSelectEmoji}
+      />)}
       <Sender
-        sendMessage={sendMessage}
+        ref={senderRef}
+        sendMessage={handlerSendMsn}
         placeholder={senderPlaceHolder}
         disabledInput={disabledInput}
         autofocus={autofocus}
         onTextInputChange={onTextInputChange}
         buttonAlt={sendButtonAlt}
+        onPressEmoji={togglePicker}
+        onChangeSize={setOffset}
       />
     </div>
   );
diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss
index a6b6fa82b..b895ca86b 100644
--- a/src/components/Widget/components/Conversation/style.scss
+++ b/src/components/Widget/components/Conversation/style.scss
@@ -1,6 +1,7 @@
 @import 'common';
 @import 'variables/colors';
 @import 'animation';
+@import "~emoji-mart/css/emoji-mart.css";
 
 .rcw-conversation-container {
   border-radius: 10px;
@@ -21,6 +22,10 @@
   }
 }
 
+.emoji-mart-preview {
+  display: none;
+}
+
 .rcw-full-screen {
   .rcw-conversation-container {
     @include conversation-container-fs;
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 92a1c0dad..279ee7afc 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -4,10 +4,6 @@
   max-width: 215px;
   padding: 15px;
   text-align: left;
-  
-  > p {
-    white-space: pre-wrap;
-  }
 }
 
 // Full screen mixins