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

package/dist/index.cjs

@@ -692,6 +692,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;
@@ -1712,6 +1764,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;
@@ -1790,6 +1843,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) {
@@ -2065,6 +2121,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 })
   ] });
 }