From 6775b5bf4af2c923c280fe2d9ebf503951af1da4 Mon Sep 17 00:00:00 2001
From: Fernando Escobar <fernando.escobar@globant.com>
Date: Tue, 8 Sep 2020 17:51:53 -0300
Subject: [PATCH] Adding a max length for the input

---
 .../components/Conversation/components/Sender/index.tsx      | 4 +++-
 src/components/Widget/components/Conversation/index.tsx      | 5 ++++-
 src/components/Widget/index.tsx                              | 3 +++
 src/components/Widget/layout.tsx                             | 3 +++
 src/index.tsx                                                | 4 ++++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget/components/Conversation/components/Sender/index.tsx b/src/components/Widget/components/Conversation/components/Sender/index.tsx
index 045e28c73..f9426fef8 100644
--- a/src/components/Widget/components/Conversation/components/Sender/index.tsx
+++ b/src/components/Widget/components/Conversation/components/Sender/index.tsx
@@ -14,9 +14,10 @@ type Props = {
   sendMessage: (event: any) => void;
   buttonAlt: string;
   onTextInputChange?: (event: any) => void;
+  maxLength: number;
 }
 
-function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt }: Props) {
+function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, maxLength }: Props) {
   const showChat = useSelector((state: GlobalState) => state.behavior.showChat);
   const inputRef = useRef(null);
   // @ts-ignore
@@ -34,6 +35,7 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
         autoFocus={autofocus}
         autoComplete="off"
         onChange={onTextInputChange}
+        maxLength={maxLength}
       />
       <button type="submit" className="rcw-send">
         <img src={send} className="rcw-send-icon" alt={buttonAlt} />
diff --git a/src/components/Widget/components/Conversation/index.tsx b/src/components/Widget/components/Conversation/index.tsx
index 76c44128a..a66a5942f 100644
--- a/src/components/Widget/components/Conversation/index.tsx
+++ b/src/components/Widget/components/Conversation/index.tsx
@@ -26,6 +26,7 @@ type Props = {
   onTextInputChange?: (event: any) => void;
   sendButtonAlt: string;
   showTimeStamp: boolean;
+  maxLength: number;
 };
 
 function Conversation({
@@ -43,7 +44,8 @@ function Conversation({
   onQuickButtonClicked,
   onTextInputChange,
   sendButtonAlt,
-  showTimeStamp
+  showTimeStamp,
+  maxLength
 }: Props) {
   return (
     <div className={cn('rcw-conversation-container', className)} aria-live="polite">
@@ -63,6 +65,7 @@ function Conversation({
         autofocus={autofocus}
         onTextInputChange={onTextInputChange}
         buttonAlt={sendButtonAlt}
+        maxLength={maxLength}
       />
     </div>
   );
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
index cfe530e7b..07debd828 100644
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@@ -27,6 +27,7 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   handleSubmit?: AnyFunction;
+  maxLength: number;
 }
 
 function Widget({
@@ -49,6 +50,7 @@ function Widget({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  maxLength,
   handleSubmit
 }: Props) {
   const dispatch = useDispatch();
@@ -98,6 +100,7 @@ function Widget({
       showTimeStamp={showTimeStamp}
       imagePreview={imagePreview}
       zoomStep={zoomStep}
+      maxLength={maxLength}
     />
   );
 }
diff --git a/src/components/Widget/layout.tsx b/src/components/Widget/layout.tsx
index 804e8e835..28e9fb961 100644
--- a/src/components/Widget/layout.tsx
+++ b/src/components/Widget/layout.tsx
@@ -33,6 +33,7 @@ type Props = {
   showTimeStamp: boolean;
   imagePreview?: boolean;
   zoomStep?: number;
+  maxLength: number;
 }
 
 function WidgetLayout({
@@ -56,6 +57,7 @@ function WidgetLayout({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  maxLength,
 }: Props) {
   const dispatch = useDispatch();
   const { dissableInput, showChat, visible } = useSelector((state: GlobalState) => ({
@@ -131,6 +133,7 @@ function WidgetLayout({
           onTextInputChange={onTextInputChange}
           sendButtonAlt={sendButtonAlt}
           showTimeStamp={showTimeStamp}
+          maxLength={maxLength}
         />
       }
       {customLauncher ?
diff --git a/src/index.tsx b/src/index.tsx
index 4d742b506..2553bd6a5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,6 +28,7 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   handleSubmit?: AnyFunction;
+  maxLength: number;
 } & typeof defaultProps;
 
 function ConnectedWidget({
@@ -50,6 +51,7 @@ function ConnectedWidget({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  maxLength,
   handleSubmit
 }: Props) {
   return (
@@ -75,6 +77,7 @@ function ConnectedWidget({
         imagePreview={imagePreview}
         zoomStep={zoomStep}
         handleSubmit={handleSubmit}
+        maxLength={maxLength}
       />
     </Provider>
   );
@@ -94,6 +97,7 @@ const defaultProps = {
   showTimeStamp: true,
   imagePreview: false,
   zoomStep: 80,
+  maxLength: -1
 };
 ConnectedWidget.defaultProps = defaultProps;