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

package/dist/index.cjs

@@ -370,7 +370,7 @@ function PivotFieldPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-pivot-field-panel__field-list", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-pivot-field-panel__field-list canvas-react-scrollbar", children: [
                 visibleFields.map((field) => {
                   const fieldKey = pivotTable.resolvePivotDimensionKey(field);
                   const area = pivotTable.findPivotFieldArea(props.layout, fieldKey);
@@ -497,7 +497,7 @@ function FieldArea(props) {
     /* @__PURE__ */ jsxRuntime.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,
@@ -1177,19 +1177,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__ */ jsxRuntime.jsx("section", { className: "react-pivot-chart-panel", "aria-label": "\u900F\u89C6\u56FE\u8868", children: props.charts.map((chart, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    PivotChartCard,
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useMemo(
@@ -1261,6 +1268,7 @@ function ReactPivotTableInner(props, ref) {
     null
   );
   const chartIdRef = react.useRef(0);
+  const layoutRevisionRef = react.useRef(0);
   const [internalLayout, setInternalLayout] = react.useState(
     () => customizationOptions?.defaultLayout ?? pivotTable.createEmptyPivotFieldLayout()
   );
@@ -1366,7 +1374,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 pivotTable.savePivotFieldLayout(customizationOptions.storageKey, next);
+      }
+    }
     customizationOptions?.onLayoutChange?.(next);
   };
   const moveField = (fieldKey, area, index, sourceArea) => {
@@ -1414,6 +1428,22 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  react.useEffect(() => {
+    const storageKey = customizationOptions?.storageKey;
+    if (!storageKey || customizationOptions?.layout !== void 0) return;
+    let active = true;
+    const revision = layoutRevisionRef.current;
+    void pivotTable.loadPivotFieldLayout(storageKey).then((storedLayout) => {
+      if (!active || !storedLayout || layoutRevisionRef.current !== revision) {
+        return;
+      }
+      setInternalLayout(storedLayout);
+      customizationOptions?.onLayoutChange?.(storedLayout);
+    });
+    return () => {
+      active = false;
+    };
+  }, [customizationOptions?.layout, customizationOptions?.storageKey]);
   react.useEffect(() => {
     if (customizationOptions?.panelWidth != null) {
       setFieldPanelWidth(customizationOptions.panelWidth);