Added handleSubmit event

README.md

@@ -185,6 +185,7 @@ export default App;
 |**launcherCloseLabel**|string|NO|'Close chat'|Alt value for the laucher when open|
 |**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|
 
 #### Styles
 

dev/App.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { Widget, addResponseMessage, setQuickButtons, toggleMsgLoader, addLinkSnippet } from '../index';
+import { addUserMessage } from '..';
 
 export default class App extends Component {
   componentDidMount() {
@@ -25,6 +26,14 @@ export default class App extends Component {
     setQuickButtons([]);
   }
 
+  handleSubmit = (msgText: string) => {
+    if(msgText.length < 80) {
+      addUserMessage("Uh oh, please write a bit more.");
+      return false;
+    }
+    return true;
+  }
+
   render() {
     return (
       <Widget
@@ -33,6 +42,7 @@ export default class App extends Component {
         senderPlaceHolder="Escribe aquí ..."
         handleNewUserMessage={this.handleNewUserMessage}
         handleQuickButtonClicked={this.handleQuickButtonClicked}
+        handleSubmit={this.handleSubmit}
       />
     );
   }

index.js

@@ -12,7 +12,7 @@ import {
   setQuickButtons,
   deleteMessages,
   markAllAsRead,
-  setBadgeCount
+  setBadgeCount,
 } from './src/store/dispatcher';
 
 export {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-widget",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Chat web widget for React apps",
   "main": "lib/index.js",
   "repository": "git@github.com:Wolox/react-chat-widget.git",

src/components/Widget/index.tsx

@@ -24,6 +24,7 @@ type Props = {
   launcherCloseLabel: string;
   sendButtonAlt: string;
   showTimeStamp: boolean;
+  handleSubmit?: AnyFunction;
 }
 
 function Widget({
@@ -43,7 +44,8 @@ function Widget({
   launcherOpenLabel,
   launcherCloseLabel,
   sendButtonAlt,
-  showTimeStamp
+  showTimeStamp,
+  handleSubmit
 }: Props) {
   const dispatch = useDispatch();
 
@@ -54,11 +56,16 @@ function Widget({
   const handleMessageSubmit = (event) => {
     event.preventDefault();
     const userInput = event.target.message.value;
-    if (userInput.trim()) {
+
+    if (!userInput.trim()) {      
+      return;      
+    }
+
+    if(typeof handleSubmit === 'function' && handleSubmit(userInput)) {
       dispatch(addUserMessage(userInput));
       handleNewUserMessage(userInput);
-    }
-    event.target.message.value = '';
+      event.target.message.value = '';
+    }    
   }
 
   const onQuickButtonClicked = (event, value) => {

src/index.tsx

@@ -25,6 +25,7 @@ type Props = {
   launcherCloseLabel?: string,
   sendButtonAlt?: string;
   showTimeStamp?: boolean;
+  handleSubmit?: AnyFunction;
 } & typeof defaultProps;
 
 function ConnectedWidget({
@@ -44,7 +45,8 @@ function ConnectedWidget({
   launcherOpenLabel,
   launcherCloseLabel,
   sendButtonAlt,
-  showTimeStamp
+  showTimeStamp,
+  handleSubmit
 }: Props) {
   return (
     <Provider store={store}>
@@ -66,6 +68,7 @@ function ConnectedWidget({
         launcherCloseLabel={launcherCloseLabel}
         sendButtonAlt={sendButtonAlt}
         showTimeStamp={showTimeStamp}
+        handleSubmit={handleSubmit}
       />
     </Provider>
   );