From 1949c66ed47f82936dccc20e190ffa92d81851c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Wed, 14 Jun 2023 17:36:08 -0400
Subject: [PATCH] jams-react-client: add CustomImgDropZone component
Change-Id: I215dfec7237746fcbcd28aeabecabc5e8701565d
---
.../CustomImgDropZone/CustomImgDropZone.js | 80 +++++++++++++++++++
1 file changed, 80 insertions(+)
create mode 100644 jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
diff --git a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
new file mode 100644
index 00000000..782fd290
--- /dev/null
+++ b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
@@ -0,0 +1,80 @@
+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;
--
GitLab