@canvas-components/react-pivot-table 0.2.16 → 0.2.18

package/dist/index.cjs

@@ -32,11 +32,12 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/features/context-menu/pivot-context-menu.css
-styleInject(".react-pivot-table-menu-action {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+styleInject(".react-pivot-table-menu-action {\n  font-size: inherit;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
 var CONTEXT_MENU_SURFACE_STYLE = {
   padding: 8,
   background: "#ffffff",
-  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)"
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
+  fontSize: 14
 };
 function PivotContextMenu(props) {
   const { request } = props;
@@ -146,7 +147,29 @@ function HeaderMenu(props) {
         ]
       }
     ) : null,
-    request.onOpenFilter ? /* @__PURE__ */ jsxRuntime.jsx(MenuAction, { label: "\u6253\u5F00\u7B5B\u9009\u9762\u677F", onClick: request.onOpenFilter }) : null,
+    request.onAutoFitCurrentColumn || request.onAutoFitAllColumns ? /* @__PURE__ */ jsxRuntime.jsx(
+      MenuSubmenu,
+      {
+        label: "\u81EA\u52A8\u8C03\u6574\u5217\u5BBD",
+        items: [
+          {
+            key: "auto-fit-current",
+            label: "\u5F53\u524D\u5217",
+            onClick: request.onAutoFitCurrentColumn
+          },
+          {
+            key: "auto-fit-all",
+            label: "\u5168\u90E8\u5217",
+            onClick: request.onAutoFitAllColumns
+          },
+          {
+            key: "auto-fit-fill-container",
+            label: "\u81EA\u52A8\u94FA\u6EE1\u5BB9\u5668",
+            onClick: request.onAutoFitFillContainer
+          }
+        ]
+      }
+    ) : null,
     hasExpand ? /* @__PURE__ */ jsxRuntime.jsx(
       MenuSubmenu,
       {
@@ -174,14 +197,35 @@ function HeaderMenu(props) {
 }
 function SummaryMenu(props) {
   const { request } = props;
+  const [title, setTitle] = react.useState(request.summaryTitle ?? "");
   const [precision, setPrecision] = react.useState(
     request.summaryPrecision ?? null
   );
+  const [roundingMode, setRoundingMode] = react.useState(
+    request.summaryRoundingMode ?? "round"
+  );
+  const [preserveTrailingZeros, setPreserveTrailingZeros] = react.useState(
+    request.summaryPreserveTrailingZeros ?? false
+  );
+  react.useEffect(() => {
+    setTitle(request.summaryTitle ?? "");
+    setPrecision(request.summaryPrecision ?? null);
+    setRoundingMode(request.summaryRoundingMode ?? "round");
+    setPreserveTrailingZeros(request.summaryPreserveTrailingZeros ?? false);
+  }, [
+    request.indicatorKey,
+    request.summaryTitle,
+    request.summaryPrecision,
+    request.summaryRoundingMode,
+    request.summaryPreserveTrailingZeros
+  ]);
   const aggregators = [
     ["sum", "\u6C42\u548C"],
     ["avg", "\u5E73\u5747\u503C"],
     ["count", "\u8BA1\u6570"],
     ["distinctCount", "\u53BB\u91CD\u8BA1\u6570"],
+    ["rowCount", "\u884C\u6570"],
+    ["mergedRowCount", "\u5408\u5E76\u884C\u6570"],
     ["min", "\u6700\u5C0F\u503C"],
     ["max", "\u6700\u5927\u503C"]
   ];
@@ -190,15 +234,62 @@ function SummaryMenu(props) {
     MenuSubmenu,
     {
       label: "\u6C47\u603B\u65B9\u5F0F",
-      items: aggregators.map(([value, label]) => ({
-        key: `summary-${value}`,
-        label,
-        selected: request.summaryAggregator === value,
-        onClick: () => {
-          request.onChangeSummaryAggregator?.(value);
-          request.onClose();
+      minWidth: 268,
+      header: request.onChangeSummaryTitle ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "56px 1fr",
+            gap: 8,
+            alignItems: "center",
+            padding: "2px 10px 10px",
+            marginBottom: 4,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u6807\u9898\uFF1A" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInput,
+              {
+                value: title,
+                placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
+                onChange: (event) => {
+                  setTitle(event.target.value);
+                  request.onChangeSummaryTitle?.(event.target.value);
+                }
+              }
+            )
+          ]
         }
-      })),
+      ) : void 0,
+      items: [
+        ...aggregators.map(([value, label]) => ({
+          key: `summary-${value}`,
+          label,
+          selected: !request.summaryDisabled && request.summaryAggregator === value,
+          onClick: () => {
+            request.onChangeSummaryAggregator?.(value);
+            request.onClose();
+          }
+        })),
+        {
+          key: "summary-prefix",
+          label: "\u5C55\u793A\u6C47\u603B\u65B9\u5F0F\u524D\u7F00",
+          separatorBefore: true,
+          selected: request.summaryShowTypePrefix !== false,
+          disabled: request.summaryDisabled,
+          onClick: () => request.onChangeSummaryShowTypePrefix?.(
+            request.summaryShowTypePrefix === false
+          )
+        },
+        {
+          key: "summary-clear",
+          label: "\u53D6\u6D88\u6C47\u603B",
+          separatorBefore: true,
+          onClick: request.onClearSummary
+        }
+      ],
       footer: request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -212,7 +303,7 @@ function SummaryMenu(props) {
             borderTop: "1px solid #e5e7eb"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.ReactInputNumber,
               {
@@ -221,10 +312,42 @@ function SummaryMenu(props) {
                 max: 20,
                 step: 1,
                 precision: 0,
-                placeholder: "\u81EA\u52A8",
+                placeholder: "\u9ED8\u8BA4",
+                onChange: setPrecision,
+                onCommit: (value) => request.onChangeSummaryPrecision?.(value ?? void 0)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactSelect,
+              {
+                value: roundingMode,
+                options: [
+                  { label: "\u56DB\u820D\u4E94\u5165", value: "round" },
+                  { label: "\u5411\u4E0B\u53D6\u6574", value: "floor" },
+                  { label: "\u5411\u4E0A\u53D6\u6574", value: "ceil" },
+                  { label: "\u820D\u53BB\u4E0D\u5904\u7406", value: "truncate" }
+                ],
+                onChange: (value) => {
+                  const mode = value;
+                  setRoundingMode(mode);
+                  request.onChangeSummaryRoundingMode?.(mode);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactSelect,
+              {
+                value: preserveTrailingZeros ? "true" : "false",
+                options: [
+                  { label: "\u4E0D\u4FDD\u7559", value: "false" },
+                  { label: "\u4FDD\u7559", value: "true" }
+                ],
                 onChange: (value) => {
-                  setPrecision(value);
-                  request.onChangeSummaryPrecision?.(value ?? void 0);
+                  const enabled = value === "true";
+                  setPreserveTrailingZeros(enabled);
+                  request.onChangeSummaryPreserveTrailingZeros?.(enabled);
                 }
               }
             )
@@ -421,7 +544,7 @@ function MenuAction(props) {
   );
 }
 function MenuSubmenu(props) {
-  const { label, items, footer, children, minWidth = 220 } = props;
+  const { label, items, footer, header, children, minWidth = 220 } = props;
   const menuItems = items.filter((item) => item.onClick || item.disabled);
   const reserveSelectionIcon = menuItems.some(
     (item) => typeof item.selected === "boolean"
@@ -429,7 +552,7 @@ function MenuSubmenu(props) {
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const closeTimerRef = react.useRef(null);
-  if (!menuItems.length && !footer && !children) return null;
+  if (!menuItems.length && !footer && !header && !children) return null;
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
@@ -496,6 +619,7 @@ function MenuSubmenu(props) {
             onOpenChange: setOpen,
             surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: minWidth },
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, children: [
+              header,
               menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
                 item.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}) : null,
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -692,6 +816,58 @@ function DataFormatMenu(props) {
     }
   );
 }
+function PivotExportNameDialog({
+  request
+}) {
+  const extension = request.fileName.match(/\.(xlsx|csv)$/i)?.[0] ?? "";
+  const [fileName, setFileName] = react.useState(
+    extension ? request.fileName.slice(0, -extension.length) : request.fileName
+  );
+  const [invalid, setInvalid] = react.useState(false);
+  const confirm = () => {
+    if (!fileName.trim()) {
+      setInvalid(true);
+      return;
+    }
+    request.onConfirm(`${fileName.trim()}${extension}`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.ReactModal,
+    {
+      open: true,
+      title: "\u5BFC\u51FA\u6587\u4EF6",
+      width: 420,
+      fullscreenable: false,
+      onCancel: request.onCancel,
+      onOk: confirm,
+      okText: "\u5BFC\u51FA",
+      cancelText: "\u53D6\u6D88",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+          "\u6587\u4EF6\u540D\u79F0",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInput,
+              {
+                autoFocus: true,
+                value: fileName,
+                placeholder: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0",
+                onFocus: (event) => event.target.select(),
+                onChange: (event) => {
+                  setFileName(event.target.value);
+                  setInvalid(false);
+                },
+                onPressEnter: confirm
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
+          ] })
+        ] }),
+        invalid ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0" }) : null
+      ]
+    }
+  );
+}
 function PivotTooltip(props) {
   const { request } = props;
   if (!request) return null;
@@ -1224,7 +1400,9 @@ var aggregatorOptions = [
   { label: "\u5E73\u5747\u503C", value: "avg" },
   { label: "\u6700\u5927\u503C", value: "max" },
   { label: "\u6700\u5C0F\u503C", value: "min" },
-  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" }
+  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" },
+  { label: "\u884C\u6570", value: "rowCount" },
+  { label: "\u5408\u5E76\u884C\u6570", value: "mergedRowCount" }
 ];
 var popupStyle = {
   padding: 0,
@@ -1712,6 +1890,7 @@ function ReactPivotTableInner(props, ref) {
   const [densityOverride, setDensityOverride] = react.useState(null);
   const [filterRequest, setFilterRequest] = react.useState(null);
   const [contextMenuRequest, setContextMenuRequest] = react.useState(null);
+  const [exportNameRequest, setExportNameRequest] = react.useState(null);
   const [tooltipRequest, setTooltipRequest] = react.useState(null);
   const panelOpen = customizationOptions?.open ?? internalPanelOpen;
   const fieldLayout = customizationOptions?.layout ?? internalLayout;
@@ -1752,6 +1931,7 @@ function ReactPivotTableInner(props, ref) {
         title: override.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...override,
           title: override.title ?? field.indicator?.title,
           aggregator: override.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in override ? override.precision : field.indicator?.precision,
@@ -1771,6 +1951,7 @@ function ReactPivotTableInner(props, ref) {
       if (!override) return indicator;
       return {
         ...indicator,
+        ...override,
         title: override.title ?? indicator.title,
         aggregator: override.aggregator ?? indicator.aggregator,
         precision: "precision" in override ? override.precision : indicator.precision,
@@ -1790,6 +1971,9 @@ function ReactPivotTableInner(props, ref) {
     rowHeight: densityOverride == null ? tableOptions.rowHeight : resolveDensityRowHeight(densityOverride),
     indicators: customizedOptions?.indicators ?? overriddenIndicators,
     ui: {
+      onExportNameRequest: (request) => {
+        setExportNameRequest(request);
+      },
       onFilterPanelRequest: setFilterRequest,
       onContextMenuRequest: (request) => {
         if (request) {
@@ -1804,8 +1988,35 @@ function ReactPivotTableInner(props, ref) {
             onChangeDataFormat: fieldKey == null ? void 0 : (dataFormat) => updateField(fieldKey, { dataFormat })
           };
           if (request.target === "summary" && fieldKey != null) {
-            enhancedRequest.onChangeSummaryAggregator = (aggregator) => updateField(fieldKey, { aggregator });
-            enhancedRequest.onChangeSummaryPrecision = (precision) => updateField(fieldKey, { precision });
+            const changeSummary = (patch, menuPatch) => {
+              updateField(fieldKey, patch);
+              setContextMenuRequest(
+                (current) => current?.target === "summary" && current.indicatorKey === fieldKey ? { ...current, ...menuPatch } : current
+              );
+            };
+            enhancedRequest.onChangeSummaryAggregator = (aggregator) => changeSummary(
+              {
+                aggregator,
+                summaryAggregator: aggregator,
+                summaryDisabled: false
+              },
+              { summaryAggregator: aggregator, summaryDisabled: false }
+            );
+            enhancedRequest.onChangeSummaryPrecision = (precision) => changeSummary({ precision }, { summaryPrecision: precision });
+            enhancedRequest.onChangeSummaryTitle = (summaryTitle) => changeSummary({ summaryTitle }, { summaryTitle });
+            enhancedRequest.onChangeSummaryShowTypePrefix = (summaryShowTypePrefix) => changeSummary(
+              { summaryShowTypePrefix },
+              { summaryShowTypePrefix }
+            );
+            enhancedRequest.onChangeSummaryRoundingMode = (summaryRoundingMode) => changeSummary({ summaryRoundingMode }, { summaryRoundingMode });
+            enhancedRequest.onChangeSummaryPreserveTrailingZeros = (summaryPreserveTrailingZeros) => changeSummary(
+              { summaryPreserveTrailingZeros },
+              { summaryPreserveTrailingZeros }
+            );
+            enhancedRequest.onClearSummary = () => changeSummary(
+              { summaryDisabled: true },
+              { summaryDisabled: true }
+            );
           }
           setContextMenuRequest(enhancedRequest);
           return;
@@ -1825,10 +2036,10 @@ function ReactPivotTableInner(props, ref) {
   };
   const sharedFilterRequest = react.useMemo(() => {
     if (!filterRequest) return null;
-    const { axis, dimensionKey } = filterRequest;
+    const { axis, dimensionKey, columnPathKey } = filterRequest;
     return toSharedFilterRequest(filterRequest, (value) => {
       setFilterRequest(
-        (current) => current?.axis === axis && current.dimensionKey === dimensionKey ? { ...current, value } : current
+        (current) => current?.axis === axis && current.dimensionKey === dimensionKey && current.columnPathKey === columnPathKey ? { ...current, value } : current
       );
     });
   }, [filterRequest]);
@@ -1879,6 +2090,7 @@ function ReactPivotTableInner(props, ref) {
         title: patch.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...patch,
           title: patch.title ?? field.indicator?.title,
           aggregator: patch.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in patch ? patch.precision : field.indicator?.precision,
@@ -1930,6 +2142,7 @@ function ReactPivotTableInner(props, ref) {
   react.useImperativeHandle(
     ref,
     () => ({
+      autoFitColumnWidths: (target, fillContainer) => tableRef.current?.autoFitColumnWidths(target, fillContainer) ?? false,
       getPivotModel: () => tableRef.current?.getPivotModel() ?? null,
       getVisibleRowNodes: () => tableRef.current?.getVisibleRowNodes() ?? [],
       getVisibleColumnNodes: () => tableRef.current?.getVisibleColumnNodes() ?? [],
@@ -1951,6 +2164,15 @@ function ReactPivotTableInner(props, ref) {
       expandAll: (axis) => tableRef.current?.expandAll(axis) ?? 0,
       collapseAll: (axis) => tableRef.current?.collapseAll(axis) ?? 0,
       setDimensionFilter: (axis, dimensionKey, filter) => tableRef.current?.setDimensionFilter(axis, dimensionKey, filter) ?? null,
+      setIndicatorFilter: (indicatorKey, columnPathKey, filter) => tableRef.current?.setIndicatorFilter(
+        indicatorKey,
+        columnPathKey,
+        filter
+      ) ?? null,
+      getIndicatorFilterOptions: (indicatorKey, columnPathKey) => tableRef.current?.getIndicatorFilterOptions(
+        indicatorKey,
+        columnPathKey
+      ) ?? [],
       getDimensionFilterOptions: (axis, dimensionKey) => tableRef.current?.getDimensionFilterOptions(axis, dimensionKey) ?? [],
       resetFilters: () => tableRef.current?.resetFilters() ?? null,
       setDimensionSort: (axis, dimensionKey, direction) => tableRef.current?.setDimensionSort(axis, dimensionKey, direction) ?? [],
@@ -2065,6 +2287,7 @@ function ReactPivotTableInner(props, ref) {
     ),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactFilterPanel, { request: sharedFilterRequest }),
     /* @__PURE__ */ jsxRuntime.jsx(PivotContextMenu, { request: contextMenuRequest }),
+    exportNameRequest ? /* @__PURE__ */ jsxRuntime.jsx(PivotExportNameDialog, { request: exportNameRequest }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }