@visns-studio/visns-components 1.0.3 → 1.0.5

package/components/cms/visns-dropzone.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useCallback } from "react";
+import { motion } from "framer-motion";
+import { useDropzone } from "react-dropzone";
+import { confirmAlert } from "react-confirm-alert";
+import { File, TrashCan } from "akar-icons";
+
+import "react-confirm-alert/src/react-confirm-alert.css";
+
+import CustomFetch from "../crm/visns-fetch";
+
+function VisnsDropZone(props) {
+	const { alertStateChange, fetchData, files, settings } = props;
+	const [loadingProgress, setLoadingProgress] = useState(0);
+
+	const onDrop = useCallback((acceptedFiles) => {
+		acceptedFiles.forEach((a) => {
+			Vapor.store(a, {
+				progress: (progress) => {
+					setLoadingProgress(progress * 100);
+				},
+			}).then((response) => {
+				setLoadingProgress(0);
+				CustomFetch(
+					settings.url,
+					settings.method,
+					{
+						uuid: response.uuid,
+						key: response.key,
+						bucket: response.bucket,
+						filename: a.name,
+						filesize: a.size,
+						extension: response.extension,
+						...settings.data,
+					},
+					function (result) {
+						if (result.error === "") {
+							fetchData();
+
+							alertStateChange({
+								show: true,
+								alertClass: "dialog success",
+								alertText: String(
+									"File has been successfully uploaded."
+								),
+							});
+						} else {
+							alertStateChange({
+								show: true,
+								alertClass: "dialog error",
+								alertText: String(result.error),
+							});
+						}
+					},
+					function (error) {
+						alertStateChange({
+							show: true,
+							alertClass: "dialog error",
+							alertText: String(error),
+						});
+					}
+				);
+			});
+		});
+	}, []);
+
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+	});
+
+	const handleDownload = (id) => {
+		if (id && id > 0) {
+			window.open(`/ajax/file/download/${id}/${settings.model}`);
+		} else {
+			alertStateChange({
+				show: true,
+				alertClass: "dialog error",
+				alertText: String("Issue with downloading the selected file."),
+			});
+		}
+	};
+
+	const handleDelete = (e, id, name) => {
+		if (e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (id && id > 0) {
+				confirmAlert({
+					title: "Confirm to Delete File",
+					message: "Are you sure you want to delete " + name,
+					buttons: [
+						{
+							label: "Yes",
+							onClick: () => {
+								CustomFetch(
+									`/ajax/file/delete`,
+									"POST",
+									{
+										file_id: id,
+									},
+									function (result) {
+										if (result.error === "") {
+											fetchData();
+										}
+									},
+									function (error) {
+										alertStateChange({
+											show: true,
+											alertClass: "dialog error",
+											alertText: String(error),
+										});
+									}
+								);
+							},
+						},
+						{
+							label: "No",
+							onClick: () => close(),
+						},
+					],
+				});
+			} else {
+				alertStateChange({
+					show: true,
+					alertClass: "dialog error",
+					alertText: String("Issue with deleting the selected file."),
+				});
+			}
+		}
+	};
+
+	return (
+		<>
+			<div className="progress">
+				<motion.div
+					className="progress__bar"
+					initial={{ width: "0%" }}
+					animate={{
+						width: loadingProgress + "%",
+					}}
+					transition={{
+						duration: 1,
+						ease: [0.165, 0.84, 0.44, 1.0],
+					}}
+				/>
+			</div>
+			<section className="dropzone__container">
+				<div {...getRootProps()}>
+					<input {...getInputProps()} />
+					{isDragActive ? (
+						<p>Drop the files here ...</p>
+					) : (
+						<p>
+							Drag 'n' drop some files here, or click to select
+							files
+						</p>
+					)}
+				</div>
+				<ul className="dropzone__files">
+					{files && files.length > 0
+						? files.map((a, b) => (
+								<li
+									onClick={() => {
+										handleDownload(a.id);
+									}}
+									key={"tf-" + b}
+								>
+									<File strokeWidth={2} size={18} />
+									{a.file_name}
+									<button
+										onClick={(event) => {
+											handleDelete(
+												event,
+												a.id,
+												a.file_name
+											);
+										}}
+									>
+										<TrashCan strokeWidth={2} size={18} />
+									</button>
+								</li>
+						  ))
+						: null}
+				</ul>
+			</section>
+		</>
+	);
+}
+
+export default VisnsDropZone;