ar-design 0.2.89 → 0.2.90

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -1,5 +1,5 @@
 .ar-typography-title {
   color: var(--gray-700);
   font-family: var(--system);
-  /* -webkit-text-stroke: 0.5px var(--gray-700); */
+  font-weight: 400;
 }

package/dist/assets/css/components/form/upload/{preview-selected-files.css → dropzone.css}

@@ -1,19 +1,18 @@
-.ar-upload-button > .button.multiple > .preview {
+.ar-upload-button > .button.dropzone > .preview {
   position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   width: 100%;
   height: 100%;
-  border-right: solid 1px rgba(var(--black-rgb), 0.75);
 }
-.ar-upload-button > .button.multiple > .preview > .selected-image {
+.ar-upload-button > .button.dropzone > .preview > .selected-image {
   height: 100%;
   object-fit: fill;
   object-position: top;
 }
 
-.ar-upload-button > .button.multiple > .items {
+.ar-upload-button > .button.dropzone > .items {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -21,10 +20,11 @@
   backdrop-filter: blur(5px);
   width: 10rem;
   height: 12.5rem;
+  border-left: solid 1px rgba(var(--black-rgb), 0.75);
   overflow-x: hidden;
   overflow-y: auto;
 }
-.ar-upload-button > .button.multiple > .items > .item {
+.ar-upload-button > .button.dropzone > .items > .item {
   --size: 5rem;
 
   display: flex;
@@ -37,14 +37,14 @@
   border-bottom: solid 1px rgba(var(--black-rgb), 0.75);
   overflow: hidden;
 }
-.ar-upload-button > .button.multiple > .items > .item > .buttons {
+.ar-upload-button > .button.dropzone > .items > .item > .buttons {
   position: absolute;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.ar-upload-button > .button.multiple > .items > .item > .buttons::before {
+.ar-upload-button > .button.dropzone > .items > .item > .buttons::before {
   position: absolute;
   inset: 0;
   content: "";
@@ -52,10 +52,10 @@
   z-index: 1;
   transition: background-color 250ms ease-in-out;
 }
-.ar-upload-button > .button.multiple > .items > .item > .buttons:hover::before {
+.ar-upload-button > .button.dropzone > .items > .item > .buttons:hover::before {
   background-color: rgba(var(--black-rgb), 0.75);
 }
-.ar-upload-button > .button.multiple > .items > .item > .buttons > div {
+.ar-upload-button > .button.dropzone > .items > .item > .buttons > div {
   display: flex;
   flex-direction: row;
   visibility: hidden;
@@ -63,17 +63,17 @@
   z-index: 2;
   transition: visibility 250ms, opacity 250ms ease-in-out;
 }
-.ar-upload-button > .button.multiple > .items > .item > .buttons:hover div {
+.ar-upload-button > .button.dropzone > .items > .item > .buttons:hover div {
   visibility: visible;
   opacity: 1;
 }
-.ar-upload-button > .button.multiple > .items > .item > img {
+.ar-upload-button > .button.dropzone > .items > .item > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
 }
-.ar-upload-button > .button.multiple > .items > .item .error {
+.ar-upload-button > .button.dropzone > .items > .item .error {
   position: absolute;
   inset: 0;
   display: flex;
@@ -81,7 +81,7 @@
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
-  background-color: rgba(var(--danger-rgb), 0.5);
+  background-color: rgba(var(--danger-rgb), 0.75);
   color: var(--white);
   font-size: 0.75rem;
   font-weight: 700;
@@ -89,7 +89,7 @@
   z-index: 5;
 }
 
-.ar-upload-button > .button.multiple > .preview > .informations {
+.ar-upload-button > .button.dropzone > .preview > .informations {
   visibility: visible;
   opacity: 1;
   display: flex;
@@ -104,16 +104,16 @@
   padding: 0.5rem;
   transition: visibility 250ms, opacity 250ms ease-in-out;
 }
-.ar-upload-button > .button.multiple > .preview > .informations > .file-name {
+.ar-upload-button > .button.dropzone > .preview > .informations > .file-name {
   color: var(--white);
   font-size: 0.75rem;
   font-weight: 700;
 }
-.ar-upload-button > .button.multiple > .preview > .informations > div {
+.ar-upload-button > .button.dropzone > .preview > .informations > div {
   display: flex;
   gap: 0.25rem;
 }
-.ar-upload-button > .button.multiple > .preview > .informations > div > .file-size {
+.ar-upload-button > .button.dropzone > .preview > .informations > div > .file-size {
   background-color: var(--primary);
   padding: 0.25rem 0 0.25rem 0.25rem;
   border-radius: var(--border-radius-sm);
@@ -121,7 +121,7 @@
   font-size: 0.75rem;
   font-weight: 700;
 }
-.ar-upload-button > .button.multiple > .preview > .informations > div > .file-size > .size-type {
+.ar-upload-button > .button.dropzone > .preview > .informations > div > .file-size > .size-type {
   background-color: rgba(var(--black-rgb), 0.5);
   margin-left: 0.25rem;
   border-top-right-radius: var(--border-radius-sm);
@@ -130,7 +130,7 @@
   color: var(--primary);
   font-weight: 700;
 }
-.ar-upload-button > .button.multiple > .preview > .informations > div > .file-type {
+.ar-upload-button > .button.dropzone > .preview > .informations > div > .file-type {
   background-color: var(--warning);
   padding: 0.25rem;
   border-radius: var(--border-radius-sm);

package/dist/assets/css/components/form/upload/list.css

@@ -0,0 +1,143 @@
+.ar-upload {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+
+  > button {
+    width: max-content !important;
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    > li {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      border: solid 1px var(--gray-300);
+      border-radius: var(--border-radius-sm);
+      overflow: hidden;
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        content: "";
+        background-color: transparent;
+        z-index: 1;
+        transition: background-color 250ms ease-in-out;
+      }
+
+      &:hover {
+        border: solid 1px transparent;
+      }
+      &:hover::before {
+        background-color: rgba(var(--black-rgb), 0.75);
+      }
+
+      &:has(> .error) {
+        border: solid 1px var(--danger);
+      }
+
+      .error {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+        background-color: rgba(var(--danger-rgb), 0.75);
+        color: var(--white);
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-align: center;
+        z-index: 5;
+      }
+
+      .buttons {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+          div {
+            visibility: visible;
+            opacity: 1;
+          }
+        }
+
+        &::before {
+          position: absolute;
+          inset: 0;
+          content: "";
+          background-color: transparent;
+          z-index: 1;
+          transition: background-color 250ms ease-in-out;
+        }
+
+        &:hover::before {
+          background-color: rgba(var(--black-rgb), 0.75);
+        }
+
+        > div {
+          display: flex;
+          flex-direction: row;
+          visibility: hidden;
+          opacity: 0;
+          z-index: 2;
+          transition: visibility 250ms, opacity 250ms ease-in-out;
+        }
+      }
+
+      > .file-name {
+        color: var(--gray-700);
+        font-size: 0.75rem;
+        font-weight: 700;
+      }
+
+      > div {
+        display: flex;
+        gap: 0.25rem;
+
+        > .file-size {
+          background-color: var(--primary);
+          padding: 0.25rem 0 0.25rem 0.25rem;
+          border-radius: var(--border-radius-sm);
+          color: var(--white);
+          font-size: 0.65rem;
+          font-weight: 700;
+
+          > .size-type {
+            background-color: rgba(var(--black-rgb), 0.5);
+            margin-left: 0.25rem;
+            border-top-right-radius: var(--border-radius-sm);
+            border-bottom-right-radius: var(--border-radius-sm);
+            padding: 0.25rem;
+            color: var(--primary);
+            font-size: 0.65rem;
+            font-weight: 700;
+          }
+        }
+
+        > .file-type {
+          background-color: var(--warning);
+          padding: 0.25rem;
+          border-radius: var(--border-radius-sm);
+          color: var(--black);
+          font-size: 0.65rem;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/upload/styles.css

@@ -31,7 +31,7 @@
   user-select: none;
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
-.ar-upload-button > .button.multiple {
+.ar-upload-button > .button.dropzone {
   height: 12.5rem !important;
 }
 .ar-upload-button > .button.has-file {
@@ -40,11 +40,11 @@
   gap: 0 !important;
   align-items: flex-start !important;
 }
-.ar-upload-button > .button:not(.multiple):hover .preview > .informations {
+.ar-upload-button > .button:not(.dropzone):hover .preview > .informations {
   visibility: hidden;
   opacity: 0;
 }
-.ar-upload-button > .button:not(.multiple):has(.preview > img):hover {
+.ar-upload-button > .button:not(.dropzone):has(.preview > img):hover {
   border: solid 1px transparent !important;
 }
 .ar-upload-button > .button:has(.preview > img) {
@@ -163,5 +163,5 @@
   color: var(--gray-500);
 }
 
-@import url("./preview-selected-files.css");
-@import url("./animations.css");
+@import url("./list.css");
+@import url("./dropzone.css");

package/dist/components/form/upload/{PreviewSelectedFile.d.ts → Buttons.d.ts}

@@ -1,8 +1,8 @@
 import React from "react";
 interface IProps {
-    selectedFile: File | undefined;
+    selectedFile: File;
     handleFileToBase64: (file: File) => Promise<string>;
     handleFileRemove: (fileToRemove: File) => void;
 }
-declare const _default: React.MemoExoticComponent<({ selectedFile, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element | undefined>;
+declare const _default: React.MemoExoticComponent<({ selectedFile, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element>;
 export default _default;

package/dist/components/form/upload/Buttons.js

@@ -0,0 +1,27 @@
+import React, { memo } from "react";
+import { ARIcon } from "../../icons";
+import Button from "../button";
+const Buttons = ({ selectedFile, handleFileToBase64, handleFileRemove }) => {
+    return (React.createElement("div", { className: "buttons" },
+        React.createElement("div", null,
+            React.createElement(Button, { variant: "borderless", color: "purple", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (e) => {
+                    e.stopPropagation();
+                    const url = window.URL.createObjectURL(selectedFile);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = selectedFile.name;
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                } }),
+            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", color: "blue", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: async (e) => {
+                    e.stopPropagation();
+                    const base64 = await handleFileToBase64(selectedFile);
+                    const newTab = window.open();
+                    newTab?.document.write(`<img src="${base64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
+                } })),
+            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (e) => {
+                    e.stopPropagation();
+                    handleFileRemove(selectedFile);
+                } }))));
+};
+export default memo(Buttons);

package/dist/components/form/upload/{PreviewSelectedFiles.d.ts → Dropzone.d.ts}

@@ -2,9 +2,9 @@ import React from "react";
 import { ValidationError } from ".";
 interface IProps {
     selectedFiles: File[];
-    validationErrors: ValidationError[];
+    validationErrors?: ValidationError[];
     handleFileToBase64: (file: File) => Promise<string>;
     handleFileRemove: (fileToRemove: File) => void;
 }
-declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => false | React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element | null>;
 export default _default;

package/dist/components/form/upload/Dropzone.js

@@ -0,0 +1,55 @@
+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, { variant: "fill", icon: "ExclamationDiamond", 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(() => {
+        if (selectedFiles.length === 0)
+            return;
+        (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("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);

package/dist/components/form/upload/List.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ValidationError } from ".";
+interface IProps {
+    selectedFiles: File[];
+    validationErrors?: ValidationError[];
+    handleFileToBase64: (file: File) => Promise<string>;
+    handleFileRemove: (fileToRemove: File) => void;
+}
+declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element>;
+export default _default;

package/dist/components/form/upload/List.js

@@ -0,0 +1,22 @@
+import React, { memo } from "react";
+import { ARIcon } from "../../icons";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import Buttons from "./Buttons";
+const List = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("ul", null, selectedFiles.map((selectedFile) => {
+            const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
+            return (React.createElement("li", null,
+                message && (React.createElement("div", { className: "error" },
+                    React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
+                    React.createElement("span", null, message))),
+                React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
+                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))));
+        }))));
+};
+export default memo(List);

package/dist/components/form/upload/Props.d.ts

@@ -108,5 +108,6 @@ type Props = {
      * ```
      */
     maxSize?: number;
+    type?: "list" | "dropzone";
 } & (IMultiple | ISingle) & IValidation & IDisabled;
 export default Props;

package/dist/components/form/upload/index.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/upload/styles.css";
 import { ARIcon } from "../../icons";
-import PreviewSelectedFile from "./PreviewSelectedFile";
-import PreviewSelectedFiles from "./PreviewSelectedFiles";
-const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
+import Dropzone from "./Dropzone";
+import Button from "../button";
+import List from "./List";
+const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", multiple }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -115,6 +116,11 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
         }
         setClassName((prev) => prev.filter((c) => c !== "dragging"));
     }, []);
+    const renderUploadFile = (params) => {
+        return (React.createElement("div", { ref: _arUplaod, className: "ar-upload" },
+            React.createElement("input", { ref: _input, type: "file", onChange: (event) => handleFileChange(event.target.files), multiple: multiple }),
+            params.children));
+    };
     // useEffects
     useEffect(() => {
         (async () => {
@@ -176,26 +182,38 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
         }
     }, [file]);
     useEffect(() => {
-        if (multiple)
-            setClassName((prev) => [...prev, "multiple"]);
+        if (type === "dropzone")
+            setClassName((prev) => [...prev, "dropzone"]);
     }, []);
-    return (React.createElement("div", { ref: _arUplaod, className: "ar-upload" },
-        React.createElement("input", { ref: _input, type: "file", onChange: (event) => handleFileChange(event.target.files), multiple: multiple }),
-        React.createElement("div", { className: "ar-upload-button" },
-            React.createElement("div", { className: className.map((c) => c).join(" "), onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: () => {
-                    if (_input.current)
-                        _input.current.click();
-                } },
-                multiple ? (React.createElement(PreviewSelectedFiles, { selectedFiles: selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove })) : (React.createElement(PreviewSelectedFile, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove })),
-                !selectedFile && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "upload" },
-                        React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload", size: 32 }),
-                        React.createElement("div", { className: "properies" },
-                            allowedTypes && (React.createElement("div", { className: "allow-types" }, allowedTypes?.map((allowedType) => allowedType.split("/")[1].toLocaleUpperCase()).join(", "))),
-                            maxSize && React.createElement("div", { className: "max-size" },
-                                "up to ",
-                                maxSize,
-                                "MB"))),
-                    text && React.createElement("span", null, text)))))));
+    switch (type) {
+        case "list":
+            return renderUploadFile({
+                children: (React.createElement(React.Fragment, null,
+                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload" }) }, onClick: () => {
+                            if (_input.current)
+                                _input.current.click();
+                        } }, text && React.createElement("span", null, text)),
+                    React.createElement(List, { selectedFiles: selectedFiles.length === 0 && selectedFile ? [selectedFile] : selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
+            });
+        case "dropzone":
+            return renderUploadFile({
+                children: (React.createElement("div", { className: "ar-upload-button" },
+                    React.createElement("div", { className: className.map((c) => c).join(" "), onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: () => {
+                            if (_input.current)
+                                _input.current.click();
+                        } },
+                        React.createElement(Dropzone, { selectedFiles: selectedFiles.length === 0 && selectedFile ? [selectedFile] : selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
+                        !selectedFile && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: "upload" },
+                                React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload", size: 32 }),
+                                React.createElement("div", { className: "properies" },
+                                    allowedTypes && (React.createElement("div", { className: "allow-types" }, allowedTypes?.map((allowedType) => allowedType.split("/")[1].toLocaleUpperCase()).join(", "))),
+                                    maxSize && React.createElement("div", { className: "max-size" },
+                                        "up to ",
+                                        maxSize,
+                                        "MB"))),
+                            text && React.createElement("span", null, text)))))),
+            });
+    }
 };
 export default Upload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.89",
+  "version": "0.2.90",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/assets/css/components/form/upload/animations.css

@@ -1,14 +0,0 @@
-@keyframes count {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.25);
-    color: var(--warning);
-    /* -webkit-text-stroke: 1px var(--warning); */
-    transform: scale(1.25);
-  }
-  100% {
-    transform: scale(1);
-  }
-}

package/dist/components/form/upload/PreviewSelectedFile.js

@@ -1,46 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-import Button from "../button";
-import { ARIcon } from "../../icons";
-const PreviewSelectedFile = ({ selectedFile, handleFileToBase64, handleFileRemove }) => {
-    // states
-    const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
-    // useEffects
-    useEffect(() => {
-        (async () => {
-            if (!selectedFile)
-                return;
-            setSelectedFileBase64(await handleFileToBase64(selectedFile));
-        })();
-    }, [selectedFile]);
-    return (selectedFile && (React.createElement("div", { className: "preview" },
-        React.createElement("div", { className: "buttons" },
-            React.createElement("div", null,
-                React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (event) => {
-                        event.stopPropagation();
-                        const url = window.URL.createObjectURL(selectedFile);
-                        const a = document.createElement("a");
-                        a.href = url;
-                        a.download = selectedFile.name;
-                        a.click();
-                        // Belleği temizle
-                        window.URL.revokeObjectURL(url);
-                    } }),
-                React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
-                        event.stopPropagation();
-                        const newTab = window.open();
-                        newTab?.document.write(`<img src="${selectedFileBase64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
-                    } }),
-                React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
-                        event.stopPropagation();
-                        handleFileRemove(selectedFile);
-                    } }))),
-        React.createElement("img", { src: selectedFileBase64 }),
-        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" }, selectedFile.type.split("/")[1].toLocaleUpperCase()))))));
-};
-export default memo(PreviewSelectedFile);

package/dist/components/form/upload/PreviewSelectedFiles.js

@@ -1,65 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-import Button from "../button";
-import { ARIcon } from "../../icons";
-import Utils from "../../../libs/infrastructure/shared/Utils";
-const PreviewSelectedFiles = ({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }) => {
-    // states
-    const [items, setItems] = useState([]);
-    const [selectedFile, setSelectedFile] = useState(undefined);
-    const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
-    // useEffects
-    useEffect(() => {
-        (async () => {
-            const items = await Promise.all(selectedFiles.map(async (selectedFile) => {
-                const fileInformation = Utils.GetFileTypeInformation(selectedFile.type);
-                const _selectedFileBase64 = await handleFileToBase64(selectedFile);
-                const message = validationErrors.find((validationError) => validationError.fileName === selectedFile.name)?.message;
-                return (React.createElement("div", { className: "item", style: { backgroundColor: fileInformation.color }, onClick: (event) => event.stopPropagation(), onMouseOver: async (event) => {
-                        event.stopPropagation();
-                        setSelectedFileBase64(await handleFileToBase64(selectedFile));
-                        setSelectedFile(selectedFile);
-                    } },
-                    message && (React.createElement("div", { className: "error" },
-                        React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
-                        React.createElement("span", null, message))),
-                    React.createElement("div", { className: "buttons" },
-                        React.createElement("div", null,
-                            React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (event) => {
-                                    event.stopPropagation();
-                                    const url = window.URL.createObjectURL(selectedFile);
-                                    const a = document.createElement("a");
-                                    a.href = url;
-                                    a.download = selectedFile.name;
-                                    a.click();
-                                    // Belleği temizle
-                                    window.URL.revokeObjectURL(url);
-                                } }),
-                            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
-                                    event.stopPropagation();
-                                    const newTab = window.open();
-                                    newTab?.document.write(`<img src="${_selectedFileBase64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
-                                } })),
-                            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
-                                    event.stopPropagation();
-                                    handleFileRemove(selectedFile);
-                                } }))),
-                    selectedFile.type.includes("image") ? (React.createElement("img", { src: _selectedFileBase64 })) : (React.createElement(ARIcon, { icon: fileInformation.icon ?? "Document", fill: "var(--white)", size: 32 }))));
-            }));
-            setItems(items);
-            setSelectedFileBase64(await handleFileToBase64(selectedFiles[0]));
-            setSelectedFile(selectedFiles[0]);
-        })();
-    }, [selectedFiles, validationErrors]);
-    return (selectedFiles.length > 0 && (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "preview" },
-            selectedFile?.type.includes("image") ? (React.createElement("img", { src: selectedFileBase64, className: "selected-image" })) : ("Önizleme Yok."),
-            selectedFile && (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))))),
-        React.createElement("div", { className: "items" }, items))));
-};
-export default memo(PreviewSelectedFiles);