UploadButton

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'
+};