wip - Dropzone Component #23

jovertical · Apr 1, 2019 · 374078f · 374078f
1 parent 4c853db
commit 374078f
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
         "prop-types": "^15.6.2",
         "react": "^16.8.1",
         "react-dom": "^16.8.1",
+        "react-dropzone": "^10.1.0",
         "react-loading-skeleton": "^1.1.1",
         "react-router-dom": "^4.3.1",
         "yup": "^0.26.10"

diff --git a/resources/js/ui/Dropzone.js b/resources/js/ui/Dropzone.js
@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDropzone } from 'react-dropzone';
+
+import { Grid, RootRef, Typography, withStyles } from '@material-ui/core';
+import classNames from 'classnames';
+
+function Dropzone(props) {
+    const { classes } = props;
+
+    const [files, setFiles] = useState([]);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: 'image/*',
+        maxSize: 1 * 1000 * 1000,
+        onDrop: acceptedFiles => {
+            setFiles(
+                files.concat(
+                    acceptedFiles.map(file =>
+                        Object.assign(file, {
+                            url: URL.createObjectURL(file),
+                        }),
+                    ),
+                ),
+            );
+        },
+    });
+
+    const { ref, ...rootProps } = getRootProps();
+
+    useEffect(
+        () => () => {
+            // Make sure to revoke the data uris to avoid memory leaks.
+            files.forEach(file => URL.revokeObjectURL(file.preview));
+        },
+        [files],
+    );
+
+    return (
+        <RootRef rootRef={ref}>
+            <Grid
+                {...rootProps}
+                container
+                spacing={8}
+                justify="center"
+                alignItems="center"
+                className={classes.root}
+            >
+                <input {...getInputProps()} />
+
+                {files.length > 0 ? (
+                    files
+                        .map((file, key) => (
+                            <Grid item key={key}>
+                                <img
+                                    src={file.url}
+                                    className={classNames(
+                                        classes.file,
+                                        classes.image,
+                                    )}
+                                />
+
+                                <Typography
+                                    color="primary"
+                                    className={classes.removeLink}
+                                >
+                                    Remove File
+                                </Typography>
+                            </Grid>
+                        ))
+                        .concat([
+                            <Grid item key="addFile">
+                                <div
+                                    className={classNames(
+                                        classes.file,
+                                        classes.addFile,
+                                    )}
+                                >
+                                    <Typography
+                                        className={classNames(
+                                            classes.text,
+                                            classes.textIcon,
+                                        )}
+                                    >
+                                        +
+                                    </Typography>
+                                </div>
+
+                                <Typography>&nbsp;</Typography>
+                            </Grid>,
+                        ])
+                ) : (
+                    <Grid item>
+                        <Typography className={classes.text}>
+                            {isDragActive
+                                ? `Drag files here`
+                                : `Drag 'n' drop some files here, or click to select files`}
+                        </Typography>
+                    </Grid>
+                )}
+            </Grid>
+        </RootRef>
+    );
+}
+
+Dropzone.propTypes = {
+    onDrop: PropTypes.func,
+};
+
+const styles = theme => ({
+    root: {
+        border: `2px dashed ${theme.palette.grey[500]}`,
+        backgroundColor: theme.palette.grey[200],
+        minHeight: 250,
+    },
+
+    text: {
+        color: theme.palette.grey[500],
+    },
+
+    textIcon: {
+        fontSize: 75,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+
+    removeLink: {
+        textAlign: 'center',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+
+    file: {
+        border: `3px solid ${theme.palette.grey[500]}`,
+        borderRadius: '5%',
+        width: 120,
+        height: 120,
+    },
+
+    image: {
+        '&:hover': {
+            filter: 'blur(4px)',
+        },
+    },
+
+    addFile: {
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+});
+
+export default withStyles(styles)(Dropzone);
diff --git a/resources/js/ui/index.js b/resources/js/ui/index.js
@@ -1,5 +1,6 @@
 import loadable from '@loadable/component';
 
+export const Dropzone = loadable(() => import('./Dropzone'));
 export const Modal = loadable(() => import('./Modal'));
 export const Skeleton = loadable(() => import('./Skeleton'));
 export const Snackbar = loadable(() => import('./Snackbar'));

diff --git a/resources/js/views/__backoffice/users/Create.js b/resources/js/views/__backoffice/users/Create.js
@@ -19,7 +19,7 @@ import { Profile, Account, Avatar } from './Forms';
 class Create extends Component {
     state = {
         loading: false,
-        activeStep: 0,
+        activeStep: 2,
         formValues: [],
         errors: {},
         message: {},

diff --git a/resources/js/views/__backoffice/users/Forms/Avatar.js b/resources/js/views/__backoffice/users/Forms/Avatar.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 
 import { Button, Grid, Typography, withStyles } from '@material-ui/core';
 
+import { Dropzone } from '../../../../ui';
+
 const Avatar = props => {
     const { classes, values, errors, handleSubmit, handleSkip } = props;
 
@@ -12,7 +14,7 @@ const Avatar = props => {
                 Avatar Upload
             </Typography>
 
-            <div className={classes.root} />
+            <Dropzone />
 
             <div className={classes.sectionSpacer} />