@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableExport/index.cjs

@@ -0,0 +1,461 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableExport_exports = {};
+__export(DataTableExport_exports, {
+  DataTableExport: () => DataTableExport
+});
+module.exports = __toCommonJS(DataTableExport_exports);
+var import_react = require("@phosphor-icons/react");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTableExport(props) {
+  const ctx = (0, import_DataTableStateContext.useDataTableState)();
+  const data = props.data ?? ctx?.computed.filteredData ?? [];
+  const columns = props.columns ?? (ctx ? extractColumnsFromTable(ctx.table) : []);
+  const {
+    filename = "export",
+    exportFormats = [{
+      id: "csv",
+      label: "CSV",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileTextIcon, {
+        size: 16
+      }),
+      extension: "csv",
+      mimeType: "text/csv",
+      description: "Comma-separated values",
+      enabled: true
+    }, {
+      id: "excel",
+      label: "Excel",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileXlsIcon, {
+        size: 16
+      }),
+      extension: "xlsx",
+      mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      description: "Microsoft Excel format",
+      enabled: true
+    }, {
+      id: "pdf",
+      label: "PDF",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileTextIcon, {
+        size: 16
+      }),
+      extension: "pdf",
+      mimeType: "application/pdf",
+      description: "Portable document format",
+      enabled: true
+    }, {
+      id: "json",
+      label: "JSON",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileJsIcon, {
+        size: 16
+      }),
+      extension: "json",
+      mimeType: "application/json",
+      description: "JavaScript object notation",
+      enabled: true
+    }],
+    onExport,
+    disabled = false
+  } = props;
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [isExporting, setIsExporting] = (0, import_react2.useState)(null);
+  const [exportOptions, setExportOptions] = (0, import_react2.useState)({
+    includeHeaders: true,
+    filename
+  });
+  const handleExport = async format => {
+    if (disabled || isExporting) return;
+    setIsExporting(format.id);
+    try {
+      const options = {
+        format: format.id,
+        includeHeaders: exportOptions.includeHeaders ?? true,
+        filename: exportOptions.filename || filename,
+        selectedColumns: exportOptions.selectedColumns,
+        customColumns: exportOptions.customColumns,
+        dateFormat: exportOptions.dateFormat,
+        numberFormat: exportOptions.numberFormat
+      };
+      if (onExport) {
+        await onExport(options);
+      } else {
+        await defaultExport(data, columns, options);
+      }
+    } catch (error) {
+      console.error("Export failed:", error);
+    } finally {
+      setIsExporting(null);
+    }
+  };
+  const handlePrint = async () => {
+    if (disabled || isExporting) return;
+    setIsExporting("print");
+    try {
+      await printTable(data, columns);
+    } catch (error) {
+      console.error("Print failed:", error);
+    } finally {
+      setIsExporting(null);
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$2",
+    alignItems: "center",
+    children: [exportFormats.filter(format => format.enabled).slice(0, 3).map(format => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      icon: format.icon,
+      disabled: disabled || isExporting === format.id,
+      onPress: () => handleExport(format),
+      "aria-label": `Export as ${format.label}`,
+      children: isExporting === format.id ? "..." : format.label
+    }, format.id)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
+        size: 16
+      }),
+      disabled: disabled || isExporting === "print",
+      onPress: handlePrint,
+      "aria-label": "Print table",
+      children: isExporting === "print" ? "..." : "Print"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExportOptionsPopover, {
+      exportFormats,
+      exportOptions,
+      onOptionsChange: setExportOptions,
+      onExport: handleExport,
+      onPrint: handlePrint,
+      disabled,
+      isExporting,
+      columns
+    })]
+  });
+}
+function extractColumnsFromTable(table) {
+  try {
+    return table.getAllColumns().map(col => ({
+      id: col.id,
+      accessorKey: col.id,
+      header: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id
+    }));
+  } catch {
+    return [];
+  }
+}
+function ExportOptionsPopover({
+  exportFormats,
+  exportOptions,
+  onOptionsChange,
+  onExport,
+  onPrint,
+  disabled,
+  isExporting,
+  columns
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sz = knobProps.sizeToken;
+  const popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [selectedColumns, setSelectedColumns] = (0, import_react2.useState)(new Set(columns.map(col => col.accessorKey || col.id || "")));
+  const availableColumns = columns.map(col => ({
+    key: col.accessorKey || col.id || "",
+    header: col.header || col.accessorKey || col.id || ""
+  }));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        chromeless: true,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+          size: 16
+        }),
+        disabled,
+        "aria-label": "Export options",
+        children: "Options"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      enterStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      minWidth: popoverMinWidth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.panelPadding,
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$5",
+          fontWeight: "600",
+          children: "Export Options"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$3",
+            fontWeight: "500",
+            children: "Filename"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+            value: exportOptions.filename || "",
+            onChangeText: text => onOptionsChange({
+              ...exportOptions,
+              filename: text
+            }),
+            placeholder: "Enter filename"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+          label: "Include headers",
+          checked: exportOptions.includeHeaders ?? true,
+          onCheckedChange: checked => onOptionsChange({
+            ...exportOptions,
+            includeHeaders: checked
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontSize: "$3",
+            fontWeight: "500",
+            children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 200,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$1",
+              children: availableColumns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+                label: col.header,
+                checked: selectedColumns.has(col.key),
+                onCheckedChange: checked => {
+                  const newSelected = new Set(selectedColumns);
+                  if (checked) {
+                    newSelected.add(col.key);
+                  } else {
+                    newSelected.delete(col.key);
+                  }
+                  setSelectedColumns(newSelected);
+                  onOptionsChange({
+                    ...exportOptions,
+                    selectedColumns: Array.from(newSelected)
+                  });
+                }
+              }, col.key))
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$4",
+            fontWeight: "500",
+            children: "Export Formats"
+          }), exportFormats.map(format => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            justifyContent: "flex-start",
+            disabled: disabled || isExporting === format.id || !format.enabled,
+            onPress: () => onExport(format),
+            icon: format.icon,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              gap: "$1",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$3",
+                fontWeight: "500",
+                children: format.label
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$2",
+                color: "$color10",
+                children: format.description
+              })]
+            }), isExporting === format.id && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$accentColor",
+              marginLeft: "auto",
+              children: "..."
+            })]
+          }, format.id))]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          chromeless: true,
+          justifyContent: "flex-start",
+          disabled: disabled || isExporting === "print",
+          onPress: onPrint,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
+            size: 16
+          }),
+          children: ["Print Table", isExporting === "print" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$2",
+            color: "$accentColor",
+            marginLeft: "auto",
+            children: "..."
+          })]
+        })]
+      })
+    })]
+  });
+}
+async function defaultExport(data, columns, options) {
+  const {
+    format,
+    selectedColumns
+  } = options;
+  const exportColumns = selectedColumns ? columns.filter(col => selectedColumns.includes(col.accessorKey || col.id || "")) : columns;
+  switch (format) {
+    case "csv":
+      return exportAsCSV(data, exportColumns, options);
+    case "json":
+      return exportAsJSON(data, exportColumns, options);
+    case "excel":
+      return exportAsExcel(data, exportColumns, options);
+    case "pdf":
+      return exportAsPDF(data, exportColumns, options);
+    default:
+      throw new Error(`Unsupported export format: ${format}`);
+  }
+}
+async function exportAsCSV(data, columns, options) {
+  const {
+    includeHeaders = true,
+    filename = "export"
+  } = options;
+  let csvContent = "";
+  if (includeHeaders) {
+    const headers = columns.map(col => col.header || col.accessorKey || "").join(",");
+    csvContent += `${headers}
+`;
+  }
+  data.forEach(row => {
+    const values = columns.map(col => {
+      const key = col.accessorKey || col.id || "";
+      let value = row[key];
+      if (col.cell) {
+        try {
+          value = col.cell({
+            getValue: () => value,
+            row: {
+              original: row
+            }
+          });
+        } catch {}
+      }
+      const stringValue = String(value || "");
+      return stringValue.includes(",") || stringValue.includes('"') ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
+    });
+    csvContent += `${values.join(",")}
+`;
+  });
+  downloadFile(csvContent, `${filename}.csv`, "text/csv");
+}
+async function exportAsJSON(data, columns, options) {
+  const {
+    filename = "export"
+  } = options;
+  const jsonData = data.map(row => {
+    const obj = {};
+    columns.forEach(col => {
+      const key = col.accessorKey || col.id || "";
+      obj[key] = row[key];
+    });
+    return obj;
+  });
+  const jsonContent = JSON.stringify(jsonData, null, 2);
+  downloadFile(jsonContent, `${filename}.json`, "application/json");
+}
+async function exportAsExcel(_data, _columns, _options) {
+  throw new Error("Excel export not built in. Install `xlsx` (or `exceljs`) and provide a custom `onExport` handler \u2014 see DataTableExport source for an example.");
+}
+async function exportAsPDF(_data, _columns, _options) {
+  throw new Error("PDF export not built in. Install `jspdf` and provide a custom `onExport` handler, or use the `print` format which opens the browser print dialog (Save as PDF).");
+}
+async function printTable(data, columns) {
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+  const htmlContent = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <title>Table Export</title>
+      <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; font-weight: bold; }
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        @media print { body { margin: 0; } }
+      </style>
+    </head>
+    <body>
+      <h1>Data Export</h1>
+      <table>
+        <thead>
+          <tr>
+            ${columns.map(col => `<th>${col.header || col.accessorKey || ""}</th>`).join("")}
+          </tr>
+        </thead>
+        <tbody>
+          ${data.map(row => `
+            <tr>
+              ${columns.map(col => {
+    const key = col.accessorKey || col.id || "";
+    let value = row[key];
+    if (col.cell) {
+      try {
+        value = col.cell({
+          getValue: () => value,
+          row: {
+            original: row
+          }
+        });
+      } catch {}
+    }
+    return `<td>${String(value || "")}</td>`;
+  }).join("")}
+            </tr>
+          `).join("")}
+        </tbody>
+      </table>
+    </body>
+    </html>
+  `;
+  printWindow.document.write(htmlContent);
+  printWindow.document.close();
+  printWindow.print();
+}
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], {
+    type: mimeType
+  });
+  (0, import_platform.downloadBlob)(blob, filename);
+}