submit message on enter
This commit is contained in:
Barry Gitarts
parent
deb5e781cb
commit
caa885bf7e
|
|
@ -1,16 +1,13 @@
|
|||
// @flow
|
||||
import React, { Fragment } from 'react';
|
||||
import { Formik } from 'formik';
|
||||
import List from '@material-ui/core/List';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import ChatBox from './ChatBox.js';
|
||||
import ChatBox from './ChatBox';
|
||||
|
||||
|
||||
const messageSend = (send, value) => {
|
||||
send(value);
|
||||
value = "";
|
||||
};
|
||||
const listStyle = { overflow: 'scroll', height: '85%' };
|
||||
const ChatRoom = ({ messages, sendMessage }) => (
|
||||
<div style={{ height: '100vh' }}>
|
||||
|
|
@ -32,15 +29,40 @@ const ChatRoom = ({ messages, sendMessage }) => (
|
|||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<TextField
|
||||
id="outlined-search"
|
||||
label="Type a message..."
|
||||
type="text"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onBlur={(e) => { messageSend(sendMessage, e.target.value) }}
|
||||
/>
|
||||
<Formik
|
||||
initialValues={{ chatInput: '' }}
|
||||
onSubmit={(values, { setSubmitting, resetForm }) => {
|
||||
const { chatInput } = values;
|
||||
sendMessage(chatInput);
|
||||
resetForm();
|
||||
setSubmitting(false);
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
id="chatInput"
|
||||
label="Type a message..."
|
||||
type="text"
|
||||
name="chatInput"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
value={values.chatInput || ''}
|
||||
/>
|
||||
{errors.chatInput && touched.chatInput && errors.chatInput}
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -262,6 +262,7 @@
|
|||
"electron-debug": "^2.0.0",
|
||||
"electron-log": "^2.2.17",
|
||||
"electron-updater": "^3.1.6",
|
||||
"formik": "^1.3.1",
|
||||
"history": "^4.7.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
|
|
|
|||
47
yarn.lock
47
yarn.lock
|
|
@ -3512,6 +3512,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
|||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
create-react-context@^0.2.2:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
|
||||
dependencies:
|
||||
fbjs "^0.8.0"
|
||||
gud "^1.0.0"
|
||||
|
||||
cross-env@^5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
|
||||
|
|
@ -3964,7 +3971,7 @@ deep-is@~0.1.3:
|
|||
version "0.1.3"
|
||||
resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
|
||||
|
||||
deepmerge@^2.0.1:
|
||||
deepmerge@^2.0.1, deepmerge@^2.1.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
|
||||
|
||||
|
|
@ -5204,7 +5211,7 @@ fbjs-scripts@^0.8.3:
|
|||
semver "^5.1.0"
|
||||
through2 "^2.0.0"
|
||||
|
||||
fbjs@^0.8.1:
|
||||
fbjs@^0.8.0, fbjs@^0.8.1:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
dependencies:
|
||||
|
|
@ -5443,6 +5450,20 @@ form-data@~2.3.2:
|
|||
combined-stream "^1.0.6"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
formik@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/formik/-/formik-1.3.1.tgz#ff2bb4c0144585297cf9a371081326e8d816fe6f"
|
||||
dependencies:
|
||||
create-react-context "^0.2.2"
|
||||
deepmerge "^2.1.1"
|
||||
hoist-non-react-statics "^2.5.5"
|
||||
lodash.clonedeep "^4.5.0"
|
||||
lodash.topath "4.5.2"
|
||||
prop-types "^15.6.1"
|
||||
react-fast-compare "^1.0.0"
|
||||
tslib "^1.9.3"
|
||||
warning "^3.0.0"
|
||||
|
||||
forwarded@~0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
|
||||
|
|
@ -5851,6 +5872,10 @@ growly@^1.3.0:
|
|||
version "1.3.0"
|
||||
resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
|
||||
|
||||
gud@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
|
||||
|
||||
gulp-clone@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmjs.org/gulp-clone/-/gulp-clone-2.0.1.tgz#cf4ecb28ca46d032f6949271e8bf7986e78e6ff9"
|
||||
|
|
@ -6035,7 +6060,7 @@ hmac-drbg@^1.0.0:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
|
||||
hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5:
|
||||
version "2.5.5"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
|
||||
|
||||
|
|
@ -7634,9 +7659,9 @@ lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
|
|||
version "4.2.0"
|
||||
resolved "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
|
||||
|
||||
lodash.clonedeep@^4.3.2:
|
||||
lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
|
|
@ -7674,6 +7699,10 @@ lodash.tail@^4.1.1:
|
|||
version "4.1.1"
|
||||
resolved "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
|
||||
|
||||
lodash.topath@4.5.2:
|
||||
version "4.5.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
|
||||
|
||||
lodash.uniq@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
|
|
@ -9747,6 +9776,10 @@ react-event-listener@^0.6.2:
|
|||
prop-types "^15.6.0"
|
||||
warning "^4.0.1"
|
||||
|
||||
react-fast-compare@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "http://registry.npmjs.org/react-fast-compare/-/react-fast-compare-1.0.0.tgz#813a039155e49b43ceffe99528fe5e9d97a6c938"
|
||||
|
||||
react-hot-loader@^4.3.4:
|
||||
version "4.3.11"
|
||||
resolved "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.11.tgz#fe5cf7be7700c249b58293f977c1e6e0900f0d87"
|
||||
|
|
@ -11807,9 +11840,9 @@ tryer@^1.0.0:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
|
||||
|
||||
tslib@^1.9.0:
|
||||
tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
|
||||
tty-browserify@0.0.0:
|
||||
version "0.0.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue