ar-design 0.2.16 → 0.2.18

package/dist/assets/css/components/data-display/tabs/tabs.css

@@ -10,13 +10,25 @@
 .ar-tabs > .tabs > .item {
   position: relative;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
+  gap: 1rem;
   height: 100%;
   padding: 0 0.75rem;
   font-weight: 900;
   cursor: pointer;
 }
+.ar-tabs > .tabs > .item > .close-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(var(--danger-rgb), 0.25);
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  color: rgba(var(--danger-rgb), 0.5);
+  font-size: 0.75rem;
+}
 .ar-tabs > .tabs > .item.selection::before {
   position: absolute;
   left: 0;

package/dist/components/data-display/table/IProps.d.ts

@@ -19,6 +19,7 @@ interface IProps<T> extends IChildren {
         filterClear?: ActionType;
     };
     selections?: (selectionItems: T[]) => void;
+    previousSelections?: T[];
     searchedParams?: (params: SearchedParam | undefined, query: string) => void;
     pagination?: {
         totalRecords: number;

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

@@ -8,7 +8,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 import Actions from "./Actions";
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
-const TableWithRef = forwardRef(({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
+const TableWithRef = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
     const _table = useRef(null);
@@ -28,7 +28,12 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
     const [searchedText, setSearchedText] = useState(undefined);
     const [_searchedParams, setSearchedParams] = useState(undefined);
     const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
-    const [selectedfilterCheckboxItems, setSelectedfilterCheckboxItems] = useState(undefined);
+    // const [selectedfilterCheckboxItems, setSelectedfilterCheckboxItems] = useState<
+    //   {
+    //     selectedCount: number;
+    //     columnKey: string;
+    //   }[]
+    // >([]);
     // const [searchedFilters, setSearchedFilters] = useState<string | undefined>(undefined);
     // const [totalRecords, setTotalRecords] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState(1);
@@ -195,6 +200,14 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         return _data;
     }, [data, searchedText, currentPage]);
     // useEffects
+    useEffect(() => {
+        // Eğer `previousSelections` özelliğinden değer geliyorsa bu daha önce seçim yapılmış öğeleri gönderiyorum
+        // demektir ve otomatik olarak seçim yap demek anlamına gekmektedir.
+        if (previousSelections && previousSelections.length > 0) {
+            const validSelections = data.filter((item) => previousSelections.some((selected) => JSON.stringify(selected) === JSON.stringify(item)));
+            setSelectionItems(validSelections);
+        }
+    }, [previousSelections]);
     useEffect(() => {
         if (!selections || selectionItems.length === 0)
             return;
@@ -222,7 +235,24 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setCurrentPage(1);
         pagination && pagination.onChange(1);
-        setSelectedfilterCheckboxItems(_filterCheckboxItems.current.filter((x) => x?.checked).length);
+        // Filters...
+        // setSelectedfilterCheckboxItems((prev) => {
+        //   debugger;
+        //   const columnKeys = Object.keys(checkboxSelectedParams ?? {});
+        //   const selectedCount = _filterCheckboxItems.current.filter((x) => x?.checked).length;
+        //   const updatedItems = [...prev];
+        //   columnKeys.forEach((columnKey) => {
+        //     const existingIndex = updatedItems.findIndex((item) => item.columnKey === columnKey);
+        //     if (existingIndex !== -1) {
+        //       // Eğer aynı key varsa, güncelle
+        //       updatedItems[existingIndex] = { columnKey, selectedCount };
+        //     } else {
+        //       // Eğer aynı key yoksa, ekle
+        //       updatedItems.push({ columnKey, selectedCount });
+        //     }
+        //   });
+        //   return updatedItems;
+        // });
     }, [checkboxSelectedParams]);
     useEffect(() => {
         if (!selections)
@@ -232,7 +262,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             allChecked = _checkboxItems.current.every((item) => item?.checked === true);
         }
         setSelectAll(allChecked);
-    }, [currentPage]);
+    }, [selectionItems, currentPage]);
     // useEffect(() => {
     //   if (!_tableContent.current) return;
     //   const th = _tableContent.current?.querySelectorAll("table > thead > tr:first-child > th");
@@ -309,16 +339,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                                                 return (React.createElement("div", null,
                                                     React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: checkboxSelectedParams?.[name]?.includes(String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                                             }))), windowBlur: true },
-                                        (selectedfilterCheckboxItems ?? 0) > 0 && (React.createElement("div", { style: {
-                                                position: "absolute",
-                                                top: "0.35rem",
-                                                right: "0.35rem",
-                                                width: "0.5rem",
-                                                height: "0.5rem",
-                                                backgroundColor: "var(--danger)",
-                                                borderRadius: "var(--border-radius-pill)",
-                                                zIndex: 1,
-                                            } })),
                                         React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } }))))));
                         })))),
                 React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },

package/dist/components/data-display/tabs/IProps.d.ts

@@ -8,5 +8,8 @@ interface IProps {
      * Her bir `Tab için gerekli özellikler `TabProps` tipinde olmalıdır.
      */
     tabs: TabProps[];
+    activeTab?: number;
+    onChange?: (currentTab: number) => void;
+    onClose?: (closeTab: number) => void;
 }
 export default IProps;

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

@@ -1,17 +1,28 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "../../../assets/css/components/data-display/tabs/tabs.css";
-const Tabs = ({ tabs = [] }) => {
+const Tabs = ({ tabs = [], activeTab, onChange, onClose }) => {
     // states
     const [currentTab, setCurrentTab] = useState(0);
+    // useEffects
+    useEffect(() => {
+        setCurrentTab(activeTab ?? 0);
+    }, [activeTab]);
     return (React.createElement("div", { className: "ar-tabs" },
         React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
             tabs.map((tab, index) => {
                 let className = ["item"];
                 if (currentTab === index)
                     className.push("selection");
-                return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => setCurrentTab(index) },
-                    React.createElement("span", null, tab.title)));
+                return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
+                        setCurrentTab(index);
+                        onChange && onChange(index);
+                    } },
+                    React.createElement("span", null, tab.title),
+                    tab.config?.canBeClosed && (React.createElement("span", { className: "close-button", onClick: (event) => {
+                            event.stopPropagation();
+                            onClose && onClose(index);
+                        } }, "\u2716"))));
             })),
         React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content))));
 };

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 const Checkbox = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
@@ -9,6 +9,10 @@ const Checkbox = forwardRef(({ label, size = "normal", status, border = { radius
     // states
     const [checked, setChecked] = useState(attributes.checked ?? false);
     _checkboxClassName.push(...Utils.GetClassName("filled", checked ? status : "light", border, size, undefined, attributes.className));
+    // useEffects
+    useEffect(() => {
+        setChecked(attributes.checked ?? false);
+    }, [attributes.checked]);
     return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {

package/dist/libs/types/index.d.ts

@@ -48,6 +48,9 @@ export type StepProps = {
 export type TabProps = {
     title: string;
     content: React.ReactNode;
+    config?: {
+        canBeClosed: boolean;
+    };
 };
 export type ValidationShape = {
     type: "required" | "minimum" | "maximum" | "email";

package/package.json

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