mirror of https://github.com/status-im/chat.git
refactor some components of the chat input
This commit is contained in:
parent
ac295f5299
commit
fbb2c033ef
|
@ -0,0 +1 @@
|
|||
|
|
@ -5,46 +5,18 @@ import autoscroll from 'autoscroll-react';
|
|||
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 Button from '@material-ui/core/Button';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import AddCircle from '@material-ui/icons/AddCircle';
|
||||
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
|
||||
import Message from './Message';
|
||||
import ChatHeader from './ChatHeader';
|
||||
import Userlist from './Userlist';
|
||||
import WhoIsTyping from './WhoIsTyping';
|
||||
import EmojiPicker from './chatInput/EmojiPicker';
|
||||
import ChatTextInput from './chatInput/ChatTextInput';
|
||||
import { uploadFileAndSend } from '../utils/ipfs';
|
||||
|
||||
class WhoIsTyping extends PureComponent {
|
||||
|
||||
whoIsTyping() {
|
||||
const { users, usersTyping, currentChannel } = this.props;
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
const typingInChannel = usersTyping[currentChannel];
|
||||
const typingUsers = [];
|
||||
for (let pubkey in typingInChannel) {
|
||||
const lastTyped = typingInChannel[pubkey];
|
||||
if (!users[pubkey]) continue;
|
||||
if (currentTime - lastTyped > 3*1000 || currentTime < lastTyped) continue;
|
||||
typingUsers.push(users[pubkey].username)
|
||||
}
|
||||
return typingUsers;
|
||||
}
|
||||
|
||||
render() {
|
||||
const userList = this.whoIsTyping();
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
{!userList.length ? "" : `${userList.join(',')} is typing`}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {
|
||||
const file = acceptedFiles[0];
|
||||
uploadFileAndSend(ipfs, file, sendMessage);
|
||||
|
@ -74,15 +46,10 @@ class ChatRoom extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showEmojis: false,
|
||||
infoPanelActive: true
|
||||
};
|
||||
}
|
||||
|
||||
toggleEmojis(e) {
|
||||
this.setState(({ showEmojis: !this.state.showEmojis }));
|
||||
}
|
||||
|
||||
toggleInfoPanel = () => {
|
||||
this.setState({ infoPanelActive: !this.state.infoPanelActive })
|
||||
}
|
||||
|
@ -98,16 +65,13 @@ class ChatRoom extends Component {
|
|||
}
|
||||
|
||||
addEmoji(emoji, chatInput, setValue) {
|
||||
console.log(emoji);
|
||||
setValue('chatInput', `${chatInput}:${emoji.id}:`);
|
||||
this.setState(({showEmojis: false}), () => {
|
||||
NameInput.current.labelNode.focus();
|
||||
});
|
||||
NameInput.current.labelNode.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { messages, sendMessage, currentChannel, usersTyping, typingEvent, allUsers, ipfs } = this.props;
|
||||
const { showEmojis, infoPanelActive } = this.state;
|
||||
const { infoPanelActive } = this.state;
|
||||
const messagesHeight = `calc(100vh - ${messagesOffset}px)`;
|
||||
return (
|
||||
<div style={{ width: '100%', flexWrap: 'nowrap', display: 'flex', boxSizing: 'border-box' }} >
|
||||
|
@ -172,25 +136,8 @@ class ChatRoom extends Component {
|
|||
<div className="chat-input">
|
||||
<form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
|
||||
<Button onClick={(e) => this.uploadFileDialog()}><AddCircle /></Button>
|
||||
<TextField
|
||||
id="chatInput"
|
||||
ref={NameInput}
|
||||
multiline
|
||||
style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }}
|
||||
label="Type a message..."
|
||||
type="text"
|
||||
name="chatInput"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleChange}
|
||||
onKeyDown={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)}
|
||||
onBlur={handleBlur}
|
||||
value={values.chatInput || ''}
|
||||
/>
|
||||
{showEmojis && <Picker onSelect={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)}
|
||||
style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>}
|
||||
<Button onClick={(e) => this.toggleEmojis(e)}>Smile</Button>
|
||||
<ChatTextInput ref={NameInput} handleChange={handleChange} handleTyping={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)} handleBlur={handleBlur} chatInput={values.chatInput || ''} />
|
||||
<EmojiPicker addEmoji={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)} />
|
||||
{errors.chatInput && touched.chatInput && errors.chatInput}
|
||||
</form>
|
||||
<WhoIsTyping
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
|
||||
class WhoIsTyping extends PureComponent {
|
||||
|
||||
// TODO: all this logic will soon come from status chat lib and much more efficient
|
||||
whoIsTyping() {
|
||||
const { users, usersTyping, currentChannel } = this.props;
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
const typingInChannel = usersTyping[currentChannel];
|
||||
const typingUsers = [];
|
||||
for (let pubkey in typingInChannel) {
|
||||
const lastTyped = typingInChannel[pubkey];
|
||||
if (!users[pubkey]) continue;
|
||||
if (currentTime - lastTyped > 3*1000 || currentTime < lastTyped) continue;
|
||||
typingUsers.push(users[pubkey].username)
|
||||
}
|
||||
return typingUsers;
|
||||
}
|
||||
|
||||
render() {
|
||||
const userList = this.whoIsTyping();
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
{!userList.length ? "" : `${userList.join(',')} is typing`}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default WhoIsTyping;
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
const ChatTextInput = ({ref, handleTyping, handleChange, handleBlur, chatInput}) => (
|
||||
<TextField
|
||||
id="chatInput"
|
||||
ref={ref}
|
||||
multiline
|
||||
style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }}
|
||||
label="Type a message..."
|
||||
type="text"
|
||||
name="chatInput"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleTyping}
|
||||
onBlur={handleBlur}
|
||||
value={chatInput}
|
||||
/>
|
||||
)
|
||||
|
||||
export default ChatTextInput;
|
|
@ -0,0 +1,36 @@
|
|||
import React, { PureComponent, Fragment } from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
|
||||
class EmojiPicker extends PureComponent {
|
||||
|
||||
state = {
|
||||
showEmojis: false
|
||||
}
|
||||
|
||||
addEmoji(emoji) {
|
||||
console.log(emoji);
|
||||
this.setState(({showEmojis: false}), () => {
|
||||
this.props.addEmoji(emoji)
|
||||
});
|
||||
}
|
||||
|
||||
toggleEmojis(e) {
|
||||
this.setState(({ showEmojis: !this.state.showEmojis }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { showEmojis } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
{showEmojis && <Picker onSelect={(emoji) => this.addEmoji(emoji)}
|
||||
style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>}
|
||||
<Button onClick={(e) => this.toggleEmojis(e)}>Smile</Button>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export default EmojiPicker;
|
Loading…
Reference in New Issue