Merge branch 'master' into dev/fullScreen

README.md

@@ -185,11 +185,12 @@ 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
 
 To change the styles you need the widget to have, simply override the CSS classes wrapping them within the containers and add your own style to them! All classes are prefixed with `rcw-` so they don't override your other classes in case you are not hasing them. 
-To verride, you can do, for expample:
+To override, you can do, for expample:
 
 ```css
 .rcw-conversation-container > .rcw-header {
@@ -238,7 +239,7 @@ As of v3.0, messages now have an optional ID that can be added on creation.If yo
     - component: Component to be render,
     - props: props the component needs,
     - showAvatar: boolean, default value: false; the component will be rendered with the avatar like the messages
-  - Method to render a custom component inse the messages container. With this method, you can add whatever component you need the widget to have.
+  - Method to render a custom component inside the messages container. With this method, you can add whatever component you need the widget to have.
 
 - **setQuickButtons**
   - params:
@@ -283,12 +284,12 @@ You can use a custom component for the Launcher if you need one that's not the d
 
 ```js
 import React from 'react';
-import { Wdiget } from 'react-chat-widget';
+import { Widget } from 'react-chat-widget';
 
 ...
 
 function MyApp() {
-  const getCustomLaucher = (handleToggle) =>
+  const getCustomLauncher = (handleToggle) =>
     <button onClick={handleToggle}>This is my launcher component!</button>
 
   return (

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() {
@@ -27,17 +28,26 @@ 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 (
       <div>
         <button style={{position: 'absolute', right: 40, bottom: 150}}>test</button>
-      <Widget
-        title="Bienvenido"
-        subtitle="Asistente virtual"
-        senderPlaceHolder="Escribe aquí ..."
-        handleNewUserMessage={this.handleNewUserMessage}
-        handleQuickButtonClicked={this.handleQuickButtonClicked}
-        imagePreview
+        <Widget
+          title="Bienvenido"
+          subtitle="Asistente virtual"
+          senderPlaceHolder="Escribe aquí ..."
+          handleNewUserMessage={this.handleNewUserMessage}
+          handleQuickButtonClicked={this.handleQuickButtonClicked}
+          imagePreview
+          handleSubmit={this.handleSubmit}
         />
       </div>
     );

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.0",
+  "version": "3.0.3",
   "description": "Chat web widget for React apps",
   "main": "lib/index.js",
   "repository": "git@github.com:Wolox/react-chat-widget.git",
@@ -25,8 +25,6 @@
     "markdown-it-link-attributes": "^2.1.0",
     "markdown-it-sanitizer": "^0.4.3",
     "markdown-it-sup": "^1.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"
   },
@@ -76,6 +74,8 @@
     "postcss-loader": "^2.1.3",
     "prettier": "^1.1.0",
     "prettier-eslint": "^5.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "sass-loader": "^6.0.6",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.18.2",

src/components/Widget/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   showTimeStamp: boolean;
   imagePreview?: boolean;
   zoomStep?: number;
+  handleSubmit?: AnyFunction;
 }
 
 function Widget({
@@ -48,6 +49,7 @@ function Widget({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  handleSubmit
 }: Props) {
   const dispatch = useDispatch();
 
@@ -58,11 +60,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

@@ -27,6 +27,7 @@ type Props = {
   showTimeStamp?: boolean;
   imagePreview?: boolean;
   zoomStep?: number;
+  handleSubmit?: AnyFunction;
 } & typeof defaultProps;
 
 function ConnectedWidget({
@@ -49,6 +50,7 @@ function ConnectedWidget({
   showTimeStamp,
   imagePreview,
   zoomStep,
+  handleSubmit
 }: Props) {
   return (
     <Provider store={store}>
@@ -72,6 +74,7 @@ function ConnectedWidget({
         showTimeStamp={showTimeStamp}
         imagePreview={imagePreview}
         zoomStep={zoomStep}
+        handleSubmit={handleSubmit}
       />
     </Provider>
   );

src/store/reducers/quickButtonsReducer.ts

@@ -8,8 +8,8 @@ const initialState = {
 };
 
 const quickButtonsReducer = {
-  [SET_QUICK_BUTTONS]: (state: QuickButtonsState, { buttons }) =>
-    ({ quickButtons: [...state.quickButtons, ...buttons.map((button: QuickButton) => createQuickButton(button))] })
+  [SET_QUICK_BUTTONS]: (_: QuickButtonsState, { buttons }) =>
+    ({ quickButtons: [...buttons.map((button: QuickButton) => createQuickButton(button))] })
 }
 
 export default (state = initialState, action: QuickButtonsActions) => createReducer(quickButtonsReducer, state, action);