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

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, Fragment as Fragment$1 } from 'react';
 import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotFieldLayout, DEFAULT_PIVOT_TABLE_DEBUG_OPTIONS, 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 { ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactModal, ReactInput, ReactSelect, ReactInputNumber } from '@canvas-components/react-components';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { CanvasChart } from '@canvas-components/chart';
@@ -690,6 +690,58 @@ function DataFormatMenu(props) {
     }
   );
 }
+function PivotExportNameDialog({
+  request
+}) {
+  const extension = request.fileName.match(/\.(xlsx|csv)$/i)?.[0] ?? "";
+  const [fileName, setFileName] = useState(
+    extension ? request.fileName.slice(0, -extension.length) : request.fileName
+  );
+  const [invalid, setInvalid] = useState(false);
+  const confirm = () => {
+    if (!fileName.trim()) {
+      setInvalid(true);
+      return;
+    }
+    request.onConfirm(`${fileName.trim()}${extension}`);
+  };
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+          "\u6587\u4EF6\u540D\u79F0",
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              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__ */ jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
+          ] })
+        ] }),
+        invalid ? /* @__PURE__ */ 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;
@@ -1710,6 +1762,7 @@ function ReactPivotTableInner(props, ref) {
   const [densityOverride, setDensityOverride] = useState(null);
   const [filterRequest, setFilterRequest] = useState(null);
   const [contextMenuRequest, setContextMenuRequest] = useState(null);
+  const [exportNameRequest, setExportNameRequest] = useState(null);
   const [tooltipRequest, setTooltipRequest] = useState(null);
   const panelOpen = customizationOptions?.open ?? internalPanelOpen;
   const fieldLayout = customizationOptions?.layout ?? internalLayout;
@@ -1788,6 +1841,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) {
@@ -2063,6 +2119,7 @@ function ReactPivotTableInner(props, ref) {
     ),
     /* @__PURE__ */ jsx(ReactFilterPanel, { request: sharedFilterRequest }),
     /* @__PURE__ */ jsx(PivotContextMenu, { request: contextMenuRequest }),
+    exportNameRequest ? /* @__PURE__ */ jsx(PivotExportNameDialog, { request: exportNameRequest }) : null,
     /* @__PURE__ */ jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }