ar-design 0.4.7 → 0.4.9

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

@@ -1,5 +1,6 @@
 import { IBorder, IColors, IIcon, IVariant } from "../../../libs/types/IGlobalProps";
 interface IProps extends IVariant, IColors, IBorder, IIcon {
     text: string;
+    customColor?: string;
 }
 export default IProps;

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

@@ -2,10 +2,15 @@
 import React from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Chip = ({ variant = "outlined", color = "light", border = { radius: "sm" }, text, icon }) => {
+const Chip = ({ variant = "outlined", color = "light", customColor, border = { radius: "sm" }, text, icon, }) => {
     let _chipClassName = ["ar-chip"];
     _chipClassName.push(...Utils.GetClassName(variant, undefined, color, border, undefined, undefined, undefined));
-    return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" ") },
+    return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" "), ...(customColor && {
+            style: {
+                backgroundColor: customColor,
+                color: "var(--black)",
+            },
+        }) },
         icon?.element && React.createElement("span", null, icon?.element),
         React.createElement("span", null, text)));
 };

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

@@ -44,6 +44,9 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const _searchTimeOut = useRef(null);
     // refs -> Filter
     const _filterButton = useRef([]);
+    // refs -> Selection
+    const _selectionItems = useRef([]);
+    const lastSentRef = useRef([]);
     // variables
     const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
     const _subrowSelector = config.subrow?.selector ?? "subitems";
@@ -52,7 +55,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const _tableClassName = ["ar-table", "scroll"];
     // states
     const [selectAll, setSelectAll] = useState(false);
-    const [selectionItems, setSelectionItems] = useState([]);
     const [showSubitems, setShowSubitems] = useState({});
     const [rowHeights, setRowHeights] = useState([]);
     // states -> File
@@ -76,6 +78,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
     const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
+    // states -> Selection
+    const [_, setTriggerForRender] = useState(false);
     // states -> Mobil
     const [isMobile, setIsMobile] = useState(false);
     // hooks
@@ -371,11 +375,18 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     _tBodyTR.current[index] = element;
                 }, style: { ..._rowColor }, ...(onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
                 selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
-                    React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: selectionItems.some((selectionItem) => trackBy?.(selectionItem) === trackBy?.(item)), onChange: (event) => {
-                            if (event.target.checked)
-                                setSelectionItems((prev) => [...prev, item]);
-                            else
-                                setSelectionItems((prev) => prev.filter((_item) => trackBy?.(_item) !== trackBy?.(item)));
+                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: _selectionItems.current.some((selectionItem) => trackBy?.(selectionItem) === trackBy?.(item)), onChange: (event) => {
+                            const key = trackBy?.(item);
+                            if (event.target.checked) {
+                                if (!_selectionItems.current.some((_item) => trackBy?.(_item) === key)) {
+                                    _selectionItems.current = [..._selectionItems.current, item];
+                                }
+                            }
+                            else {
+                                _selectionItems.current = _selectionItems.current.filter((_item) => trackBy?.(_item) !== key);
+                            }
+                            selections(_selectionItems.current);
+                            setTriggerForRender((prev) => !prev);
                         } }))),
                 isHasSubitems && _subrowButton ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
                     React.createElement("span", { className: `subitem-open-button ${(showSubitems[index] && "opened") ?? ""}`, onClick: () => {
@@ -464,17 +475,16 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     }, [getData, columns, showSubitems, rowHeights]);
     // useEffects
     useEffect(() => {
-        if (Utils.DeepEqual(previousSelections, selectionItems))
-            return;
-        if (previousSelections && previousSelections.length > 0) {
-            const validSelections = data.filter((item) => previousSelections.some((selected) => trackBy?.(selected) === trackBy?.(item)));
-            setSelectionItems(validSelections);
+        if (!previousSelections || previousSelections.length === 0) {
+            _selectionItems.current = [];
             return;
         }
-        else {
-            setSelectionItems([]);
+        const validSelections = data.filter((item) => previousSelections.some((selected) => trackBy?.(selected) === trackBy?.(item)));
+        // Gereksiz overwrite’i engelle
+        if (!Utils.DeepEqual(_selectionItems.current, validSelections)) {
+            _selectionItems.current = validSelections;
         }
-    }, [previousSelections, data]);
+    }, [previousSelections, data, trackBy]);
     useEffect(() => {
         if (config?.isServerSide && searchedParams) {
             const searchRecord = {};
@@ -517,14 +527,17 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             pagination.onChange?.(1, selectedPerPage);
     }, [checkboxSelectedParams]);
     useEffect(() => {
-        if (typeof selections === "function" && Array.isArray(selectionItems)) {
-            selections(selectionItems.map((selectionItem) => ({ ...selectionItem, trackByValue: trackBy?.(selectionItem) })));
-        }
-        if (Array.isArray(_checkboxItems.current) && _checkboxItems.current.length > 0) {
-            const allChecked = _checkboxItems.current.every((item) => item?.checked === true);
-            setSelectAll(allChecked);
+        if (typeof selections !== "function")
+            return;
+        const payload = _selectionItems.current.map((item) => ({
+            ...item,
+            trackByValue: trackBy?.(item),
+        }));
+        if (!Utils.DeepEqual(payload, lastSentRef.current)) {
+            lastSentRef.current = payload;
+            selections(payload);
         }
-    }, [selectionItems, currentPage, selectedPerPage]);
+    }, [selections, trackBy]);
     useEffect(() => {
         // Filter Content alanı re-render işlemi.
         if (filterCurrentColumn && filterCurrentDataType) {

package/package.json

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