SHARE
TWEET

Untitled

a guest Aug 19th, 2019 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react'
  2.  
  3. import { makeStyles } from '@material-ui/core/styles'
  4. import TextField from '@material-ui/core/TextField'
  5. import Paper from '@material-ui/core/Paper'
  6. import List from '@material-ui/core/List'
  7. import ListItem from '@material-ui/core/ListItem'
  8. import ListItemText from '@material-ui/core/ListItemText'
  9. import ListItemAvatar from '@material-ui/core/ListItemAvatar'
  10. import Avatar from '@material-ui/core/Avatar'
  11. import ImageIcon from '@material-ui/icons/Image'
  12.  
  13. import Divider from '@material-ui/core/Divider'
  14.  
  15. const useStyles = makeStyles(theme => ({
  16.   container: {
  17.     display: 'flex',
  18.     flexWrap: 'wrap',
  19.   },
  20.   textField: {
  21.     marginLeft: theme.spacing(1),
  22.     marginRight: theme.spacing(1),
  23.   },
  24.   dense: {
  25.     marginTop: theme.spacing(2),
  26.   },
  27.   menu: {
  28.     width: 200,
  29.   },
  30. }))
  31.  
  32. export default function OutlinedTextFields() {
  33.   const classes = useStyles()
  34.   const [chatHistory, setChatHistory] = useState([])
  35.  
  36.   const handleKeyDown = e => {
  37.     if (e.key === 'Enter') {
  38.       const data = document.getElementById('chat-input').value
  39.       setChatHistory(chatHistory => createRow(data))
  40.       document.getElementById('chat-input').value = ''
  41.       e.preventDefault()
  42.     }
  43.   }
  44.  
  45.   const createRow = value => {
  46.     return (
  47.       <ListItem style={{ padding: '0 0 0 20px' }}>
  48.         <ListItemAvatar>
  49.           <Avatar>
  50.             <ImageIcon />
  51.           </Avatar>
  52.         </ListItemAvatar>
  53.         <ListItemText primary="Braymen" secondary={value} />
  54.       </ListItem>
  55.     )
  56.   }
  57.  
  58.   return (
  59.     <Paper style={{ backgroundColor: 'rgba(0,0,0, .1)' }}>
  60.       <h2
  61.         style={{
  62.           marginBottom: 0,
  63.           paddingTop: '15px',
  64.           textAlign: 'center',
  65.         }}
  66.       >
  67.         Chat Room
  68.       </h2>
  69.  
  70.       <List className={classes.root}>{chatHistory}</List>
  71.  
  72.       <form className={classes.container} noValidate autoComplete="off">
  73.         <TextField
  74.           id="chat-input"
  75.           label="Type a message and hit enter!"
  76.           defaultValue=""
  77.           className={classes.textField}
  78.           margin="normal"
  79.           variant="filled"
  80.           fullWidth
  81.           onKeyDown={handleKeyDown}
  82.         />
  83.       </form>
  84.     </Paper>
  85.   )
  86. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top