npm - @rufous/ui - Versions diffs - 0.2.96 → 0.2.98 - Mend

@rufous/ui 0.2.96 → 0.2.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/main.cjs CHANGED Viewed

@@ -4435,7 +4435,6 @@ function DataGrid({
   const [sortDirection, setSortDirection] = (0, import_react23.useState)(null);
   const [filterText, setFilterText] = (0, import_react23.useState)("");
   const [currentPage, setCurrentPage] = (0, import_react23.useState)(1);
-  const [columnFilters, setColumnFilters] = (0, import_react23.useState)({});
   const [resizingColumn, setResizingColumn] = (0, import_react23.useState)(null);
   const [startX, setStartX] = (0, import_react23.useState)(0);
   const [startWidth, setStartWidth] = (0, import_react23.useState)(0);
@@ -4530,46 +4529,32 @@ function DataGrid({
     });
     setActiveMenu(null);
   };
+  const getDisplayValue = (item, col) => {
+    const field = String(col.field);
+    const raw = item[field];
+    let val = col.valueGetter ? col.valueGetter({ value: raw, row: item, field }) : raw;
+    if (col.valueFormatter) {
+      val = col.valueFormatter({ value: val, row: item, field });
+    }
+    return val === null || val === void 0 ? "" : String(val);
+  };
   const filteredData = (0, import_react23.useMemo)(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || Object.values(item).some(
-        (val) => String(val).toLowerCase().includes(filterText.toLowerCase())
-      );
+      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
+        if (col.hidden) return false;
+        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
+      });
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
-        const rawVal = String(item[f.column]);
-        if (col?.type === "number") {
-          const itemNum = Number(rawVal);
-          const filterNum = Number(f.value);
-          switch (f.operator) {
-            case "=":
-              return itemNum === filterNum;
-            case "!=":
-              return itemNum !== filterNum;
-            case ">":
-              return itemNum > filterNum;
-            case ">=":
-              return itemNum >= filterNum;
-            case "<":
-              return itemNum < filterNum;
-            case "<=":
-              return itemNum <= filterNum;
-            case "is empty":
-              return rawVal === "" || rawVal === "undefined" || rawVal === "null";
-            case "is not empty":
-              return rawVal !== "" && rawVal !== "undefined" && rawVal !== "null";
-            default:
-              return true;
-          }
-        }
+        const field = f.column;
+        const raw = item[field];
         if (col?.type === "date") {
-          const raw = item[f.column];
-          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field: f.column }) : raw;
-          const isEmpty = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
-          if (f.operator === "is empty") return isEmpty;
-          if (f.operator === "is not empty") return !isEmpty;
-          if (isEmpty) return false;
+          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field }) : raw;
+          const isEmpty2 = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
+          if (f.operator === "is empty") return isEmpty2;
+          if (f.operator === "is not empty") return !isEmpty2;
+          if (isEmpty2) return false;
           const itemTs = new Date(resolvedDate);
           itemTs.setHours(0, 0, 0, 0);
           const filterTs = new Date(f.value);
@@ -4592,21 +4577,47 @@ function DataGrid({
               return true;
           }
         }
+        const displayVal = col ? getDisplayValue(item, col) : raw === null || raw === void 0 ? "" : String(raw);
+        const isEmpty = displayVal === "" || displayVal === "undefined" || displayVal === "null";
+        if (col?.type === "number") {
+          const itemNum = Number(displayVal);
+          const filterNum = Number(f.value);
+          switch (f.operator) {
+            case "=":
+              return itemNum === filterNum;
+            case "!=":
+              return itemNum !== filterNum;
+            case ">":
+              return itemNum > filterNum;
+            case ">=":
+              return itemNum >= filterNum;
+            case "<":
+              return itemNum < filterNum;
+            case "<=":
+              return itemNum <= filterNum;
+            case "is empty":
+              return isEmpty;
+            case "is not empty":
+              return !isEmpty;
+            default:
+              return true;
+          }
+        }
         if (col?.type === "status") {
           switch (f.operator) {
             case "is":
-              return rawVal === f.value;
+              return displayVal === f.value;
             case "is not":
-              return rawVal !== f.value;
+              return displayVal !== f.value;
             case "is empty":
-              return rawVal === "" || rawVal === "undefined" || rawVal === "null";
+              return isEmpty;
             case "is not empty":
-              return rawVal !== "" && rawVal !== "undefined" && rawVal !== "null";
+              return !isEmpty;
             default:
               return true;
           }
         }
