Resizable widget

README.md

@@ -166,6 +166,7 @@ export default App;
 |**sendButtonAlt**|string|NO|'Send'|Send button alt for a11y purposes|
 |**handleTextInputChange**|(event) => any|NO| |Prop that triggers on input change|
 |**handleSubmit**|(event) => any|NO| |Prop that triggers when a message is submitted, used for custom validation|
+|**resizable**|boolean|NO|false|Prop that allows to resize the widget by dragging it's left border|
 |**emojis**|boolean|NO|false|enable emoji picker|
 
 #### Styles

dev/App.tsx

@@ -47,6 +47,7 @@ export default class App extends Component {
         imagePreview
         handleSubmit={this.handleSubmit}
         emojis
+        resizable
       />
     );
   }

src/components/Widget/components/Conversation/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Picker } from 'emoji-mart';
 import cn from 'classnames';
 
@@ -31,6 +31,7 @@ type Props = {
   onTextInputChange?: (event: any) => void;
   sendButtonAlt: string;
   showTimeStamp: boolean;
+  resizable?: boolean;
   emojis?: boolean;
 };
 
@@ -50,8 +51,39 @@ function Conversation({
   onTextInputChange,
   sendButtonAlt,
   showTimeStamp,
+  resizable,
   emojis
 }: Props) {
+  const [containerDiv, setContainerDiv] = useState<HTMLElement | null>();
+  let startX, startWidth;
+
+  useEffect(() => {
+    const containerDiv = document.getElementById('rcw-conversation-container');
+    setContainerDiv(containerDiv);
+  }, []);
+
+  const initResize = (e) => {
+    if (resizable) {
+      startX = e.clientX;
+      if (document.defaultView && containerDiv){
+        startWidth = parseInt(document.defaultView.getComputedStyle(containerDiv).width);
+        window.addEventListener('mousemove', resize, false);
+        window.addEventListener('mouseup', stopResize, false);
+      }
+    }
+  }
+
+  const resize = (e) => {
+    if (containerDiv) {
+      containerDiv.style.width = (startWidth - e.clientX + startX) + 'px';
+    }
+  }
+
+  const stopResize = (e) => {
+    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) 
@@ -70,7 +102,9 @@ function Conversation({
   }
 
   return (
-    <div className={cn('rcw-conversation-container', className)} aria-live="polite">
+    <div id="rcw-conversation-container" onMouseDown={initResize} 
+      className={cn('rcw-conversation-container', className)} aria-live="polite">
+      {resizable && <div className="rcw-conversation-resizer" />}
       <Header
         title={title}
         subtitle={subtitle}

src/components/Widget/components/Conversation/style.scss

@@ -6,6 +6,9 @@
 .rcw-conversation-container {
   border-radius: 10px;
   box-shadow: 0px 2px 10px 1px $grey-3;
+  min-width: 370px;
+  max-width: 90vw;
+  position: relative;
 
   &.active {
     opacity: 1;
@@ -22,6 +25,15 @@
   }
 }
 
+.rcw-conversation-resizer {
+  cursor: col-resize;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 5px;
+}
+
 .emoji-mart-preview {
   display: none;
 }

src/components/Widget/index.tsx

@@ -30,6 +30,7 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   handleSubmit?: AnyFunction;
+  resizable?: boolean;
   emojis?: boolean;
 }
 
@@ -57,6 +58,7 @@ function Widget({
   imagePreview,
   zoomStep,
   handleSubmit,
+  resizable,
   emojis
 }: Props) {
   const dispatch = useDispatch();
@@ -105,6 +107,7 @@ function Widget({
       showTimeStamp={showTimeStamp}
       imagePreview={imagePreview}
       zoomStep={zoomStep}
+      resizable={resizable}
       emojis={emojis}
     />
   );

src/components/Widget/layout.tsx

@@ -35,6 +35,7 @@ type Props = {
   showTimeStamp: boolean;
   imagePreview?: boolean;
   zoomStep?: number;
+  resizable?: boolean;
   emojis?: boolean
 }
 
@@ -61,6 +62,7 @@ function WidgetLayout({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  resizable,
   emojis
 }: Props) {
   const dispatch = useDispatch();
@@ -138,6 +140,7 @@ function WidgetLayout({
           onTextInputChange={onTextInputChange}
           sendButtonAlt={sendButtonAlt}
           showTimeStamp={showTimeStamp}
+          resizable={resizable}
           emojis={emojis}
         />
       }

src/components/Widget/style.scss

@@ -6,10 +6,8 @@
   display: flex;
   flex-direction: column;
   margin: 0 20px 20px 0;
-  max-width: 370px;
   position: fixed;
   right: 0;
-  width: 90vw;
   z-index: 9999;
 }
 

src/index.tsx

@@ -31,6 +31,7 @@ type Props = {
   zoomStep?: number;
   emojis?: boolean;
   handleSubmit?: AnyFunction;
+  resizable?: boolean;
 } & typeof defaultProps;
 
 function ConnectedWidget({
@@ -57,6 +58,7 @@ function ConnectedWidget({
   imagePreview,
   zoomStep,
   handleSubmit,
+  resizable,
   emojis
 }: Props) {
   return (
@@ -85,6 +87,7 @@ function ConnectedWidget({
         imagePreview={imagePreview}
         zoomStep={zoomStep} 
         handleSubmit={handleSubmit}
+        resizable={resizable}
         emojis={emojis}
       />
     </Provider>