ar-design 0.2.69 → 0.2.70

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

@@ -29,6 +29,17 @@
   cursor: pointer;
   user-select: none;
 }
+.ar-upload-button > .button:has(> img) {
+  padding: 0;
+  border: none;
+  overflow: hidden;
+}
+.ar-upload-button > .button > img {
+  width: 100%;
+  height: 200px;
+  object-fit: fill;
+  object-position: top;
+}
 .ar-upload-button > .button > .information {
   display: flex;
   flex-direction: column;
@@ -54,53 +65,10 @@
   transition: top 250ms ease-in-out;
 }
 .ar-upload-button > .ar-upload-files > ul {
-  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);
-}
-.ar-upload-button > .ar-upload-files > ul > li:hover > .errors {
-  display: flex;
-}
-.ar-upload-button > .ar-upload-files > ul > li.error {
-  border-left: solid 2px var(--danger);
-}
-.ar-upload-button > .ar-upload-files > ul > li .content {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem;
-}
-.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);
-  font-size: 0.75rem;
-  text-align: center;
-  /* -webkit-text-stroke: 1px rgba(var(--danger-rgb), 0.5); */
-  line-height: 0.85rem;
-  cursor: pointer;
+  list-style: none;
 }
 
+.ar-upload-button > .ar-upload-files > ul > li > .file,
 .ar-upload-button > .ar-upload-files > .file {
   display: flex;
   flex-direction: row;
@@ -111,14 +79,17 @@
   padding: 0.5rem;
   border-radius: var(--border-radius-sm);
 }
+.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;
@@ -127,6 +98,7 @@
   font-size: 0.75rem;
   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

@@ -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

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/upload/styles.css";
 import Tooltip from "../../feedback/tooltip";
 import { ARIcon } from "../../icons";
-const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
+const Upload = ({ text, file, onChange, allowedTypes, uploadType = "application-file", maxSize, multiple, }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -10,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) => {
@@ -40,6 +41,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
         }
         else {
             setSelectedFile(undefined);
+            setSelectedFileBase64(undefined);
         }
     };
     const handleValidationFile = (file) => {
@@ -101,6 +103,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
                         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;
@@ -122,15 +125,17 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
                     if (_input.current)
                         _input.current.click();
                 } },
-                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)),
+                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
@@ -138,12 +143,14 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
                     .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")));
+                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" },

package/package.json

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