diff --git a/README.md b/README.md
index c0a784a97..a9275bdb6 100644
--- a/README.md
+++ b/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
diff --git a/dev/App.tsx b/dev/App.tsx
index 22c2989aa..1976c8c8c 100644
--- a/dev/App.tsx
+++ b/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 (
);
}
diff --git a/index.js b/index.js
index 2a9575f52..45ef84c20 100644
--- a/index.js
+++ b/index.js
@@ -12,7 +12,7 @@ import {
setQuickButtons,
deleteMessages,
markAllAsRead,
- setBadgeCount
+ setBadgeCount,
} from './src/store/dispatcher';
export {
diff --git a/package-lock.json b/package-lock.json
index 22615a370..87f47fa7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-chat-widget",
- "version": "3.0.0-beta",
+ "version": "3.0.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -10976,7 +10976,8 @@
},
"js-yaml": {
"version": "3.7.0",
- "resolved": "",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
+ "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
"dev": true,
"requires": {
"argparse": "^1.0.7",
@@ -15514,6 +15515,7 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
"integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+ "dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@@ -15524,6 +15526,7 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
"integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
+ "dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@@ -16345,6 +16348,7 @@
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
"integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+ "dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
diff --git a/package.json b/package.json
index 0e05c309c..27fd70805 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
index 6aba111de..c290bc6a5 100644
--- a/src/components/Widget/index.tsx
+++ b/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) => {
diff --git a/src/index.tsx b/src/index.tsx
index e2989e2d6..2a54d2b64 100644
--- a/src/index.tsx
+++ b/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 (
@@ -66,6 +68,7 @@ function ConnectedWidget({
launcherCloseLabel={launcherCloseLabel}
sendButtonAlt={sendButtonAlt}
showTimeStamp={showTimeStamp}
+ handleSubmit={handleSubmit}
/>
);