jams-react-client: add CustomImgDropZone component

Change-Id: I215dfec7237746fcbcd28aeabecabc5e8701565d

jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Dropzone from "react-dropzone";
+import UploadIcon from "@material-ui/icons/CloudUpload";
+import CloseIcon from "@material-ui/icons/Close";
+
+const useStyles = makeStyles({
+  dropzoneStyle: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "20px",
+    background: "#0000001A 0% 0% no-repeat padding-box",
+    borderRadius: "5px",
+    opacity: "1",
+    outline: "none",
+    transition: "border .24s ease-in-out",
+    cursor: "pointer",
+    border: "none",
+    height: "10px",
+    width: "max-content",
+  },
+  uploadIconStyle: {
+    fontSize: "35px",
+    marginBottom: "10px",
+    marginRight: "10px",
+  },
+  deleteButton: {
+    backgroundColor: "transparent",
+    border: "none",
+  },
+});
+
+function CustomImgDropZone(props) {
+  const {
+    onDrop,
+    accept,
+    maxFiles,
+    label,
+    file,
+    handleDelete,
+    ...rest
+  } = props;
+  const classes = useStyles();
+
+  const handleDrop = (acceptedFiles) => {
+    if (acceptedFiles.length > 0) {
+      onDrop(acceptedFiles);
+    }
+  };
+
+  return (
+    <Dropzone onDrop={handleDrop} accept={accept} maxFiles={maxFiles} {...rest}>
+      {({ getRootProps, getInputProps }) => (
+        <div {...getRootProps()} className={classes.dropzoneStyle}>
+          <input {...getInputProps()} />
+          <UploadIcon className={classes.uploadIconStyle} />
+          {file ? (
+            <>
+              <span>{file}</span>
+              <button onClick={handleDelete} className={classes.deleteButton}>
+                <CloseIcon style={{ color: "red" }} />
+              </button>
+            </>
+          ) : (
+            <span>{label}</span>
+          )}
+        </div>
+      )}
+    </Dropzone>
+  );
+}
+
+CustomImgDropZone.defaultProps = {
+  accept: { "image/*": [".png", ".jpeg", ".jpg"] },
+  maxFiles: 1,
+};
+
+export default CustomImgDropZone;