ar-design
Version:
AR Design is a (react | nextjs) ui library.
56 lines (55 loc) • 3.39 kB
JavaScript
"use client";
import React, { memo, useEffect, useState } from "react";
import { ARIcon } from "../../icons";
import Utils from "../../../libs/infrastructure/shared/Utils";
import Buttons from "./Buttons";
const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
const [selectedFile, setSelectedFile] = useState(undefined);
const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
const [fileBase64Map, setFileBase64Map] = useState({});
// methods
const handleSelectFile = async (file) => {
setSelectedFile(file);
setSelectedFileBase64(fileBase64Map[file.name]);
};
const renderFileCard = (file) => {
const fileInfo = Utils.GetFileTypeInformation(file.type);
const message = validationErrors.find((v) => v.fileName === file.name)?.message;
const base64 = fileBase64Map[file.name];
return (React.createElement("div", { key: file.name, className: "item", style: { backgroundColor: fileInfo.color }, onMouseEnter: (e) => {
e.stopPropagation();
handleSelectFile(file);
} },
message && (React.createElement("div", { className: "error" },
React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
React.createElement("span", null, message))),
React.createElement(Buttons, { selectedFile: file, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
file.type.includes("image") ? (React.createElement("img", { src: base64 })) : (React.createElement(ARIcon, { icon: fileInfo.icon ?? "Document", fill: "var(--white)", size: 32 }))));
};
// useEffects
useEffect(() => {
(async () => {
const newMap = {};
for (const file of selectedFiles) {
const base64 = await handleFileToBase64(file);
newMap[file.name] = base64;
}
setFileBase64Map(newMap);
setSelectedFile(selectedFiles[0]);
setSelectedFileBase64(newMap[selectedFiles[0]?.name]);
})();
}, [selectedFiles]);
return selectedFile ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: "preview" },
selectedFile.type.includes("image") ? (React.createElement("img", { src: selectedFileBase64, className: "selected-image" })) : ("Önizleme Yok."),
React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
React.createElement("div", { className: "informations" },
React.createElement("span", { className: "file-name" }, selectedFile.name),
React.createElement("div", null,
React.createElement("span", { className: "file-size" },
(selectedFile.size / 1024).toFixed(3),
React.createElement("span", { className: "size-type" }, "KB")),
React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType)))),
selectedFiles.length > 1 && React.createElement("div", { className: "items" }, selectedFiles.map((file) => renderFileCard(file))))) : null;
};
export default memo(Dropzone);