@canvas-components/react-pivot-table 0.2.3 → 0.2.4

package/dist/index.d.cts

@@ -14,6 +14,8 @@ interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknow
     layout?: PivotFieldLayout;
     /** 非受控字段区域初始布局。 */
     defaultLayout?: PivotFieldLayout;
+    /** 非受控字段布局的 IndexedDB 持久化键。 */
+    storageKey?: string;
     /** 面板宽度。 */
     panelWidth?: number;
     onOpenChange?: (open: boolean) => void;

package/dist/index.d.ts

@@ -14,6 +14,8 @@ interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknow
     layout?: PivotFieldLayout;
     /** 非受控字段区域初始布局。 */
     defaultLayout?: PivotFieldLayout;
+    /** 非受控字段布局的 IndexedDB 持久化键。 */
+    storageKey?: string;
     /** 面板宽度。 */
     panelWidth?: number;
     onOpenChange?: (open: boolean) => void;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
-import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, createPivotCellKey } from '@canvas-components/pivot-table';
+import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotFieldLayout, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
 import { ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactInput, ReactSelect, ReactInputNumber } from '@canvas-components/react-components';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -1266,6 +1266,7 @@ function ReactPivotTableInner(props, ref) {
     null
   );
   const chartIdRef = useRef(0);
+  const layoutRevisionRef = useRef(0);
   const [internalLayout, setInternalLayout] = useState(
     () => customizationOptions?.defaultLayout ?? createEmptyPivotFieldLayout()
   );
@@ -1371,7 +1372,13 @@ function ReactPivotTableInner(props, ref) {
     setCharts((current) => current.filter((chart) => chart.id !== chartId));
   };
   const applyLayout = (next) => {
-    if (customizationOptions?.layout === void 0) setInternalLayout(next);
+    if (customizationOptions?.layout === void 0) {
+      layoutRevisionRef.current += 1;
+      setInternalLayout(next);
+      if (customizationOptions?.storageKey) {
+        void savePivotFieldLayout(customizationOptions.storageKey, next);
+      }
+    }
     customizationOptions?.onLayoutChange?.(next);
   };
   const moveField = (fieldKey, area, index, sourceArea) => {
@@ -1419,6 +1426,22 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  useEffect(() => {
+    const storageKey = customizationOptions?.storageKey;
+    if (!storageKey || customizationOptions?.layout !== void 0) return;
+    let active = true;
+    const revision = layoutRevisionRef.current;
+    void loadPivotFieldLayout(storageKey).then((storedLayout) => {
+      if (!active || !storedLayout || layoutRevisionRef.current !== revision) {
+        return;
+      }
+      setInternalLayout(storedLayout);
+      customizationOptions?.onLayoutChange?.(storedLayout);
+    });
+    return () => {
+      active = false;
+    };
+  }, [customizationOptions?.layout, customizationOptions?.storageKey]);
   useEffect(() => {
     if (customizationOptions?.panelWidth != null) {
       setFieldPanelWidth(customizationOptions.panelWidth);