@xcelsior/ui-spreadsheets 1.0.2 → 1.0.3

package/dist/index.mjs

@@ -2138,6 +2138,7 @@ import { Pagination } from "@xcelsior/design-system";
 
 // src/hooks/useSpreadsheetFiltering.ts
 import { useCallback as useCallback3, useMemo as useMemo2, useState as useState6 } from "react";
+import { FilterChain, LazyArray } from "@xcelsior/utils";
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2284,19 +2285,10 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const filteredData = useMemo2(() => {
-    if (!data || !Array.isArray(data)) return [];
-    if (serverSide) {
-      return data;
-    }
-    if (!columns || !Array.isArray(columns)) return data;
-    let result = [...data];
-    for (const [columnId, filter] of Object.entries(filters)) {
-      if (!filter) continue;
-      const column = columns.find((c) => c.id === columnId);
-      if (!column) continue;
-      result = result.filter((row) => {
-        const value = column.getValue ? column.getValue(row) : row[columnId];
+  const buildFilterPredicate = useCallback3(
+    (column, filter) => {
+      return (row) => {
+        const value = column.getValue ? column.getValue(row) : row[column.id];
         if (filter.includeBlanks && isBlankValue(value)) {
           return true;
         }
@@ -2323,32 +2315,48 @@ function useSpreadsheetFiltering({
           if (filter.max !== void 0 && numValue > Number(filter.max)) return false;
         }
         return true;
-      });
-    }
-    if (sortConfig) {
-      const column = columns.find((c) => c.id === sortConfig.columnId);
-      result.sort((a, b) => {
-        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig.columnId];
-        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig.columnId];
+      };
+    },
+    [applyTextCondition, applyNumberCondition, applyDateCondition]
+  );
+  const buildSortComparator = useCallback3(
+    (column, direction) => {
+      return (a, b) => {
+        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
+        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig?.columnId];
         if (aValue === null || aValue === void 0) return 1;
         if (bValue === null || bValue === void 0) return -1;
         if (typeof aValue === "string" && typeof bValue === "string") {
-          return sortConfig.direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+          return direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
         }
-        return sortConfig.direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-      });
+        return direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      };
+    },
+    [sortConfig?.columnId]
+  );
+  const filteredData = useMemo2(() => {
+    if (!data || !Array.isArray(data)) return LazyArray.empty();
+    if (serverSide) {
+      return LazyArray.from(data);
     }
-    return result;
-  }, [
-    data,
-    filters,
-    sortConfig,
-    columns,
-    serverSide,
-    applyDateCondition,
-    applyNumberCondition,
-    applyTextCondition
-  ]);
+    if (!columns || !Array.isArray(columns)) return LazyArray.from(data);
+    let lazyResult = LazyArray.from(data);
+    const filterChain = new FilterChain();
+    for (const [columnId, filter] of Object.entries(filters)) {
+      if (!filter) continue;
+      const column = columns.find((c) => c.id === columnId);
+      if (!column) continue;
+      filterChain.add(buildFilterPredicate(column, filter));
+    }
+    if (!filterChain.isEmpty) {
+      lazyResult = filterChain.applyTo(lazyResult);
+    }
+    if (sortConfig) {
+      const column = columns.find((c) => c.id === sortConfig.columnId);
+      lazyResult = lazyResult.sort(buildSortComparator(column, sortConfig.direction));
+    }
+    return lazyResult;
+  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
   const handleFilterChange = useCallback3(
     (columnId, filter) => {
       const newFilters = { ...filters };