feat: add file upload button and zone (#5)

src/components/dropzone/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../view';
+
+class DropZone extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: false,
+    };
+    this.ref = React.createRef();
+  }
+  componentDidMount() {
+    this.ref.current.addEventListener('mouseup', this.onDragLeave);
+    this.ref.current.addEventListener('dragenter', this.onDragEnter);
+    this.ref.current.addEventListener('dragover', this.onDragOver);
+    this.ref.current.addEventListener('drop', this.onDrop);
+  }
+  componentWillUnmount() {
+    this.ref.current.removeEventListener('mouseup', this.onDragLeave);
+    this.ref.current.removeEventListener('dragenter', this.onDragEnter);
+    this.ref.current.addEventListener('dragover', this.onDragOver);
+    this.ref.current.removeEventListener('drop', this.onDrop);
+  }
+
+  // TODO: Extract data from files.
+  onDrop = e => {
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    window.alert(`Files dropped: ${files}`);
+    this.setState({ active: false });
+    return false;
+  };
+
+  onDragOver = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    return false;
+  };
+
+  onDragLeave = e => {
+    this.setState({ active: false });
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  };
+
+  onDragEnter = e => {
+    this.setState({ className: true });
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  };
+
+  render() {
+    const {
+      className,
+      style,
+      children,
+      width,
+      height,
+      ...otherProps
+    } = this.props;
+    return (
+      <View
+        className={className}
+        style={{ width: width, height: height, ...style }}
+        inputRef={this.ref}
+        {...otherProps}
+      >
+        {children}
+      </View>
+    );
+  }
+}
+
+DropZone.protoTypes = {
+  className: PropTypes.string,
+  children: PropTypes.children,
+  style: PropTypes.object,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default DropZone;

src/components/fileupload/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+
+const fileBtnStyles = theme => ({
+  wrapper: {
+    position: 'relative',
+    width: '260px',
+    height: '50px',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: theme.colors.lightGrey,
+    color: theme.colors.tundoraGrey,
+    textAlign: 'center',
+    lineHeight: '50px',
+    borderRadius: '3px',
+    fontSize: '30px',
+  },
+  input: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    opacity: '0',
+    width: '100%',
+    height: '100%',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+});
+
+const FileUpload = ({ classes, text }) => (
+  <div className={classes.wrapper}>
+    {text}
+    <input className={classes.input} type="file" />
+  </div>
+);
+
+FileUpload.propTypes = {
+  classes: PropTypes.object.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default injectSheet(fileBtnStyles)(FileUpload);

src/components/view/index.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const View = ({ children, style, className, ...otherProps }) => {
+const View = ({ children, style, className, inputRef, ...otherProps }) => {
   let newStyle = {
     display: otherProps.noFlex ? 'inline' : 'flex',
   };
   if (style !== undefined) {
     newStyle = { ...newStyle, ...style };
   }
   return (
-    <div className={className} style={newStyle} {...otherProps}>
+    <div className={className} style={newStyle} ref={inputRef} {...otherProps}>
       {children}
     </div>
   );

src/views/refund/steps.js

@@ -3,6 +3,8 @@ import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
 import View from '../../components/view';
 import { FaCheckCircle } from 'react-icons/fa';
+import DropZone from '../../components/dropzone';
+import FileUpload from '../../components/fileupload';
 
 const stepOneStyles = theme => ({
   wrapper: {
@@ -13,6 +15,7 @@ const stepOneStyles = theme => ({
   },
   dropZone: {
     height: '300px',
+    zIndex: 2000,
     width: '700px',
     flexDirection: 'column',
     border: `3px dotted ${theme.colors.lightGrey}`,
@@ -23,29 +26,16 @@ const stepOneStyles = theme => ({
     fontSize: '30px',
     color: theme.colors.tundoraGrey,
   },
-  uploadButton: {
-    width: '260px',
-    height: '50px',
-    border: 'none',
-    outline: 'none',
-    backgroundColor: theme.colors.lightGrey,
-    color: theme.colors.tundoraGrey,
-    fontSize: '30px',
-    textAlign: 'center',
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
 });
 
 const StyledStepOne = ({ classes }) => (
   <View className={classes.wrapper}>
-    <View className={classes.dropZone}>
+    <DropZone className={classes.dropZone}>
       <p className={classes.info}>Drag the Refund JSON file here</p>
       <span className={classes.info}>or</span>
       {/*TODO: add ability to upload*/}
-      <span className={classes.uploadButton}>Select file</span>
-    </View>
+      <FileUpload text={'Select file'} />
+    </DropZone>
   </View>
 );