From 4ee56db76c68e3d4332b1b792dc5406b76cef86f Mon Sep 17 00:00:00 2001 From: kristian ranstrom Date: Tue, 19 May 2020 16:56:45 -0600 Subject: [PATCH] Added handleSubmit event used for custom validation --- README.md | 1 + dev/App.tsx | 10 ++++++++++ index.js | 2 +- package-lock.json | 8 ++++++-- package.json | 2 +- src/components/Widget/index.tsx | 15 +++++++++++---- src/index.tsx | 5 ++++- 7 files changed, 34 insertions(+), 9 deletions(-) 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} /> );