mirror of https://github.com/status-im/chat.git
refactor upload button
This commit is contained in:
parent
fbb2c033ef
commit
f126831da5
|
@ -5,9 +5,7 @@ import autoscroll from 'autoscroll-react';
|
||||||
import List from '@material-ui/core/List';
|
import List from '@material-ui/core/List';
|
||||||
import Divider from '@material-ui/core/Divider';
|
import Divider from '@material-ui/core/Divider';
|
||||||
import Grid from '@material-ui/core/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
import Button from '@material-ui/core/Button';
|
|
||||||
import Dropzone from 'react-dropzone';
|
import Dropzone from 'react-dropzone';
|
||||||
import AddCircle from '@material-ui/icons/AddCircle';
|
|
||||||
|
|
||||||
import Message from './Message';
|
import Message from './Message';
|
||||||
import ChatHeader from './ChatHeader';
|
import ChatHeader from './ChatHeader';
|
||||||
|
@ -15,6 +13,7 @@ import Userlist from './Userlist';
|
||||||
import WhoIsTyping from './WhoIsTyping';
|
import WhoIsTyping from './WhoIsTyping';
|
||||||
import EmojiPicker from './chatInput/EmojiPicker';
|
import EmojiPicker from './chatInput/EmojiPicker';
|
||||||
import ChatTextInput from './chatInput/ChatTextInput';
|
import ChatTextInput from './chatInput/ChatTextInput';
|
||||||
|
import FileUploadButton from './chatInput/FileUploadButton';
|
||||||
import { uploadFileAndSend } from '../utils/ipfs';
|
import { uploadFileAndSend } from '../utils/ipfs';
|
||||||
|
|
||||||
function onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {
|
function onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {
|
||||||
|
@ -54,16 +53,6 @@ class ChatRoom extends Component {
|
||||||
this.setState({ infoPanelActive: !this.state.infoPanelActive })
|
this.setState({ infoPanelActive: !this.state.infoPanelActive })
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadFileDialog() {
|
|
||||||
this.fileInput.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
fileChangedHandler(event) {
|
|
||||||
const { ipfs, sendMessage } = this.props;
|
|
||||||
const file = event.target.files[0];
|
|
||||||
uploadFileAndSend(ipfs, file, sendMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
addEmoji(emoji, chatInput, setValue) {
|
addEmoji(emoji, chatInput, setValue) {
|
||||||
setValue('chatInput', `${chatInput}:${emoji.id}:`);
|
setValue('chatInput', `${chatInput}:${emoji.id}:`);
|
||||||
NameInput.current.labelNode.focus();
|
NameInput.current.labelNode.focus();
|
||||||
|
@ -75,12 +64,6 @@ class ChatRoom extends Component {
|
||||||
const messagesHeight = `calc(100vh - ${messagesOffset}px)`;
|
const messagesHeight = `calc(100vh - ${messagesOffset}px)`;
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100%', flexWrap: 'nowrap', display: 'flex', boxSizing: 'border-box' }} >
|
<div style={{ width: '100%', flexWrap: 'nowrap', display: 'flex', boxSizing: 'border-box' }} >
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={(input) => { this.fileInput = input; }}
|
|
||||||
onChange={this.fileChangedHandler.bind(this)}
|
|
||||||
style={{display: 'none'}}
|
|
||||||
/>
|
|
||||||
<Grid xs={12} item>
|
<Grid xs={12} item>
|
||||||
<Dropzone
|
<Dropzone
|
||||||
onDrop={(a, r) => {
|
onDrop={(a, r) => {
|
||||||
|
@ -135,7 +118,7 @@ class ChatRoom extends Component {
|
||||||
}) => (
|
}) => (
|
||||||
<div className="chat-input">
|
<div className="chat-input">
|
||||||
<form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
|
<form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
|
||||||
<Button onClick={(e) => this.uploadFileDialog()}><AddCircle /></Button>
|
<FileUploadButton ipfs={ipfs} sendMessage={sendMessage} />
|
||||||
<ChatTextInput ref={NameInput} handleChange={handleChange} handleTyping={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)} handleBlur={handleBlur} chatInput={values.chatInput || ''} />
|
<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)} />
|
<EmojiPicker addEmoji={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)} />
|
||||||
{errors.chatInput && touched.chatInput && errors.chatInput}
|
{errors.chatInput && touched.chatInput && errors.chatInput}
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
// TODO: this should be a functional component but for now at least the logic is isolated here
|
||||||
|
import React, { Fragment, PureComponent } from 'react';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
import AddCircle from '@material-ui/icons/AddCircle';
|
||||||
|
import { uploadFileAndSend } from '../../utils/ipfs';
|
||||||
|
|
||||||
|
class FileUploadButton extends PureComponent {
|
||||||
|
|
||||||
|
uploadFileDialog() {
|
||||||
|
this.fileInput.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
fileChangedHandler(event) {
|
||||||
|
const { ipfs, sendMessage } = this.props;
|
||||||
|
const file = event.target.files[0];
|
||||||
|
uploadFileAndSend(ipfs, file, sendMessage);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref={(input) => { this.fileInput = input; }}
|
||||||
|
onChange={this.fileChangedHandler.bind(this)}
|
||||||
|
style={{display: 'none'}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button onClick={(e) => this.uploadFileDialog()}><AddCircle /></Button>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FileUploadButton;
|
Loading…
Reference in New Issue