Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix handleSubmit and updated packages #315

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix handleSubmit and updated packages #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0ee060
fixed handleSubmit and updatedpackages
redapollos Jan 7, 2023
2c85be0
fixed emoji picker
redapollos Jan 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions dev/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Component } from 'react';
import React, { Component } from 'react';

import { Widget, addResponseMessage, setQuickButtons, toggleMsgLoader, addLinkSnippet } from '../index';
import { addUserMessage } from '..';

export default class App extends Component {
componentDidMount() {
Expand All @@ -28,11 +27,11 @@ export default class App extends Component {
setQuickButtons([]);
}

handleSubmit = (msgText: string) => {
if(msgText.length < 80) {
addUserMessage("Uh oh, please write a bit more.");
return false;
}
handleSubmit = (msgText: string) => {
if (msgText.length < 10) {
addResponseMessage("Uh oh, please write a bit more.");
return false;
}
return true;
}

Expand Down
8 changes: 5 additions & 3 deletions dev/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import * as ReactDOM from 'react-dom';

import React from 'react';
import ReactDOM from "react-dom/client";
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById("root")!;
const root = ReactDOM.createRoot(container);
root.render(<App />);
46,554 changes: 27,639 additions & 18,915 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

225 changes: 114 additions & 111 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,119 @@
{
"name": "react-chat-widget",
"version": "3.1.4",
"description": "Chat web widget for React apps",
"main": "lib/index.js",
"repository": "[email protected]:Wolox/react-chat-widget.git",
"author": "Martín Callegari <[email protected]>",
"license": "MIT",
"types": "./lib/index.d.ts",
"scripts": {
"start": "webpack serve --config webpack.config.dev.js",
"build": "webpack --config ./webpack.config.prod.js",
"test": "jest --coverage"
},
"keywords": [
"react",
"chat",
"widget",
"javascript"
],
"dependencies": {
"classnames": "^2.2.6",
"date-fns": "^2.11.1",
"emoji-mart": "^3.0.1",
"markdown-it": "^8.4.1",
"markdown-it-link-attributes": "^2.1.0",
"markdown-it-sanitizer": "^0.4.3",
"markdown-it-sup": "^1.0.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.14.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/preset-env": "^7.14.1",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.8.3",
"@toycode/markdown-it-class": "^1.2.3",
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
"@types/jest": "^25.1.4",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-redux": "^7.1.7",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"autoprefixer": "^8.2.0",
"babel-jest": "^19.0.0",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.0.0",
"caniuse-lite": "^1.0.30001219",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.4",
"enzyme": "^3.11.0",
"eslint": "^6.8.0",
"eslint-config-wolox": "^4.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-flowtype": "^2.30.4",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-prettier": "^3.4.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^5.3.1",
"husky": "^4.2.3",
"jest": "^25.5.4",
"mini-css-extract-plugin": "^1.5.1",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.2.13",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.1.0",
"prettier-eslint": "^9.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"redux-mock-store": "^1.5.4",
"sass-loader": "^11.0.1",
"source-map-loader": "^2.0.1",
"style-loader": "^2.0.0",
"ts-jest": "^25.3.1",
"ts-loader": "^9.1.1",
"typescript": "^4.2.4",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^4.1.1",
"webpack": "^5.36.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"jest": {
"verbose": true,
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.(js|jsx)$": "babel-jest"
"name": "react-chat-widget",
"version": "3.1.4",
"description": "Chat web widget for React apps",
"main": "lib/index.js",
"repository": "[email protected]:Wolox/react-chat-widget.git",
"author": "Martín Callegari <[email protected]>",
"license": "MIT",
"types": "./lib/index.d.ts",
"scripts": {
"start": "webpack serve --config webpack.config.dev.js",
"build": "webpack --config ./webpack.config.prod.js",
"test": "jest --coverage"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
"keywords": [
"react",
"chat",
"widget",
"javascript"
],
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
"\\.(css|scss)$": "<rootDir>/mocks/styleMock.js"
"dependencies": {
"@emoji-mart/data": "^1.1.1",
"@emoji-mart/react": "^1.1.1",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
"emoji-mart": "^5.4.0",
"markdown-it": "^13.0.1",
"markdown-it-link-attributes": "^4.0.1",
"markdown-it-sanitizer": "^0.4.3",
"markdown-it-sup": "^1.0.0",
"react-redux": "^8.0.5",
"redux": "^4.2.0"
},
"devDependencies": {
"@babel/cli": "^7.20.7",
"@babel/core": "^7.20.12",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-transform-react-jsx": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@toycode/markdown-it-class": "^1.2.4",
"@types/classnames": "^2.3.0",
"@types/enzyme": "^3.10.12",
"@types/jest": "^29.2.5",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@types/react-redux": "^7.1.25",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.3.1",
"babel-loader": "^9.1.2",
"babel-plugin-module-resolver": "^4.1.0",
"caniuse-lite": "^1.0.30001442",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.3",
"enzyme": "^3.11.0",
"eslint": "^8.31.0",
"eslint-config-wolox": "^4.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.3",
"jest": "^29.3.1",
"mini-css-extract-plugin": "^2.7.2",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"postcss-preset-env": "^7.8.3",
"prettier": "^2.8.2",
"prettier-eslint": "^15.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"redux-mock-store": "^1.5.4",
"sass": "^1.57.1",
"sass-loader": "^13.2.0",
"source-map-loader": "^4.0.1",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"ts-jest": "^29.0.3",
"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"peerDependencies": {
"react": "^18.0.2",
"react-dom": "^18.0.2"
},
"jest": {
"verbose": true,
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.(js|jsx)$": "babel-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
"\\.(css|scss)$": "<rootDir>/mocks/styleMock.js"
}
}
}
}
17 changes: 12 additions & 5 deletions src/components/Widget/components/Conversation/components/Sender/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
import cn from 'classnames';

import { GlobalState } from 'src/store/types';
import { AnyFunction } from '../../../../../../utils/types';

import { getCaretIndex, isFirefox, updateCaret, insertNodeAtCaret, getSelection } from '../../../../../../utils/contentEditable'
const send = require('../../../../../../../assets/send_button.svg') as string;
Expand All @@ -19,10 +20,11 @@ type Props = {
buttonAlt: string;
onPressEmoji: () => void;
onChangeSize: (event: any) => void;
onTextInputChange?: (event: any) => void;
onTextInputChange?: (event: any) => void;
handleSubmit?: AnyFunction;
}

function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, onPressEmoji, onChangeSize }: Props, ref) {
function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, onPressEmoji, onChangeSize, handleSubmit }: Props, ref) {
const showChat = useSelector((state: GlobalState) => state.behavior.showChat);
const inputRef = useRef<HTMLDivElement>(null!);
const refContainer = useRef<HTMLDivElement>(null);
Expand All @@ -45,9 +47,14 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu

const handlerSendMessage = () => {
const el = inputRef.current;
if(el.innerHTML) {
sendMessage(el.innerText);
el.innerHTML = ''
if (el.innerHTML) {

// check to see if there is a handleSubmit function and validate the text if so
const boo = handleSubmit?.(el.innerHTML);
if (handleSubmit === undefined || boo) {
sendMessage(el.innerText);
el.innerText = '';
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Widget/components/Conversation/components/Sender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'variables/colors';

.rcw-sender {
align-items: flex-end;
align-items: center;
background-color: $grey-2;
border-radius: 0 0 10px 10px;
display: flex;
Expand Down
21 changes: 11 additions & 10 deletions src/components/Widget/components/Conversation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useRef, useState, useEffect } from 'react';
import { Picker } from 'emoji-mart';
import cn from 'classnames';

import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react';
import Header from './components/Header';
import Messages from './components/Messages';
import Sender from './components/Sender';
Expand Down Expand Up @@ -33,7 +33,8 @@ type Props = {
sendButtonAlt: string;
showTimeStamp: boolean;
resizable?: boolean;
emojis?: boolean;
emojis?: boolean;
handleSubmit?: AnyFunction;
};

function Conversation({
Expand All @@ -54,7 +55,8 @@ function Conversation({
sendButtonAlt,
showTimeStamp,
resizable,
emojis
emojis,
handleSubmit
}: Props) {
const [containerDiv, setContainerDiv] = useState<HTMLElement | null>();
let startX, startWidth;
Expand Down Expand Up @@ -90,7 +92,8 @@ function Conversation({
const senderRef = useRef<ISenderRef>(null!);
const [pickerStatus, setPicket] = useState(false)

const onSelectEmoji = (emoji) => {
const onSelectEmoji = (emoji) => {
console.log(emoji);
senderRef.current?.onSelectEmoji(emoji)
}

Expand Down Expand Up @@ -120,10 +123,7 @@ function Conversation({
showTimeStamp={showTimeStamp}
/>
<QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
{emojis && pickerStatus && (<Picker
style={{ position: 'absolute', bottom: pickerOffset, left: '0', width: '100%' }}
onSelect={onSelectEmoji}
/>)}
{emojis && pickerStatus && (<Picker data={data} onEmojiSelect={onSelectEmoji}/>)}
<Sender
ref={senderRef}
sendMessage={handlerSendMsn}
Expand All @@ -133,7 +133,8 @@ function Conversation({
onTextInputChange={onTextInputChange}
buttonAlt={sendButtonAlt}
onPressEmoji={togglePicker}
onChangeSize={setOffset}
onChangeSize={setOffset}
handleSubmit={handleSubmit}
/>
</div>
);
Expand Down
Loading