ar-design 0.2.70 → 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/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/package.json

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