aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/MessageInput.js33
-rw-r--r--vnext/src/components/UploadButton.js47
2 files changed, 52 insertions, 28 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 83b9f466..66e6ca02 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -6,6 +6,8 @@ import { MessageType } from './Types';
import Icon from './Icon';
import Button from './Button';
+import UploadButton from './UploadButton';
+
export default class MessageInput extends React.Component {
constructor(props) {
super(props);
@@ -61,21 +63,11 @@ export default class MessageInput extends React.Component {
const height = el.scrollHeight + offset;
el.style.height = `${height + offset}px`;
}
- attachmentChanged = (event) => {
+ uploadValueChanged = (attach) => {
this.setState({
- attach: event.target.value
+ attach: attach
});
}
- openfile = () => {
- const input = this.fileinput.current;
- if (this.state.attach) {
- this.setState({
- attach: ''
- });
- } else {
- input.click();
- }
- }
render() {
return (
<form className="msg-comment-target">
@@ -84,13 +76,7 @@ export default class MessageInput extends React.Component {
ref={this.textarea} style={textInputStyle} value={this.state.body}
rows={this.props.rows || '1'} placeholder={this.props.children} />
<div style={inputBarStyle}>
- <div style={this.state.attach ? activeStyle : inactiveStyle}
- onClick={this.openfile}>
- <Icon name="ei-camera" size="s" />
- <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()}
- style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
- onChange={this.attachmentChanged} />
- </div>
+ <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} />
<Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
</div>
</div>
@@ -106,15 +92,6 @@ const commentStyle = {
marginTop: '10px'
};
-const inactiveStyle = {
- cursor: 'pointer',
- color: '#888'
-};
-const activeStyle = {
- cursor: 'pointer',
- color: 'green'
-};
-
const inputBarStyle = {
display: 'flex',
borderTop: '1px #eee solid',
diff --git a/vnext/src/components/UploadButton.js b/vnext/src/components/UploadButton.js
new file mode 100644
index 00000000..5dfa7a1d
--- /dev/null
+++ b/vnext/src/components/UploadButton.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+export default class UploadButton extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ openfile = () => {
+ const input = this.props.inputRef.current;
+ if (this.props.value) {
+ this.props.onChange('');
+ } else {
+ input.click();
+ }
+ }
+ attachmentChanged = (event) => {
+ this.props.onChange(event.target.value);
+ }
+ render() {
+ return (
+ <div style={this.props.value ? activeStyle : inactiveStyle}
+ onClick={this.openfile}>
+ <Icon name="ei-camera" size="s" />
+ <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()}
+ style={{ display: 'none' }} ref={this.props.inputRef} value={this.props.value}
+ onChange={this.attachmentChanged} />
+ </div>
+ );
+ }
+}
+
+UploadButton.propTypes = {
+ value: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+};
+
+const inactiveStyle = {
+ cursor: 'pointer',
+ color: '#888'
+};
+const activeStyle = {
+ cursor: 'pointer',
+ color: 'green'
+};