@canvas-components/react-pivot-table 0.2.2 → 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';
@@ -368,7 +368,7 @@ function PivotFieldPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "react-pivot-field-panel__field-list", children: [
+              /* @__PURE__ */ jsxs("div", { className: "react-pivot-field-panel__field-list canvas-react-scrollbar", children: [
                 visibleFields.map((field) => {
                   const fieldKey = resolvePivotDimensionKey(field);
                   const area = findPivotFieldArea(props.layout, fieldKey);
@@ -495,7 +495,7 @@ function FieldArea(props) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "react-pivot-field-panel__area",
+        className: "react-pivot-field-panel__area canvas-react-scrollbar",
         "data-dragging": props.dragging || void 0,
         onDragOver: (event) => event.preventDefault(),
         onDragEnter: props.onDragEnter,
@@ -1175,19 +1175,26 @@ function SettingsIcon() {
 // src/features/chart/pivot-chart-panel.css
 styleInject('.react-pivot-chart-panel {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0;\n  overflow: auto;\n  background: #fff;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card {\n  display: flex;\n  min-width: 0;\n  min-height: 240px;\n  flex: 0 0 260px;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 0;\n  background: #fff;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card:only-child {\n  min-height: 240px;\n  flex: 1 1 auto;\n}\n.react-pivot-chart-card__header {\n  display: flex;\n  height: 42px;\n  flex: 0 0 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 10px 0 14px;\n  border-bottom: 1px solid #edf0f2;\n  color: #1f2329;\n  font-size: 13px;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card__remove {\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: #646a73;\n  cursor: pointer;\n  font: 18px/24px "Segoe UI", sans-serif;\n}\n.react-pivot-chart-card__remove:hover {\n  background: #f2f3f5;\n  color: #d14343;\n}\n.react-pivot-chart-card__canvas {\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 auto;\n}\n.react-pivot-chart-card__empty {\n  display: grid;\n  min-height: 0;\n  flex: 1 1 auto;\n  place-items: center;\n  color: #8f959e;\n  font-size: 12px;\n}\n');
 function PivotChartPanel(props) {
-  return /* @__PURE__ */ jsx("section", { className: "react-pivot-chart-panel", "aria-label": "\u900F\u89C6\u56FE\u8868", children: props.charts.map((chart, index) => /* @__PURE__ */ jsx(
-    PivotChartCard,
+  return /* @__PURE__ */ jsx(
+    "section",
     {
-      chart,
-      index,
-      model: props.model,
-      rows: props.rows,
-      columns: props.columns,
-      indicators: props.indicators,
-      onRemove: props.onRemove
-    },
-    chart.id
-  )) });
+      className: "react-pivot-chart-panel canvas-react-scrollbar",
+      "aria-label": "\u900F\u89C6\u56FE\u8868",
+      children: props.charts.map((chart, index) => /* @__PURE__ */ jsx(
+        PivotChartCard,
+        {
+          chart,
+          index,
+          model: props.model,
+          rows: props.rows,
+          columns: props.columns,
+          indicators: props.indicators,
+          onRemove: props.onRemove
+        },
+        chart.id
+      ))
+    }
+  );
 }
 function PivotChartCard(props) {
   const option = useMemo(
@@ -1259,6 +1266,7 @@ function ReactPivotTableInner(props, ref) {
     null
   );
   const chartIdRef = useRef(0);
+  const layoutRevisionRef = useRef(0);
   const [internalLayout, setInternalLayout] = useState(
     () => customizationOptions?.defaultLayout ?? createEmptyPivotFieldLayout()
   );
@@ -1364,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) => {
@@ -1412,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);