@monolith-forensics/monolith-ui 1.3.116-dev.1 → 1.3.116-dev.2

package/dist/QueryFilter/types.d.ts

@@ -20,13 +20,13 @@ export type Operator = {
     label: string;
     value: string;
 };
-export type EditorType = "text" | "select" | "checkbox" | "radio" | "multiselect" | "date" | "time" | null;
+export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
 export interface FilterDefinition {
     dataField: string;
     label: string;
     pluralLabel?: string;
     operators?: Operator[];
-    inputType?: HTMLInputElement["type"];
+    inputType?: InputType;
     resolution?: "day" | "second" | "millisecond";
     isoString?: boolean;
     placeholder?: string;
@@ -34,7 +34,6 @@ export interface FilterDefinition {
     dropDownOptions?: {
         style?: React.CSSProperties;
     };
-    editorType?: EditorType;
     query?: DropDownMenuProps["query"];
 }
 export interface Rule {

package/dist/Table/TableMenu/TableMenu.js

@@ -30,7 +30,7 @@ const FlexedRow = styled.div `
 `;
 const TableMenu = () => {
     var _a, _b, _c, _d, _e;
-    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, filterState, handleFilterChange, clearSearch, } = useTable();
+    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, clearSearch, } = useTable();
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
@@ -111,10 +111,7 @@ const TableMenu = () => {
                                     title: "Export List to XLSX",
                                     size: "xxs",
                                     style: { padding: "0px 4px" },
-                                }, onItemSelect: (item) => {
-                                    var _a, _b;
-                                    return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, item.value);
-                                }, dropDownProps: {
+                                }, onItemSelect: (item) => void handleTableExport(item.value), dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
                                 }, children: _jsx(DownloadIcon, { size: 14 }) })), (compactOptions === null || compactOptions === void 0 ? void 0 : compactOptions.enabled) === true && (_jsx(Button, { variant: "outlined", title: "Toggle Compact", size: "xxs", style: { padding: "0px 4px" }, onClick: () => toggleCompact(), children: compactState ? _jsx(Rows4Icon, { size: 14 }) : _jsx(Rows3Icon, { size: 14 }) })), (columnSelectorOptions === null || columnSelectorOptions === void 0 ? void 0 : columnSelectorOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: columnState.map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,

package/dist/Table/TableProvider.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -18,6 +27,7 @@ import shortUUID from "short-uuid";
 import { SelectionStatus } from "./enums";
 import moment from "moment";
 import { useControlled } from "../Utilities";
+import { exportTableToExcel } from "./Utils";
 const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) => {
     if (!selectionState) {
         return 0;
@@ -37,7 +47,7 @@ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) =
 };
 export const TableContext = createContext(null);
 const TableProvider = (_a) => {
-    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange"]);
+    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, manualExport, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "manualExport", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange"]);
     const _columns = useMemo(() => columns
         .map((child, index) => {
         if (child.dataField === "__key") {
@@ -192,6 +202,18 @@ const TableProvider = (_a) => {
     const clearSearch = () => {
         updateSearchState("");
     };
+    const handleTableExport = (exportType) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (manualExport === true) {
+            (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, exportType);
+            return;
+        }
+        yield exportTableToExcel({
+            columns: columnState,
+            data: _data,
+            exportMode: exportType,
+        });
+    });
     const updateSortState = (sortState) => {
         var _a;
         setSortState(sortState);
@@ -209,20 +231,36 @@ const TableProvider = (_a) => {
         // sort data
         return data.sort((a, b) => {
             if (sortState) {
+                const aValue = a[sortState.dataField];
+                const bValue = b[sortState.dataField];
+                const aIsEmpty = aValue === null || aValue === undefined;
+                const bIsEmpty = bValue === null || bValue === undefined;
+                // Treat empty values as the smallest values.
+                if (aIsEmpty && bIsEmpty) {
+                    return 0;
+                }
+                if (aIsEmpty || bIsEmpty) {
+                    if (sortState.dir === "asc") {
+                        return aIsEmpty ? -1 : 1;
+                    }
+                    if (sortState.dir === "desc") {
+                        return aIsEmpty ? 1 : -1;
+                    }
+                }
                 if (sortState.dir === "asc") {
-                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                    if (aValue < bValue) {
                         return -1;
                     }
-                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                    if (aValue > bValue) {
                         return 1;
                     }
                     return 0;
                 }
                 else if (sortState.dir === "desc") {
-                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                    if (aValue > bValue) {
                         return -1;
                     }
-                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                    if (aValue < bValue) {
                         return 1;
                     }
                     return 0;
@@ -583,6 +621,7 @@ const TableProvider = (_a) => {
             toggleColumnVisibility,
             runSearch,
             clearSearch,
+            handleTableExport,
             handleFilterChange, filterState: _filterState, compactState,
             toggleCompact,
             getCalculatedSelectionTotal,

package/dist/Table/Utils/index.d.ts

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
 export { default as resizeHandler } from "./resizeHandler";
+export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/index.js

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
 export { default as resizeHandler } from "./resizeHandler";
+export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/tableExport.d.ts

@@ -0,0 +1,9 @@
+import { TableExportOptions } from "../enums";
+import { ColumnState } from "../types";
+type TableExportParams = {
+    columns: ColumnState[];
+    data: any[];
+    exportMode: TableExportOptions;
+};
+export declare const exportTableToExcel: ({ columns, data, exportMode, }: TableExportParams) => Promise<void>;
+export {};

package/dist/Table/Utils/tableExport.js

@@ -0,0 +1,102 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { isValidElement } from "react";
+import { TableExportOptions } from "../enums";
+const getColumnHeader = (column) => {
+    return column.caption || column.dataField;
+};
+const toExportablePrimitive = (value) => {
+    if (value === undefined || value === null)
+        return null;
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        value instanceof Date) {
+        return value;
+    }
+    if (value instanceof RegExp) {
+        return value.toString();
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => toExportablePrimitive(item)).join(", ");
+    }
+    if (typeof value === "object") {
+        try {
+            return JSON.stringify(value);
+        }
+        catch (_a) {
+            return String(value);
+        }
+    }
+    return String(value);
+};
+const extractTextFromNode = (node) => {
+    if (node === null || node === undefined || typeof node === "boolean") {
+        return "";
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map((child) => extractTextFromNode(child)).join("");
+    }
+    if (isValidElement(node)) {
+        return extractTextFromNode(node.props.children);
+    }
+    return "";
+};
+const getExportCellValue = (row, column) => {
+    const rawValue = row[column.dataField];
+    if (!column.render) {
+        return toExportablePrimitive(rawValue);
+    }
+    const renderedText = extractTextFromNode(column.render({ rowData: row }));
+    if (renderedText.trim().length > 0) {
+        return renderedText;
+    }
+    return toExportablePrimitive(rawValue);
+};
+const getColumnsForExport = (columns, exportMode) => {
+    return columns
+        .filter((column) => {
+        if (exportMode === TableExportOptions.ExportVisible) {
+            return column.visible !== false;
+        }
+        return true;
+    })
+        .sort((a, b) => a.orderValue - b.orderValue);
+};
+const getFileName = () => {
+    const timestamp = new Date().toISOString().replaceAll(":", "-");
+    return `table-export-${timestamp}.xlsx`;
+};
+const downloadBuffer = (buffer) => {
+    const blob = new Blob([buffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const url = window.URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = getFileName();
+    anchor.click();
+    window.URL.revokeObjectURL(url);
+};
+export const exportTableToExcel = (_a) => __awaiter(void 0, [_a], void 0, function* ({ columns, data, exportMode, }) {
+    const { default: ExcelJS } = yield import("exceljs");
+    const exportColumns = getColumnsForExport(columns, exportMode);
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet("Table Export");
+    worksheet.addRow(exportColumns.map((column) => getColumnHeader(column)));
+    data.forEach((row) => {
+        worksheet.addRow(exportColumns.map((column) => getExportCellValue(row, column)));
+    });
+    const buffer = yield workbook.xlsx.writeBuffer();
+    downloadBuffer(buffer);
+});

package/dist/Table/types.d.ts

@@ -134,6 +134,7 @@ export type TableContextType = {
     toggleColumnVisibility: (dataField: string) => void;
     runSearch: (query: string) => void;
     clearSearch: () => void;
+    handleTableExport: (e: TableExportOptions) => Promise<void> | void;
     handleFilterChange: (query: Query) => void;
     selectAllRows: () => void;
     clearSelections: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.116-dev.1",
+  "version": "1.3.116-dev.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -59,6 +59,7 @@
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",
+    "exceljs": "^4.4.0",
     "lucide-react": "^0.469.0",
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",