@canvas-components/react-list-table 0.3.20 → 0.3.22

package/README.md

@@ -321,6 +321,8 @@ import {
 | `scrollTo`         | `(options) => void`                              | 滚动到指定行                    |
 | `getDebugSnapshot` | `() => ListTableDebugSnapshot \| null`           | 获取调试快照                    |
 
+导出文件名弹窗使用 `react-components` 的 `ReactModal`、`ReactInput`，默认开启，文件后缀不可编辑。通过表格 `exportOptions={{ fileName: "报表", promptFileName: false }}` 可配置默认名称并跳过弹窗；工具栏 `toolbar.exportOptions` 或实例 `exportXlsx` 的同名选项可覆盖默认配置。取消不会生成文件。XLSX 默认追加当前已显示的汇总行，传入 `includeSummary: false` 可关闭。
+
 ## 类型别名
 
 | 类型                                     | 说明                                     |

package/dist/index.cjs

@@ -2680,6 +2680,58 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function ReactListTableExportNameDialog({
+  request
+}) {
+  const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/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
+      ]
+    }
+  );
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -2781,12 +2833,14 @@ function ReactTableEditorOverlay(props) {
     if (!input) {
       return;
     }
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactContentScaleProvider, { scale: contentZoom, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: editorHostRef, children: renderEditorByType(request, style) }, request.editorKey) });
 }
 function renderEditorByType(request, style) {
   switch (request.config.valueType ?? "text") {
+    case "tree-select":
+      return /* @__PURE__ */ jsxRuntime.jsx(TreeSelectEditor, { request, style });
     case "cascader":
       return /* @__PURE__ */ jsxRuntime.jsx(CascaderEditor, { request, style });
     case "number":
@@ -2828,7 +2882,7 @@ function TextEditor(props) {
   const skipBlurCommitRef = react.useRef(false);
   react.useLayoutEffect(() => {
     const input = hostRef.current?.querySelector("input");
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   react.useEffect(() => {
     setValue(String(request.value ?? ""));
@@ -2868,7 +2922,7 @@ function NumberEditor(props) {
   const skipBlurCommitRef = react.useRef(false);
   react.useLayoutEffect(() => {
     const input = hostRef.current?.querySelector("input");
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   react.useEffect(() => {
     setValue(toNumberValue(request.value));
@@ -3077,14 +3131,56 @@ function DateEditor(props) {
     }
   ) });
 }
-function CascaderEditor({
+function TreeSelectEditor({
   request,
   style
 }) {
   const [value, setValue] = react.useState(
-    Array.isArray(request.value) ? request.value : []
+    request.value ?? null
   );
   const skipBlurCommitRef = react.useRef(false);
+  react.useEffect(() => {
+    setValue(request.value ?? null);
+  }, [request.value]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ReactTreeSelect,
+    {
+      autoFocus: true,
+      value,
+      treeData: request.config.treeData,
+      multiple: request.config.multiple,
+      showSearch: request.config.showSearch,
+      treeDefaultExpandAll: request.config.treeDefaultExpandAll,
+      treeDefaultExpandedKeys: request.config.treeDefaultExpandedKeys,
+      allowClear: request.config.allowClear,
+      placeholder: request.config.placeholder,
+      style: getEditorInputStyle(request),
+      onChange: (next, _nodes, info) => {
+        setValue(next);
+        request.onChange(next);
+        if (info.complete && info.trigger !== "clear") {
+          skipBlurCommitRef.current = true;
+          request.onCommit();
+        }
+      },
+      onBlur: (event) => handleEditorBlur(event, skipBlurCommitRef, request),
+      onKeyDown: (event) => {
+        if (event.key === "Tab")
+          handleEditorNavigationKey(event, request, skipBlurCommitRef);
+        if (event.key === "Escape") {
+          skipBlurCommitRef.current = true;
+          handleEditorEscapeKey(event, request);
+        }
+      }
+    }
+  ) });
+}
+function CascaderEditor({
+  request,
+  style
+}) {
+  const [value, setValue] = react.useState(Array.isArray(request.value) ? request.value : []);
+  const skipBlurCommitRef = react.useRef(false);
   react.useEffect(() => {
     setValue(Array.isArray(request.value) ? request.value : []);
   }, [request.value]);
@@ -3098,6 +3194,8 @@ function CascaderEditor({
       showSearch: request.config.showSearch,
       allowClear: request.config.allowClear,
       changeOnSelect: request.config.changeOnSelect,
+      multiple: request.config.multiple,
+      showCheckedStrategy: request.config.showCheckedStrategy,
       expandTrigger: request.config.expandTrigger,
       displayRender: request.config.displayRender,
       style: getEditorInputStyle(request),
@@ -3451,13 +3549,14 @@ function handleRangeInputTab(event) {
   focusAndSelectEditorInput(nextInput);
   return true;
 }
-function focusAndSelectEditorInput(input) {
+function focusAndSelectEditorInput(input, selectOnFocus = true) {
   if (!input) {
     return;
   }
   input.focus();
   try {
-    input.select();
+    if (selectOnFocus) input.select();
+    else input.setSelectionRange(input.value.length, input.value.length);
   } catch {
   }
 }
@@ -3768,6 +3867,12 @@ function SettingOutlined() {
 function HolderOutlined() {
   return /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { path: "M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z" });
 }
+
+// src/components/fullscreen-portal.ts
+function resolveFullscreenPortalContainer(host) {
+  const fullscreenElement = document.fullscreenElement;
+  return fullscreenElement instanceof HTMLElement && host && fullscreenElement.contains(host) ? fullscreenElement : document.body;
+}
 function SortableList(props) {
   const { items, onOrderChange } = props;
   const rootRef = react.useRef(null);
@@ -3892,7 +3997,7 @@ function SortableList(props) {
           })
         }
       ),
-      document.body
+      resolveFullscreenPortalContainer(rootRef.current)
     ) : null
   ] });
 }
@@ -4223,9 +4328,14 @@ function useReactListTableState(options) {
   const [searchRequest, setSearchRequest] = react.useState(null);
   const [imagePreviewRequest, setImagePreviewRequest] = react.useState(null);
   const [dangerConfirmRequest, setDangerConfirmRequest] = react.useState(null);
+  const [exportNameRequest, setExportNameRequest] = react.useState(null);
   const uiOptions = react.useMemo(
     () => ({
       ...options.ui,
+      onExportNameRequest: (request) => {
+        setExportNameRequest(request);
+        options.ui?.onExportNameRequest?.(request);
+      },
       onEditorRequest: (request) => {
         setEditorRequest(request);
         options.ui?.onEditorRequest?.(request);
@@ -4293,6 +4403,7 @@ function useReactListTableState(options) {
       setSearchRequest(null);
       setImagePreviewRequest(null);
       setDangerConfirmRequest(null);
+      setExportNameRequest(null);
     };
   }, []);
   react.useEffect(() => {
@@ -4314,6 +4425,7 @@ function useReactListTableState(options) {
     searchRequest,
     imagePreviewRequest,
     dangerConfirmRequest,
+    exportNameRequest,
     closeDangerConfirmRequest: () => {
       setDangerConfirmRequest(null);
       options.ui?.onDangerConfirmRequest?.(null);
@@ -4418,7 +4530,8 @@ function ReactListTableInner(props, ref) {
     rowDrag,
     debug,
     title,
-    toolbar
+    toolbar,
+    exportOptions
   } = props;
   const inheritedDebugEnabled = useReactListTableDebugEnabled();
   const resolvedDebug = react.useMemo(
@@ -4459,6 +4572,7 @@ function ReactListTableInner(props, ref) {
   );
   const options = react.useMemo(() => {
     const nextOptions = buildListTableOptions({
+      exportOptions,
       width,
       height,
       emptyText,
@@ -4520,6 +4634,7 @@ function ReactListTableInner(props, ref) {
       }
     };
   }, [
+    exportOptions,
     width,
     height,
     emptyText,
@@ -4575,10 +4690,12 @@ function ReactListTableInner(props, ref) {
     searchRequest,
     imagePreviewRequest,
     dangerConfirmRequest,
+    exportNameRequest,
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
   const paginationLayout = resolveReactListTablePaginationLayout(resolvedRowHeight);
+  const portalContainer = resolveFullscreenPortalContainer(shellRef.current);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -4736,23 +4853,27 @@ function ReactListTableInner(props, ref) {
     ),
     tooltipRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactTableTooltipView, { request: tooltipRequest }),
-      document.body
+      portalContainer
     ) : null,
     filterPanelRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactTableFilterPanelView, { request: filterPanelRequest }),
-      document.body
+      portalContainer
     ) : null,
     fixedPopupRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactTableFixedPopupView, { request: fixedPopupRequest }),
-      document.body
+      portalContainer
     ) : null,
     headerContextMenuRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactTableContextMenuView, { request: headerContextMenuRequest }),
-      document.body
+      portalContainer
     ) : null,
     searchRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactListTableSearchDialog, { request: searchRequest }),
-      document.body
+      portalContainer
+    ) : null,
+    exportNameRequest ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(ReactListTableExportNameDialog, { request: exportNameRequest }),
+      portalContainer
     ) : null,
     dangerConfirmRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4762,11 +4883,11 @@ function ReactListTableInner(props, ref) {
           onClose: closeDangerConfirmRequest
         }
       ),
-      document.body
+      portalContainer
     ) : null,
     editorRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(ReactTableEditorOverlay, { request: editorRequest }),
-      editorRequest.hostElement ?? document.body
+      editorRequest.hostElement && portalContainer.contains(editorRequest.hostElement) ? editorRequest.hostElement : portalContainer
     ) : null,
     imagePreviewRequest ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4778,7 +4899,7 @@ function ReactListTableInner(props, ref) {
           onClose: imagePreviewRequest.onClose
         }
       ),
-      document.body
+      portalContainer
     ) : null
   ] });
 }