Components -> UI

1 files changed, 42 insertions, 0 deletions

diff --git a/vnext/src/ui/UploadButton.js b/vnext/src/ui/UploadButton.js
new file mode 100644
index 00000000..73cbbfcf
--- /dev/null
+++ b/vnext/src/ui/UploadButton.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+export default function UploadButton(props) {
+    let openfile = () => {
+        const input = props.inputRef.current;
+        if (props.value) {
+            props.onChange('');
+        } else {
+            input.click();
+        }
+    };
+    let attachmentChanged = (event) => {
+        props.onChange(event.target.value);
+    };
+    return (
+        <div style={props.value ? activeStyle : inactiveStyle}
+            onClick={openfile}>
+            <Icon name="ei-camera" size="s" />
+            <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()}
+                style={{ display: 'none' }} ref={props.inputRef} value={props.value}
+                onChange={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'
+};