pixelize-design-library 2.2.190 → 2.2.191

package/dist/Components/Table/Components/TableFilters.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var _b, _c;
@@ -42,16 +43,9 @@ var TableFilters = (0, react_1.memo)(function (_a) {
     var theme = (0, react_2.useTheme)();
     var searchRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
-    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
-    setColumnsSearchRef.current = setColumnsSearch;
-    var debounceTimerRef = (0, react_1.useRef)(null);
-    var debouncedSearch = (0, react_1.useCallback)(function (value) {
-        if (debounceTimerRef.current)
-            clearTimeout(debounceTimerRef.current);
-        debounceTimerRef.current = setTimeout(function () {
-            setColumnsSearchRef.current(value);
-        }, 700);
-    }, []);
+    var debounceRef = (0, table_1.debounce)(function (value) {
+        setColumnsSearch(value);
+    }, 700);
     (0, react_1.useEffect)(function () {
         if (columnsSearch.length && searchRef.current) {
             searchRef.current.value = columnsSearch;
@@ -83,7 +77,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
-                                debouncedSearch(e.target.value);
+                                debounceRef(e.target.value);
                             }, onFocus: function (e) { return e.stopPropagation(); } })))))));
 });
 exports.default = TableFilters;

package/dist/Components/Table/Components/useTable.js

@@ -38,15 +38,14 @@ var mergeColumnWithPreference = function (pref, originalCol) {
     return next;
 };
 var useTable = function (_a) {
-    var _b, _c;
     var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
-    var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
-    var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
-    var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
-    var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
-    var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
+    var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
+    var _c = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _c[0], setSelection = _c[1];
+    var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
+    var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
+    var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
     var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
     if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
         prevRowsPerPageProp.current = noOfRowsPerPage;
@@ -55,12 +54,12 @@ var useTable = function (_a) {
         }
     }
     var tableData = data;
-    var _j = (0, react_1.useState)(function () {
+    var _g = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
             var _a;
             return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
         });
-    }), columnsList = _j[0], setColumnsList = _j[1];
+    }), columnsList = _g[0], setColumnsList = _g[1];
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -91,18 +90,8 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var prevIsContent = (0, react_1.useRef)(false);
-    var prevIsLink = (0, react_1.useRef)(false);
-    var isContent = (0, react_1.useMemo)(function () {
-        var result = tableData.some(function (o) { return o.content; });
-        prevIsContent.current = result;
-        return result;
-    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    var isLink = (0, react_1.useMemo)(function () {
-        var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
-        prevIsLink.current = result;
-        return result;
-    }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
+    var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
     (0, react_1.useEffect)(function () {
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
         setColumnWidths(widths);
@@ -139,25 +128,24 @@ var useTable = function (_a) {
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        setColumnsSort(function (prev) {
-            var newSortState = __spreadArray([], prev, true);
-            var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
-            if (existingIndex === -1) {
-                newSortState.push({
-                    column: field,
-                    direction: "asc",
-                });
-            }
-            else {
-                newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
-            }
-            return newSortState;
-        });
-    }, []);
+        var newSortState = __spreadArray([], columnsSort, true);
+        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
+        if (existingIndex === -1) {
+            newSortState.push({
+                column: field,
+                direction: "asc", // Default to ascending when adding a column
+            });
+        }
+        else {
+            var existingSort = newSortState[existingIndex];
+            existingSort.direction = sort;
+        }
+        setColumnsSort(newSortState);
+    }, [columnsSort]);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
+    var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
     var selectionRef = (0, react_1.useRef)(selection);
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.190",
+  "version": "2.2.191",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",