@canvas-components/react-list-table 0.3.37 → 0.3.38

package/dist/index.cjs

@@ -3573,6 +3573,37 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function readExportCache(storageKey) {
+  if (!storageKey) return null;
+  try {
+    const value = JSON.parse(localStorage.getItem(`canvas-table-export:${storageKey}`) ?? "null");
+    if (value?.version !== 1 || !Array.isArray(value.rows) || !Array.isArray(value.selectedKeys) || !value.selectedKeys.every((key) => typeof key === "string") || typeof value.includeSummary !== "boolean") return null;
+    if (!value.rows.every((row) => row && typeof row.key === "string" && ["default", "ascend", "descend"].includes(row.sortOrder) && summaryOptions.some((option) => option.value === row.summaryType) && roundingOptions.some((option) => option.value === row.roundingMode) && ["yes", "no"].includes(row.showTypePrefix) && ["yes", "no"].includes(row.preserveTrailingZeros) && (row.precision == null || Number.isInteger(row.precision) && row.precision >= 0 && row.precision <= 20) && (row.sortIndex == null || Number.isFinite(row.sortIndex)) && (row.sortPriority == null || Number.isFinite(row.sortPriority)))) return null;
+    return value;
+  } catch {
+    return null;
+  }
+}
+function writeExportCache(storageKey, value) {
+  if (!storageKey) return;
+  try {
+    const key = `canvas-table-export:${storageKey}`;
+    if (value) localStorage.setItem(key, JSON.stringify(value));
+    else localStorage.removeItem(key);
+  } catch {
+  }
+}
+function restoreExportRows(columns, cache) {
+  const current = new Map(createExportDialogRows(columns).map((row) => [row.key, row]));
+  const rows = [];
+  cache?.rows.forEach((saved) => {
+    const row = current.get(saved.key);
+    if (!row) return;
+    rows.push({ ...saved, key: row.key, title: row.title });
+    current.delete(saved.key);
+  });
+  return [...rows, ...current.values()];
+}
 var sortOptions = [
   { value: "default", label: "\u9ED8\u8BA4" },
   { value: "ascend", label: "\u5347\u5E8F" },
@@ -3644,18 +3675,34 @@ function buildExportDialogSettings(rows, selectedKeys, includeSummary) {
 function ReactListTableExportNameDialog({
   request,
   onClose,
-  renderTable
+  renderTable,
+  storageKey
 }) {
   const tableId = react.useId();
+  const tableHostRef = react.useRef(null);
+  const [tableWidth, setTableWidth] = react.useState(0);
+  react.useEffect(() => {
+    const host = tableHostRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const update = () => setTableWidth(host.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
   const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/i)?.[0] ?? "";
   const [fileName, setFileName] = react.useState(
     extension ? request.fileName.slice(0, -extension.length) : request.fileName
   );
-  const [rows, setRows] = react.useState(() => createExportDialogRows(request.columns ?? []));
+  const [cached] = react.useState(() => readExportCache(storageKey));
+  const [cacheEnabled, setCacheEnabled] = react.useState(Boolean(storageKey));
+  const [rows, setRows] = react.useState(() => restoreExportRows(request.columns ?? [], cached));
   const [selectedKeys, setSelectedKeys] = react.useState(
-    () => (request.columns ?? []).filter((column) => column.selected !== false).map((column) => column.key)
+    () => (request.columns ?? []).filter((column) => cached?.rows.some((row) => row.key === column.key) ? cached.selectedKeys.includes(column.key) : column.selected !== false).map((column) => column.key)
+  );
+  const [includeSummary, setIncludeSummary] = react.useState(
+    () => cached?.includeSummary ?? (request.includeSummary === true || (request.columns?.some((column) => column.summary.type !== "none") ?? false))
   );
-  const [includeSummary, setIncludeSummary] = react.useState(request.includeSummary ?? false);
   const [error, setError] = react.useState("");
   const columns = react.useMemo(
     () => [
@@ -3733,9 +3780,16 @@ function ReactListTableExportNameDialog({
     ],
     [includeSummary, request.columns]
   );
+  const fittedColumns = react.useMemo(
+    () => fitExportDialogColumns(columns, tableWidth),
+    [columns, tableWidth]
+  );
   const confirm = () => {
     if (!fileName.trim()) return setError("\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0");
     if (request.columns && !selectedKeys.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
+    if (request.columns && cacheEnabled) {
+      writeExportCache(storageKey, { version: 1, rows, selectedKeys: selectedKeys.map(String), includeSummary });
+    }
     request.onConfirm(
       `${fileName.trim()}${extension}`,
       request.columns ? buildExportDialogSettings(rows, selectedKeys, includeSummary) : void 0
@@ -3747,7 +3801,7 @@ function ReactListTableExportNameDialog({
     {
       open: true,
       title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: request.columns ? 1180 : 420,
+      width: request.columns ? includeSummary ? 1320 : 1180 : 420,
       fullscreenable: false,
       onOk: confirm,
       okText: "\u5BFC\u51FA",
@@ -3780,6 +3834,27 @@ function ReactListTableExportNameDialog({
         request.columns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 8 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: "\u5BFC\u51FA\u8868\u683C\u5217" }),
+            storageKey ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 6 },
+                title: "\u5BFC\u51FA\u65F6\u4FDD\u5B58\u914D\u7F6E\uFF0C\u4E0B\u6B21\u6253\u5F00\u81EA\u52A8\u6062\u590D\uFF1B\u53D6\u6D88\u52FE\u9009\u6E05\u9664\u7F13\u5B58",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.ReactCheckbox,
+                    {
+                      checked: cacheEnabled,
+                      "aria-label": "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E",
+                      onChange: (event) => {
+                        setCacheEnabled(event.target.checked);
+                        if (!event.target.checked) writeExportCache(storageKey, null);
+                      }
+                    }
+                  ),
+                  "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E"
+                ]
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactComponents.ReactCheckbox,
@@ -3792,9 +3867,9 @@ function ReactListTableExportNameDialog({
               "\u5BFC\u51FA\u6C47\u603B\u884C"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tableHostRef, style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
             tableId,
-            columns,
+            columns: fittedColumns,
             dataSource: rows,
             rowKey: "key",
             rowHeight: 42,
@@ -3839,6 +3914,17 @@ function ReactListTableExportNameDialog({
     }
   );
 }
+function fitExportDialogColumns(columns, availableWidth) {
+  if (availableWidth <= 0) return columns;
+  const totalWidth = (items) => items.reduce((sum, column) => sum + (column.key === listTable.ROW_SELECTION_COLUMN.key ? 0 : column.children?.length ? totalWidth(column.children) : Number(column.width) || 160), 0);
+  const ratio = Math.min(1, Math.max(availableWidth - 54 - 32, 1) / totalWidth(columns));
+  const fit = (items) => items.map((column) => {
+    if (column.key === listTable.ROW_SELECTION_COLUMN.key) return column;
+    if (column.children?.length) return { ...column, children: fit(column.children) };
+    return { ...column, width: Math.max(1, Math.floor((Number(column.width) || 160) * ratio)), minWidth: 1 };
+  });
+  return fit(columns);
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -6266,6 +6352,7 @@ function ReactListTableInner(props, ref) {
         ReactListTableExportNameDialog,
         {
           request: exportNameRequest,
+          storageKey: storageKey ? `list:${storageKey}` : void 0,
           onClose: closeExportNameRequest,
           renderTable: (tableProps) => /* @__PURE__ */ jsxRuntime.jsx(ReactListTable, { ...tableProps })
         }

package/dist/index.d.cts

@@ -111,9 +111,11 @@ interface ExportDialogRow {
     preserveTrailingZeros: "yes" | "no";
 }
 /** 使用 ReactListTable 承载大量导出列的弹窗。 */
-declare function ReactListTableExportNameDialog({ request, onClose, renderTable, }: {
+declare function ReactListTableExportNameDialog({ request, onClose, renderTable, storageKey, }: {
     request: ListTableExportNameRequest;
     onClose?: () => void;
+    /** 用于隔离不同表格的导出配置缓存。 */
+    storageKey?: string;
     renderTable: (props: ReactListTableProps<ExportDialogRow>) => ReactNode;
 }): react.JSX.Element;
 

package/dist/index.d.ts

@@ -111,9 +111,11 @@ interface ExportDialogRow {
     preserveTrailingZeros: "yes" | "no";
 }
 /** 使用 ReactListTable 承载大量导出列的弹窗。 */
-declare function ReactListTableExportNameDialog({ request, onClose, renderTable, }: {
+declare function ReactListTableExportNameDialog({ request, onClose, renderTable, storageKey, }: {
     request: ListTableExportNameRequest;
     onClose?: () => void;
+    /** 用于隔离不同表格的导出配置缓存。 */
+    storageKey?: string;
     renderTable: (props: ReactListTableProps<ExportDialogRow>) => ReactNode;
 }): react.JSX.Element;
 

package/dist/index.js

@@ -3572,6 +3572,37 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function readExportCache(storageKey) {
+  if (!storageKey) return null;
+  try {
+    const value = JSON.parse(localStorage.getItem(`canvas-table-export:${storageKey}`) ?? "null");
+    if (value?.version !== 1 || !Array.isArray(value.rows) || !Array.isArray(value.selectedKeys) || !value.selectedKeys.every((key) => typeof key === "string") || typeof value.includeSummary !== "boolean") return null;
+    if (!value.rows.every((row) => row && typeof row.key === "string" && ["default", "ascend", "descend"].includes(row.sortOrder) && summaryOptions.some((option) => option.value === row.summaryType) && roundingOptions.some((option) => option.value === row.roundingMode) && ["yes", "no"].includes(row.showTypePrefix) && ["yes", "no"].includes(row.preserveTrailingZeros) && (row.precision == null || Number.isInteger(row.precision) && row.precision >= 0 && row.precision <= 20) && (row.sortIndex == null || Number.isFinite(row.sortIndex)) && (row.sortPriority == null || Number.isFinite(row.sortPriority)))) return null;
+    return value;
+  } catch {
+    return null;
+  }
+}
+function writeExportCache(storageKey, value) {
+  if (!storageKey) return;
+  try {
+    const key = `canvas-table-export:${storageKey}`;
+    if (value) localStorage.setItem(key, JSON.stringify(value));
+    else localStorage.removeItem(key);
+  } catch {
+  }
+}
+function restoreExportRows(columns, cache) {
+  const current = new Map(createExportDialogRows(columns).map((row) => [row.key, row]));
+  const rows = [];
+  cache?.rows.forEach((saved) => {
+    const row = current.get(saved.key);
+    if (!row) return;
+    rows.push({ ...saved, key: row.key, title: row.title });
+    current.delete(saved.key);
+  });
+  return [...rows, ...current.values()];
+}
 var sortOptions = [
   { value: "default", label: "\u9ED8\u8BA4" },
   { value: "ascend", label: "\u5347\u5E8F" },
@@ -3643,18 +3674,34 @@ function buildExportDialogSettings(rows, selectedKeys, includeSummary) {
 function ReactListTableExportNameDialog({
   request,
   onClose,
-  renderTable
+  renderTable,
+  storageKey
 }) {
   const tableId = useId();
+  const tableHostRef = useRef(null);
+  const [tableWidth, setTableWidth] = useState(0);
+  useEffect(() => {
+    const host = tableHostRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const update = () => setTableWidth(host.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
   const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/i)?.[0] ?? "";
   const [fileName, setFileName] = useState(
     extension ? request.fileName.slice(0, -extension.length) : request.fileName
   );
-  const [rows, setRows] = useState(() => createExportDialogRows(request.columns ?? []));
+  const [cached] = useState(() => readExportCache(storageKey));
+  const [cacheEnabled, setCacheEnabled] = useState(Boolean(storageKey));
+  const [rows, setRows] = useState(() => restoreExportRows(request.columns ?? [], cached));
   const [selectedKeys, setSelectedKeys] = useState(
-    () => (request.columns ?? []).filter((column) => column.selected !== false).map((column) => column.key)
+    () => (request.columns ?? []).filter((column) => cached?.rows.some((row) => row.key === column.key) ? cached.selectedKeys.includes(column.key) : column.selected !== false).map((column) => column.key)
+  );
+  const [includeSummary, setIncludeSummary] = useState(
+    () => cached?.includeSummary ?? (request.includeSummary === true || (request.columns?.some((column) => column.summary.type !== "none") ?? false))
   );
-  const [includeSummary, setIncludeSummary] = useState(request.includeSummary ?? false);
   const [error, setError] = useState("");
   const columns = useMemo(
     () => [
@@ -3732,9 +3779,16 @@ function ReactListTableExportNameDialog({
     ],
     [includeSummary, request.columns]
   );
+  const fittedColumns = useMemo(
+    () => fitExportDialogColumns(columns, tableWidth),
+    [columns, tableWidth]
+  );
   const confirm = () => {
     if (!fileName.trim()) return setError("\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0");
     if (request.columns && !selectedKeys.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
+    if (request.columns && cacheEnabled) {
+      writeExportCache(storageKey, { version: 1, rows, selectedKeys: selectedKeys.map(String), includeSummary });
+    }
     request.onConfirm(
       `${fileName.trim()}${extension}`,
       request.columns ? buildExportDialogSettings(rows, selectedKeys, includeSummary) : void 0
@@ -3746,7 +3800,7 @@ function ReactListTableExportNameDialog({
     {
       open: true,
       title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: request.columns ? 1180 : 420,
+      width: request.columns ? includeSummary ? 1320 : 1180 : 420,
       fullscreenable: false,
       onOk: confirm,
       okText: "\u5BFC\u51FA",
@@ -3779,6 +3833,27 @@ function ReactListTableExportNameDialog({
         request.columns ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 8 }, children: [
             /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: "\u5BFC\u51FA\u8868\u683C\u5217" }),
+            storageKey ? /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 6 },
+                title: "\u5BFC\u51FA\u65F6\u4FDD\u5B58\u914D\u7F6E\uFF0C\u4E0B\u6B21\u6253\u5F00\u81EA\u52A8\u6062\u590D\uFF1B\u53D6\u6D88\u52FE\u9009\u6E05\u9664\u7F13\u5B58",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ReactCheckbox,
+                    {
+                      checked: cacheEnabled,
+                      "aria-label": "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E",
+                      onChange: (event) => {
+                        setCacheEnabled(event.target.checked);
+                        if (!event.target.checked) writeExportCache(storageKey, null);
+                      }
+                    }
+                  ),
+                  "\u7F13\u5B58\u5BFC\u51FA\u914D\u7F6E"
+                ]
+              }
+            ) : null,
             /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
               /* @__PURE__ */ jsx(
                 ReactCheckbox,
@@ -3791,9 +3866,9 @@ function ReactListTableExportNameDialog({
               "\u5BFC\u51FA\u6C47\u603B\u884C"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
+          /* @__PURE__ */ jsx("div", { ref: tableHostRef, style: { height: "min(45vh, 520px)", minHeight: 250, overflow: "hidden" }, children: renderTable({
             tableId,
-            columns,
+            columns: fittedColumns,
             dataSource: rows,
             rowKey: "key",
             rowHeight: 42,
@@ -3838,6 +3913,17 @@ function ReactListTableExportNameDialog({
     }
   );
 }
+function fitExportDialogColumns(columns, availableWidth) {
+  if (availableWidth <= 0) return columns;
+  const totalWidth = (items) => items.reduce((sum, column) => sum + (column.key === ROW_SELECTION_COLUMN.key ? 0 : column.children?.length ? totalWidth(column.children) : Number(column.width) || 160), 0);
+  const ratio = Math.min(1, Math.max(availableWidth - 54 - 32, 1) / totalWidth(columns));
+  const fit = (items) => items.map((column) => {
+    if (column.key === ROW_SELECTION_COLUMN.key) return column;
+    if (column.children?.length) return { ...column, children: fit(column.children) };
+    return { ...column, width: Math.max(1, Math.floor((Number(column.width) || 160) * ratio)), minWidth: 1 };
+  });
+  return fit(columns);
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -6265,6 +6351,7 @@ function ReactListTableInner(props, ref) {
         ReactListTableExportNameDialog,
         {
           request: exportNameRequest,
+          storageKey: storageKey ? `list:${storageKey}` : void 0,
           onClose: closeExportNameRequest,
           renderTable: (tableProps) => /* @__PURE__ */ jsx(ReactListTable, { ...tableProps })
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/react-list-table",
-  "version": "0.3.37",
+  "version": "0.3.38",
   "description": "React adapter for the list table core engine.",
   "license": "MIT",
   "type": "module",