ar-design 0.2.68 → 0.2.70

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

@@ -17,55 +17,89 @@
   font-size: 0.15rem;
 }
 
-.ar-upload-button > .ar-upload-files {
+.ar-upload-button > .button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+  border: dashed 1px var(--gray-300);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  user-select: none;
+}
+.ar-upload-button > .button:has(> img) {
+  padding: 0;
+  border: none;
+  overflow: hidden;
+}
+.ar-upload-button > .button > img {
   width: 100%;
-  transition: top 250ms ease-in-out;
+  height: 200px;
+  object-fit: fill;
+  object-position: top;
 }
-.ar-upload-button > .ar-upload-files > ul {
+.ar-upload-button > .button > .information {
   display: flex;
   flex-direction: column;
-  list-style-type: none;
-}
-.ar-upload-button > .ar-upload-files > ul > li {
-  position: relative;
-  border-bottom: solid 1px var(--gray-200);
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 }
-.ar-upload-button > .ar-upload-files > ul > li:hover > .errors {
+.ar-upload-button > .button > .information > .properies {
   display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+}
+.ar-upload-button > .button > .information > .properies > .max-size {
+  color: var(--gray-500);
+}
+.ar-upload-button > .button > .information > .properies > .allow-types {
+  color: var(--gray-500);
 }
-.ar-upload-button > .ar-upload-files > ul > li.error {
-  border-left: solid 2px var(--danger);
+
+.ar-upload-button > .ar-upload-files {
+  width: 100%;
+  transition: top 250ms ease-in-out;
 }
-.ar-upload-button > .ar-upload-files > ul > li .content {
+.ar-upload-button > .ar-upload-files > ul {
+  list-style: none;
+}
+
+.ar-upload-button > .ar-upload-files > ul > li > .file,
+.ar-upload-button > .ar-upload-files > .file {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem;
+  background-color: var(--gray-200);
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  border-radius: var(--border-radius-sm);
 }
-.ar-upload-button > .ar-upload-files > ul > li .content > span:first-child {
-  width: 90%;
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.ar-upload-button > .ar-upload-files > ul > li .content > span:first-child.error {
-  color: var(--danger);
-  /* -webkit-text-stroke: 0.5px var(--danger); */
-}
-.ar-upload-button > .ar-upload-files > ul > li .content > span:last-child {
-  background-color: rgba(var(--danger-rgb), 0.1);
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--border-radius-pill);
-  color: rgba(var(--danger-rgb), 0.5);
+.ar-upload-button > .ar-upload-files > ul > li > .file > .information,
+.ar-upload-button > .ar-upload-files > .file > .information {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.ar-upload-button > .ar-upload-files > ul > li > .file > .information > span,
+.ar-upload-button > .ar-upload-files > .file > .information > span {
+  display: inline-block;
+}
+.ar-upload-button > .ar-upload-files > ul > li > .file > .information > span:last-child,
+.ar-upload-button > .ar-upload-files > .file > .information > span:last-child {
+  background-color: var(--primary);
+  padding: 0 0.25rem;
+  border-radius: var(--border-radius-sm);
+  color: var(--white);
   font-size: 0.75rem;
-  text-align: center;
-  /* -webkit-text-stroke: 1px rgba(var(--danger-rgb), 0.5); */
-  line-height: 0.85rem;
+  line-height: 2;
+}
+.ar-upload-button > .ar-upload-files > ul > li > .file > .delete,
+.ar-upload-button > .ar-upload-files > .file > .delete {
   cursor: pointer;
 }
 

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

@@ -32,7 +32,7 @@ interface IMultiple {
      * />
      * ```
      */
-    onChange: (formData: FormData, files: File[], isInvalidFileExist: boolean) => void;
+    onChange: (formData: FormData, files: File[], base64: string[], isInvalidFileExist: boolean) => void;
     /**
      * Çoklu dosya seçiminin aktif olduğunu belirtir.
      *
@@ -66,7 +66,7 @@ interface ISingle {
      * <Upload onChange={(formData, file) => console.log(file)} />
      * ```
      */
-    onChange: (formData: FormData | undefined, files: File | null) => void;
+    onChange: (formData: FormData | undefined, files: File | null, base64: string) => void;
     /**
      * Çoklu dosya seçiminin devre dışı olduğunu belirtir.
      *
@@ -98,6 +98,7 @@ type Props = {
      * ```
      */
     allowedTypes?: AllowedTypes[];
+    uploadType?: "image" | "application-file";
     /**
      * Kabul edilen maksimum dosya boyutu (byte cinsinden).
      *

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

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/upload/styles.css";
-import { ARIcon } from "../../icons";
-import Button from "../button";
 import Tooltip from "../../feedback/tooltip";
-const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
+import { ARIcon } from "../../icons";
+const Upload = ({ text, file, onChange, allowedTypes, uploadType = "application-file", maxSize, multiple, }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -11,8 +10,9 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
     // refs -> File Data
     const _validationErrors = useRef([]);
     // states
-    const [selectedFiles, setSelectedFiles] = useState([]);
     const [selectedFile, setSelectedFile] = useState(undefined);
+    const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
+    const [selectedFiles, setSelectedFiles] = useState([]);
     const [validationErrors, setValidationErrors] = useState([]);
     // methods
     const handleFileChange = (files) => {
@@ -39,6 +39,10 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
                 return newList;
             });
         }
+        else {
+            setSelectedFile(undefined);
+            setSelectedFileBase64(undefined);
+        }
     };
     const handleValidationFile = (file) => {
         const newErrors = [];
@@ -49,7 +53,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
             }
         }
         if (maxSize) {
-            const _maxSize = maxSize * 1024 * 1024; // 5MB
+            const _maxSize = maxSize * 1024 * 1024; // MB
             if (file.size > _maxSize) {
                 newErrors.push({ [file.name]: "Dosya boyutu çok büyük." });
                 _validationErrors.current.push(file.name);
@@ -57,36 +61,56 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
         }
         setValidationErrors((prev) => [...prev, ...newErrors]);
     };
+    function handleFileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                if (reader.result && typeof reader.result === "string") {
+                    resolve(reader.result);
+                }
+                else {
+                    reject(new Error("Failed to read the file"));
+                }
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
     // useEffects
     useEffect(() => {
-        const dataTransfer = new DataTransfer();
-        const fileFormData = new FormData();
-        setValidationErrors([]);
-        _validationErrors.current = [];
-        if (_input.current) {
-            if (multiple) {
-                // Seçilmiş olan dosyalar validasyona gönderiliyor.
-                selectedFiles.forEach((f) => handleValidationFile(f));
-                const inValidFiles = Array.from(new Set(_validationErrors.current));
-                // Input içerisine dosyalar aktarılıyor.
-                selectedFiles.forEach((f) => dataTransfer.items.add(f));
-                _input.current.files = dataTransfer.files;
-                // Geçerli olan dosyalar alındı...
-                const validFiles = [...selectedFiles.filter((x) => !inValidFiles.includes(x.name))];
-                validFiles.forEach((f) => fileFormData.append("file", f));
-                onChange(fileFormData, validFiles, _validationErrors.current.length === 0);
-            }
-            else {
-                if (selectedFile) {
-                    handleValidationFile(selectedFile);
-                    fileFormData.append("file", selectedFile);
-                    onChange(fileFormData, selectedFile);
+        (async () => {
+            const dataTransfer = new DataTransfer();
+            const fileFormData = new FormData();
+            setValidationErrors([]);
+            _validationErrors.current = [];
+            if (_input.current) {
+                if (multiple) {
+                    // Seçilmiş olan dosyalar validasyona gönderiliyor.
+                    selectedFiles.forEach((f) => handleValidationFile(f));
+                    const inValidFiles = Array.from(new Set(_validationErrors.current));
                     // Input içerisine dosyalar aktarılıyor.
-                    dataTransfer.items.add(selectedFile);
+                    selectedFiles.forEach((f) => dataTransfer.items.add(f));
                     _input.current.files = dataTransfer.files;
+                    // Geçerli olan dosyalar alındı...
+                    const validFiles = [...selectedFiles.filter((x) => !inValidFiles.includes(x.name))];
+                    validFiles.forEach((f) => fileFormData.append("file", f));
+                    // Geçerli olan dosyalar base64'e dönüştürülüyor...
+                    const base64Array = await Promise.all(validFiles.map((validFile) => handleFileToBase64(validFile)));
+                    onChange(fileFormData, validFiles, base64Array, _validationErrors.current.length === 0);
+                }
+                else {
+                    if (selectedFile) {
+                        handleValidationFile(selectedFile);
+                        fileFormData.append("file", selectedFile);
+                        onChange(fileFormData, selectedFile, await handleFileToBase64(selectedFile));
+                        setSelectedFileBase64(await handleFileToBase64(selectedFile));
+                        // Input içerisine dosyalar aktarılıyor.
+                        dataTransfer.items.add(selectedFile);
+                        _input.current.files = dataTransfer.files;
+                    }
                 }
             }
-        }
+        })();
     }, [selectedFiles, selectedFile]);
     useEffect(() => {
         if (_firstLoad.current)
@@ -97,25 +121,44 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
     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(Button, { variant: "outlined", status: "light", icon: { element: React.createElement(ARIcon, { variant: "bulk", icon: "Upload", fill: "var(--gray-300)" }) }, onClick: () => {
+            React.createElement("div", { className: "button", onClick: () => {
                     if (_input.current)
                         _input.current.click();
-                } }, text && React.createElement("span", null, text)),
-            React.createElement("div", { className: "ar-upload-files" },
-                React.createElement("ul", null, selectedFiles.map((selectedFile, index) => {
-                    let _className = [];
-                    const errorMessages = validationErrors
-                        .filter((error) => Object.keys(error).includes(selectedFile.name))
-                        .map((error) => error[selectedFile.name]);
-                    if (errorMessages.length > 0)
-                        _className.push("error");
-                    const content = (React.createElement("div", { className: "content" },
-                        React.createElement("span", { className: _className.map((c) => c).join(" ") }, selectedFile.name),
-                        React.createElement("span", { onClick: (event) => {
-                                event.stopPropagation();
-                                handleFileRemove(selectedFile);
-                            } }, "x")));
-                    return (React.createElement("li", { key: index, className: _className.map((c) => c).join(" ") }, errorMessages.length === 0 ? (content) : (React.createElement(Tooltip, { text: errorMessages.map((message) => message ?? "") }, content))));
-                }))))));
+                } },
+                uploadType === "image" && selectedFileBase64 && React.createElement("img", { src: selectedFileBase64 }),
+                (uploadType === "application-file" || !selectedFileBase64) && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "information" },
+                        React.createElement(ARIcon, { variant: "linear", icon: "Upload", stroke: "var(--gray-600)", fill: "transparent" }),
+                        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)))),
+            React.createElement("div", { className: "ar-upload-files" }, multiple ? (React.createElement("ul", null, selectedFiles.map((selectedFile, index) => {
+                let _className = [];
+                const errorMessages = validationErrors
+                    .filter((error) => Object.keys(error).includes(selectedFile.name))
+                    .map((error) => error[selectedFile.name]);
+                if (errorMessages.length > 0)
+                    _className.push("error");
+                const content = (React.createElement("div", { className: "file" },
+                    React.createElement("div", { className: "information" },
+                        React.createElement("span", null, selectedFile.name),
+                        React.createElement("span", null,
+                            (selectedFile.size / 1024).toFixed(3),
+                            "KB")),
+                    React.createElement("div", { className: "delete", onClick: () => handleFileRemove(selectedFile) },
+                        React.createElement(ARIcon, { icon: "CloseCircle", fill: "transparent", size: 20 }))));
+                return (React.createElement("li", { key: index, className: _className.map((c) => c).join(" ") }, errorMessages.length === 0 ? (content) : (React.createElement(Tooltip, { text: errorMessages.map((message) => message ?? "") }, content))));
+            }))) : (selectedFile && (React.createElement("div", { className: "file" },
+                React.createElement("div", { className: "information" },
+                    React.createElement("span", null, selectedFile.name),
+                    React.createElement("span", null,
+                        (selectedFile.size / 1024).toFixed(3),
+                        "KB")),
+                React.createElement("div", { className: "delete", onClick: () => handleFileRemove(selectedFile) },
+                    React.createElement(ARIcon, { icon: "CloseCircle", fill: "transparent", size: 20 })))))))));
 };
 export default Upload;

package/dist/components/icons/Compiler.js

@@ -48,6 +48,11 @@ class Icon {
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M6 4v6a6 6 0 0 0 12 0V4", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("line", { x1: "4", y1: "20", x2: "20", y2: "20", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "Upload":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M9 17v-6l-2 2M9 11l2 2", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M22 10v5c0 5-2 7-7 7H9c-5 0-7-2-7-7V9c0-5 2-7 7-7h5", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M22 10h-4c-3 0-4-1-4-4V2l8 8Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     case "Strikethrough":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),

package/dist/components/icons/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Svg from "./Svg";
 import Icon from "./Compiler";
-export const ARIcon = ({ viewBox, size, variant = "linear", icon, fill = "var(--dark)", stroke = "var(--dark)", strokeWidth = 2, style, }) => {
+export const ARIcon = ({ viewBox, size, variant = "linear", icon, fill = "var(--dark)", stroke = "var(--dark)", strokeWidth = 1, style, }) => {
     const { Compiler } = new Icon(fill, stroke, strokeWidth);
     return (React.createElement(Svg, { viewBox: viewBox, fill: fill, width: size, height: size, style: style }, Compiler(variant, icon)));
 };

package/dist/libs/core/service/Api.d.ts

@@ -20,7 +20,10 @@ declare class Api {
         data?: any;
         headers?: HeadersInit;
         init?: Omit<RequestInit | undefined, "body">;
-    }): Promise<Response>;
+    }): Promise<{
+        p_response: Promise<Response>;
+        response: Response;
+    }>;
     PostWithFormData(values: {
         input?: RequestInfo;
         data?: FormData;

package/dist/libs/core/service/Api.js

@@ -29,13 +29,15 @@ class Api {
         if (values.input && values.input.toString().includes("?")) {
             values.input = values.input.toString().replace(/\/(?=\?)/, "");
         }
-        const response = await this.CustomFetch(`${this._url}${values.input}`, {
+        const p_response = this.CustomFetch(`${this._url}${values.input}`, {
             method: "POST",
             headers: { ...this.HeaderProperties(), ...values.headers },
             body: JSON.stringify(values.data),
             ...values.init,
         });
-        return response;
+        const clone = (await p_response).clone();
+        const response = await clone;
+        return { p_response, response };
     }
     async PostWithFormData(values) {
         if (values.input && values.input.toString().includes("?")) {

package/dist/libs/core/service/index.js

@@ -26,13 +26,13 @@ class Service {
             let endPoint = `${this._endPoint}`;
             if (values?.input)
                 endPoint += `/${values.input}`;
-            const response = await this._api.Post({
+            const { p_response, response } = await this._api.Post({
                 input: endPoint,
                 data: values?.data,
                 headers: values?.headers,
                 init: values?.init,
             });
-            return await this.Response(null, response);
+            return await this.Response(p_response, response);
         }
         catch (error) {
             throw new Error(error instanceof Error ? error.message : "Beklenmeyen bir hata oluştu.");

package/package.json

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