@techsio/ui-kit 0.37.0 → 0.38.0

package/dist/organisms/data-table.helpers.js

@@ -0,0 +1,168 @@
+import { columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, tableFeatures } from "@tanstack/react-table";
+import { isBlank, matchBetween, typedFilterMatch } from "./data-table.fields.js";
+const FILTER_VARIANT_TYPE = {
+    text: "string",
+    number: "number",
+    range: "number",
+    select: "enum"
+};
+function resolveColumnType(meta) {
+    return meta?.type ?? (meta?.filterVariant && FILTER_VARIANT_TYPE[meta.filterVariant]) ?? "string";
+}
+function filterValueIsEmpty(value, column) {
+    if (null == value) return true;
+    if (Array.isArray(value)) return 0 === value.length;
+    if ("object" != typeof value) return isBlank(value);
+    const v = value;
+    if ("empty" === v.operator || "notEmpty" === v.operator) return false;
+    if (Array.isArray(v.values)) return 0 === v.values.length;
+    if ("boolean" == typeof v.value) return false;
+    if (!(isBlank(v.value) && isBlank(v.to) && isBlank(v.from))) return false;
+    if (void 0 === v.operator) return true;
+    const meta = column?.columnDef?.meta;
+    const type = resolveColumnType(meta);
+    const defaultOperator = "number" === type || "int" === type || "custom" === type ? "equals" : "contains";
+    return v.operator === defaultOperator;
+}
+const typedFilterFn = (row, columnId, filterValue)=>{
+    const type = resolveColumnType(row.table.getColumn(columnId)?.columnDef.meta);
+    return typedFilterMatch(type, row.getValue(columnId), filterValue);
+};
+typedFilterFn.autoRemove = filterValueIsEmpty;
+function evaluateBetween(num, cellHasNoNumber, value, to) {
+    return matchBetween(num, cellHasNoNumber, {
+        value: value,
+        to: to
+    });
+}
+function guardNumericOperator(operator, isNumericColumn, target, cellHasNoNumber) {
+    const numericOperator = "gt" === operator || "gte" === operator || "lt" === operator || "lte" === operator || isNumericColumn && ("equals" === operator || "notEquals" === operator);
+    if (!numericOperator) return;
+    if (Number.isNaN(target)) return true;
+    if (cellHasNoNumber) return "notEquals" === operator;
+}
+function evaluateCondition(cellValue, { operator, value, to }, isNumericColumn) {
+    if ("empty" === operator) return isBlank(cellValue);
+    if ("notEmpty" === operator) return !isBlank(cellValue);
+    if (isBlank(value) && "between" !== operator) return true;
+    const text = String(cellValue ?? "").toLowerCase();
+    const query = String(value ?? "").toLowerCase();
+    const num = Number(cellValue);
+    const target = Number(value);
+    const cellHasNoNumber = isBlank(cellValue) || Number.isNaN(num);
+    const numericGuard = guardNumericOperator(operator, isNumericColumn, target, cellHasNoNumber);
+    if (void 0 !== numericGuard) return numericGuard;
+    switch(operator){
+        case "contains":
+            return text.includes(query);
+        case "notContains":
+            return !text.includes(query);
+        case "equals":
+            return isNumericColumn ? num === target : text === query;
+        case "notEquals":
+            return isNumericColumn ? num !== target : text !== query;
+        case "startsWith":
+            return text.startsWith(query);
+        case "endsWith":
+            return text.endsWith(query);
+        case "gt":
+            return num > target;
+        case "gte":
+            return num >= target;
+        case "lt":
+            return num < target;
+        case "lte":
+            return num <= target;
+        case "between":
+            return evaluateBetween(num, cellHasNoNumber, value, to);
+        default:
+            return true;
+    }
+}
+const conditionalFilterFn = (row, columnId, filterValue)=>{
+    if (null == filterValue) return true;
+    const type = resolveColumnType(row.table.getColumn(columnId)?.columnDef.meta);
+    if (!filterValue.operator) return typedFilterMatch(type, row.getValue(columnId), filterValue);
+    return evaluateCondition(row.getValue(columnId), filterValue, "number" === type || "int" === type);
+};
+conditionalFilterFn.autoRemove = filterValueIsEmpty;
+const toCssLength = (value)=>"number" == typeof value ? `${value}px` : value;
+function applyColumnDefaults(columns) {
+    return columns.map((column)=>{
+        const group = column;
+        const next = group.columns ? {
+            ...column,
+            columns: applyColumnDefaults(group.columns)
+        } : {
+            ...column
+        };
+        if (void 0 === next.filterFn) next.filterFn = "typed";
+        const meta = next.meta;
+        if ("number" == typeof meta?.width && void 0 === next.size) next.size = meta.width;
+        if ("number" == typeof meta?.minWidth && void 0 === next.minSize) next.minSize = meta.minWidth;
+        if ("number" == typeof meta?.maxWidth && void 0 === next.maxSize) next.maxSize = meta.maxWidth;
+        return next;
+    });
+}
+function getColumnSizeStyles(column, enableColumnResizing, columnSizing) {
+    const meta = column.columnDef.meta;
+    const declared = meta?.width;
+    const wasResized = true === enableColumnResizing && void 0 !== columnSizing && Object.hasOwn(columnSizing, column.id);
+    const fromTanstack = wasResized || "number" == typeof declared;
+    return {
+        width: toCssLength(fromTanstack ? column.getSize() : declared),
+        minWidth: toCssLength(meta?.minWidth),
+        maxWidth: toCssLength(meta?.maxWidth)
+    };
+}
+const DATA_TABLE_Z = {
+    pinnedCell: 1,
+    stickyActionsCell: 2,
+    stickyHeaderCell: 10,
+    pinnedHeaderCell: 20,
+    stickyActionsHeaderCell: 21
+};
+function getPinningStyles(column, kind = "body") {
+    const pinned = column.getIsPinned();
+    if (!pinned) return {};
+    return {
+        position: "sticky",
+        insetInlineStart: "start" === pinned ? `${column.getStart("start")}px` : void 0,
+        insetInlineEnd: "end" === pinned ? `${column.getAfter("end")}px` : void 0,
+        zIndex: "header" === kind ? DATA_TABLE_Z.pinnedHeaderCell : DATA_TABLE_Z.pinnedCell
+    };
+}
+function isLastStartPinned(column) {
+    return "start" === column.getIsPinned() && true === column.getIsLastColumn("start");
+}
+function isFirstEndPinned(column) {
+    return "end" === column.getIsPinned() && true === column.getIsFirstColumn("end");
+}
+const dataTableFeatures = tableFeatures({
+    columnFilteringFeature: columnFilteringFeature,
+    columnOrderingFeature: columnOrderingFeature,
+    columnPinningFeature: columnPinningFeature,
+    columnResizingFeature: columnResizingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    globalFilteringFeature: globalFilteringFeature,
+    rowExpandingFeature: rowExpandingFeature,
+    rowPaginationFeature: rowPaginationFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowSortingFeature: rowSortingFeature,
+    expandedRowModel: createExpandedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    filterFns: {
+        conditional: conditionalFilterFn,
+        includesString: filterFn_includesString,
+        typed: typedFilterFn
+    },
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        datetime: sortFn_datetime,
+        text: sortFn_text
+    }
+});
+export { DATA_TABLE_Z, applyColumnDefaults, conditionalFilterFn, dataTableFeatures, getColumnSizeStyles, getPinningStyles, isFirstEndPinned, isLastStartPinned, resolveColumnType, typedFilterFn };