ar-design 0.2.69 → 0.2.71

package/dist/assets/css/components/data-display/table/styles.css

@@ -186,18 +186,68 @@
   cursor: no-drop;
 }
 
+/* For Rows */
+.ar-table > .content > table > tbody > tr > td > .table-cell > .before {
+  position: absolute;
+  top: 0px;
+  content: "";
+  background: linear-gradient(0deg, var(--gray-200) 0%, var(--primary) 50%, var(--gray-200) 100%);
+  width: 2px;
+  height: 100%;
+  margin-left: -17.5px;
+}
+.ar-table > .content > table > tbody > tr:not(:has(+ tr)) > td > .table-cell > .before,
+.ar-table > .content > table > tbody > tr:last-child > td > .table-cell > .before {
+  height: 50%;
+  background: linear-gradient(0deg, var(--gray-600) 0%, var(--gray-200) 100%);
+}
+.ar-table > .content > table > tbody > tr > td > .table-cell > .after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "";
+  background-color: var(--primary);
+  width: 15px;
+  height: 2px;
+  margin-left: -17.5px;
+}
+.ar-table > .content > table > tbody > tr > td > .table-cell > .after > .circle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  content: "";
+  background-color: var(--primary);
+  width: 5px;
+  height: 5px;
+  border-radius: var(--border-radius-pill);
+}
+
+/* For Subrows */
 .ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .before {
   position: absolute;
   top: 0px;
   content: "";
-  background-color: var(--gray-600);
+  background: linear-gradient(0deg, var(--gray-200) 0%, var(--gray-600) 50%, var(--gray-200) 100%) !important;
   width: 2px;
   height: 100%;
   margin-left: -17.5px;
 }
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .last-before {
+  position: absolute;
+  top: 0px;
+  content: "";
+  background: linear-gradient(0deg, var(--gray-200) 0%, var(--gray-600) 50%, var(--gray-200) 100%) !important;
+  width: 2px;
+  height: 100%;
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .last-before:first-child {
+  background: linear-gradient(0deg, var(--gray-200) 0%, var(--primary) 50%, var(--gray-200) 100%) !important;
+}
 .ar-table > .content > table > tbody > tr.subrow-item:not(:has(+ tr.subrow-item)) > td > .table-cell > .before,
 .ar-table > .content > table > tbody > tr.subrow-item:last-child > td > .table-cell > .before {
   height: 50%;
+  background: linear-gradient(0deg, var(--gray-600) 0%, var(--gray-200) 100%) !important;
 }
 .ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .after {
   position: absolute;
@@ -209,6 +259,17 @@
   height: 2px;
   margin-left: -17.5px;
 }
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .after > .circle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  content: "";
+  background-color: var(--gray-600);
+  width: 5px;
+  height: 5px;
+  border-radius: var(--border-radius-pill);
+}
 
 @import url("./scroll.css");
 @import url("./filter-popup.css");

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/data-display/table/IProps.d.ts

@@ -51,6 +51,7 @@ export type Config = {
          */
         button?: boolean;
     };
+    isTreeView?: boolean;
 };
 type ImportActionType = {
     /**

package/dist/components/data-display/table/THeadCell.js

@@ -22,6 +22,6 @@ const MemoizedTHeadCell = function ({ columns }) {
             React.createElement("span", { style: { fontWeight: 500 } }, c.title)));
     })));
 };
-// 👇 React.memo kullanımı sırasında generic tipi koruyoruz
+// React.memo kullanımı sırasında generic tipi koruyoruz.
 const THeadCell = React.memo(MemoizedTHeadCell);
 export default THeadCell;

package/dist/components/data-display/table/index.js

@@ -341,7 +341,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage]);
-    const renderRow = (item, index) => {
+    const renderRow = (item, index, deph) => {
         const isHasSubitems = _subrowSelector in item;
         // TODO: Keylere bakılacak...
         return (React.createElement(Fragment, { key: `row-${index}` },
@@ -360,10 +360,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                 [`${index}`]: !prev[`${index}`],
                             }));
                         } }))))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                columns.map((c, cIndex) => renderCell(item, c, cIndex, index, 0))),
+                columns.map((c, cIndex) => renderCell(item, c, cIndex, index, deph * (config.isTreeView ? 1.75 : 0), 0))),
             showSubitems[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
     };
-    const renderCell = (item, c, cIndex, index, depth) => {
+    const renderCell = (item, c, cIndex, index, depth, level, isSubrows = false) => {
         let render;
         // `c.key` bir string ise
         if (typeof c.key !== "object") {
@@ -387,20 +387,28 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             _className.push(`align-content-${c.config.alignContent}`);
         if (c.config?.textWrap)
             _className.push(`text-${c.config.textWrap}`);
+        console.log(depth);
         return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky },
             React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
-                cIndex === 0 && React.createElement("div", { className: "before" }),
+                config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
+                    isSubrows &&
+                        Array.from({ length: level }).map((_, i) => {
+                            if (i > 0)
+                                i *= 1.655;
+                            return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
+                        }),
+                    React.createElement("div", { className: "before" }))),
                 React.isValidElement(render) ? render : String(render),
-                cIndex === 0 && React.createElement("div", { className: "after" }))));
+                config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
+                    React.createElement("div", { className: "circle" }))))));
     };
-    const SubitemList = ({ items, columns, index, depth }) => {
+    const SubitemList = ({ items, columns, index, depth, level = 1 }) => {
         return items.map((subitem, subindex) => {
             const _subitem = subitem[_subrowSelector];
             const isHasSubitems = _subrowSelector in subitem;
-            console.log(isHasSubitems);
             // TODO: Keylere bakılacak...
             return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
-                React.createElement("tr", { key: `subitem-${index}-${subindex}-${Math.random()}`, className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}` },
+                React.createElement("tr", { key: `subitem-${index}-${subindex}-${Math.random()}`, className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
                     isHasSubitems && _subrowButton ? (React.createElement("td", null,
                         React.createElement("div", { className: "subitem-open-button-wrapper" },
                             React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
@@ -411,8 +419,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                         [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
                                     }));
                                 } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.75))),
-                showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
+                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * (config.isTreeView ? 2.25 : 1.75), level, true))),
+                showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1 }))));
         });
     };
     // useEffects
@@ -571,7 +579,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                             element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
                                         } }))))));
                         })))),
-                React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index))))))),
+                React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1))))))),
         React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement("span", null,

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.71",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",