-        const itemVal = rawVal.toLowerCase();
+        const itemVal = displayVal.toLowerCase();
         const val = f.value.toLowerCase();
         switch (f.operator) {
           case "contains":
@@ -4640,7 +4651,7 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters]);
+  }, [data, filterText, advancedFilters, resolvedColumns]);
   const sortedData = (0, import_react23.useMemo)(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4666,9 +4677,14 @@ function DataGrid({
     const headers = exportableCols.map((c) => c.headerName).join(",");
     const rows = sortedData.map(
       (item) => exportableCols.map((c) => {
-        const raw = item[c.field];
-        const val = raw === null || raw === void 0 ? "" : String(raw).replace(/"/g, '""');
-        return `"${val}"`;
+        const field = String(c.field);
+        const raw = item[field];
+        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+        if (c.valueFormatter) {
+          val = c.valueFormatter({ value: val, row: item, field });
+        }
+        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
+        return `"${str}"`;
       }).join(",")
     );
     const csv = [headers, ...rows].join("\n");

package/dist/main.js CHANGED Viewed

@@ -4305,7 +4305,6 @@ function DataGrid({
   const [sortDirection, setSortDirection] = useState9(null);
   const [filterText, setFilterText] = useState9("");
   const [currentPage, setCurrentPage] = useState9(1);
-  const [columnFilters, setColumnFilters] = useState9({});
   const [resizingColumn, setResizingColumn] = useState9(null);
   const [startX, setStartX] = useState9(0);
   const [startWidth, setStartWidth] = useState9(0);
@@ -4400,46 +4399,32 @@ function DataGrid({
     });
     setActiveMenu(null);
   };
+  const getDisplayValue = (item, col) => {
+    const field = String(col.field);
+    const raw = item[field];
+    let val = col.valueGetter ? col.valueGetter({ value: raw, row: item, field }) : raw;
+    if (col.valueFormatter) {
+      val = col.valueFormatter({ value: val, row: item, field });
+    }
+    return val === null || val === void 0 ? "" : String(val);
+  };
   const filteredData = useMemo2(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || Object.values(item).some(
-        (val) => String(val).toLowerCase().includes(filterText.toLowerCase())
-      );
+      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
+        if (col.hidden) return false;
+        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
+      });
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
-        const rawVal = String(item[f.column]);
-        if (col?.type === "number") {
-          const itemNum = Number(rawVal);
-          const filterNum = Number(f.value);
-          switch (f.operator) {
-            case "=":
-              return itemNum === filterNum;
-            case "!=":
-              return itemNum !== filterNum;
-            case ">":
-              return itemNum > filterNum;
-            case ">=":
-              return itemNum >= filterNum;
-            case "<":
-              return itemNum < filterNum;
-            case "<=":
-              return itemNum <= filterNum;
-            case "is empty":
-              return rawVal === "" || rawVal === "undefined" || rawVal === "null";
-            case "is not empty":
-              return rawVal !== "" && rawVal !== "undefined" && rawVal !== "null";
-            default:
-              return true;
-          }
-        }
+        const field = f.column;
+        const raw = item[field];
         if (col?.type === "date") {
-          const raw = item[f.column];
-          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field: f.column }) : raw;
-          const isEmpty = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
-          if (f.operator === "is empty") return isEmpty;
-          if (f.operator === "is not empty") return !isEmpty;
-          if (isEmpty) return false;
+          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field }) : raw;
+          const isEmpty2 = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
+          if (f.operator === "is empty") return isEmpty2;
+          if (f.operator === "is not empty") return !isEmpty2;
+          if (isEmpty2) return false;
           const itemTs = new Date(resolvedDate);
           itemTs.setHours(0, 0, 0, 0);
           const filterTs = new Date(f.value);
@@ -4462,21 +4447,47 @@ function DataGrid({
               return true;
           }
         }
+        const displayVal = col ? getDisplayValue(item, col) : raw === null || raw === void 0 ? "" : String(raw);
+        const isEmpty = displayVal === "" || displayVal === "undefined" || displayVal === "null";
+        if (col?.type === "number") {
+          const itemNum = Number(displayVal);
+          const filterNum = Number(f.value);
+          switch (f.operator) {
+            case "=":
+              return itemNum === filterNum;
+            case "!=":
+              return itemNum !== filterNum;
+            case ">":
+              return itemNum > filterNum;
+            case ">=":
+              return itemNum >= filterNum;
+            case "<":
+              return itemNum < filterNum;
+            case "<=":
+              return itemNum <= filterNum;
+            case "is empty":
+              return isEmpty;
+            case "is not empty":
+              return !isEmpty;
+            default:
+              return true;
+          }
+        }
         if (col?.type === "status") {
           switch (f.operator) {
             case "is":
-              return rawVal === f.value;
+              return displayVal === f.value;
             case "is not":
-              return rawVal !== f.value;
+              return displayVal !== f.value;
             case "is empty":
-              return rawVal === "" || rawVal === "undefined" || rawVal === "null";
+              return isEmpty;
             case "is not empty":
-              return rawVal !== "" && rawVal !== "undefined" && rawVal !== "null";
+              return !isEmpty;
             default:
               return true;
           }
         }
-        const itemVal = rawVal.toLowerCase();
+        const itemVal = displayVal.toLowerCase();
         const val = f.value.toLowerCase();
         switch (f.operator) {
           case "contains":
@@ -4510,7 +4521,7 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters]);
+  }, [data, filterText, advancedFilters, resolvedColumns]);
   const sortedData = useMemo2(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4536,9 +4547,14 @@ function DataGrid({
     const headers = exportableCols.map((c) => c.headerName).join(",");
     const rows = sortedData.map(
       (item) => exportableCols.map((c) => {
-        const raw = item[c.field];
-        const val = raw === null || raw === void 0 ? "" : String(raw).replace(/"/g, '""');
-        return `"${val}"`;
+        const field = String(c.field);
+        const raw = item[field];
+        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+        if (c.valueFormatter) {
+          val = c.valueFormatter({ value: val, row: item, field });
+        }
+        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
+        return `"${str}"`;
       }).join(",")
     );
     const csv = [headers, ...rows].join("\n");

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.96",
+  "version": "0.2.98",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",