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

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createContext, forwardRef, useMemo, useRef, useState, useImperativeHandle, useContext, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
-import { ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader } from '@canvas-components/react-components';
+import { ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
 import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
 export { EXPAND_COLUMN, ROW_SELECTION_COLUMN, SELECTION_COLUMN, getListTableStoredPageSize } from '@canvas-components/list-table';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -2679,6 +2679,58 @@ var toolButtonStyle = {
   lineHeight: 1,
   cursor: "pointer"
 };
+function ReactListTableExportNameDialog({
+  request
+}) {
+  const extension = request.fileName.match(/\.(xlsx|csv|txt|json)$/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
+      ]
+    }
+  );
+}
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -2780,12 +2832,14 @@ function ReactTableEditorOverlay(props) {
     if (!input) {
       return;
     }
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   return /* @__PURE__ */ jsx(ReactContentScaleProvider, { scale: contentZoom, children: /* @__PURE__ */ jsx("div", { ref: editorHostRef, children: renderEditorByType(request, style) }, request.editorKey) });
 }
 function renderEditorByType(request, style) {
   switch (request.config.valueType ?? "text") {
+    case "tree-select":
+      return /* @__PURE__ */ jsx(TreeSelectEditor, { request, style });
     case "cascader":
       return /* @__PURE__ */ jsx(CascaderEditor, { request, style });
     case "number":
@@ -2827,7 +2881,7 @@ function TextEditor(props) {
   const skipBlurCommitRef = useRef(false);
   useLayoutEffect(() => {
     const input = hostRef.current?.querySelector("input");
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   useEffect(() => {
     setValue(String(request.value ?? ""));
@@ -2867,7 +2921,7 @@ function NumberEditor(props) {
   const skipBlurCommitRef = useRef(false);
   useLayoutEffect(() => {
     const input = hostRef.current?.querySelector("input");
-    focusAndSelectEditorInput(input);
+    focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
   useEffect(() => {
     setValue(toNumberValue(request.value));
@@ -3076,14 +3130,56 @@ function DateEditor(props) {
     }
   ) });
 }
-function CascaderEditor({
+function TreeSelectEditor({
   request,
   style
 }) {
   const [value, setValue] = useState(
-    Array.isArray(request.value) ? request.value : []
+    request.value ?? null
   );
   const skipBlurCommitRef = useRef(false);
+  useEffect(() => {
+    setValue(request.value ?? null);
+  }, [request.value]);
+  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+    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] = useState(Array.isArray(request.value) ? request.value : []);
+  const skipBlurCommitRef = useRef(false);
   useEffect(() => {
     setValue(Array.isArray(request.value) ? request.value : []);
   }, [request.value]);
@@ -3097,6 +3193,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),
@@ -3450,13 +3548,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 {
   }
 }
@@ -3767,6 +3866,12 @@ function SettingOutlined() {
 function HolderOutlined() {
   return /* @__PURE__ */ 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 = useRef(null);
@@ -3891,7 +3996,7 @@ function SortableList(props) {
           })
         }
       ),
-      document.body
+      resolveFullscreenPortalContainer(rootRef.current)
     ) : null
   ] });
 }
@@ -4222,9 +4327,14 @@ function useReactListTableState(options) {
   const [searchRequest, setSearchRequest] = useState(null);
   const [imagePreviewRequest, setImagePreviewRequest] = useState(null);
   const [dangerConfirmRequest, setDangerConfirmRequest] = useState(null);
+  const [exportNameRequest, setExportNameRequest] = useState(null);
   const uiOptions = useMemo(
     () => ({
       ...options.ui,
+      onExportNameRequest: (request) => {
+        setExportNameRequest(request);
+        options.ui?.onExportNameRequest?.(request);
+      },
       onEditorRequest: (request) => {
         setEditorRequest(request);
         options.ui?.onEditorRequest?.(request);
@@ -4292,6 +4402,7 @@ function useReactListTableState(options) {
       setSearchRequest(null);
       setImagePreviewRequest(null);
       setDangerConfirmRequest(null);
+      setExportNameRequest(null);
     };
   }, []);
   useEffect(() => {
@@ -4313,6 +4424,7 @@ function useReactListTableState(options) {
     searchRequest,
     imagePreviewRequest,
     dangerConfirmRequest,
+    exportNameRequest,
     closeDangerConfirmRequest: () => {
       setDangerConfirmRequest(null);
       options.ui?.onDangerConfirmRequest?.(null);
@@ -4417,7 +4529,8 @@ function ReactListTableInner(props, ref) {
     rowDrag,
     debug,
     title,
-    toolbar
+    toolbar,
+    exportOptions
   } = props;
   const inheritedDebugEnabled = useReactListTableDebugEnabled();
   const resolvedDebug = useMemo(
@@ -4458,6 +4571,7 @@ function ReactListTableInner(props, ref) {
   );
   const options = useMemo(() => {
     const nextOptions = buildListTableOptions({
+      exportOptions,
       width,
       height,
       emptyText,
@@ -4519,6 +4633,7 @@ function ReactListTableInner(props, ref) {
       }
     };
   }, [
+    exportOptions,
     width,
     height,
     emptyText,
@@ -4574,10 +4689,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);
   useImperativeHandle(
     ref,
     () => ({
@@ -4735,23 +4852,27 @@ function ReactListTableInner(props, ref) {
     ),
     tooltipRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactTableTooltipView, { request: tooltipRequest }),
-      document.body
+      portalContainer
     ) : null,
     filterPanelRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactTableFilterPanelView, { request: filterPanelRequest }),
-      document.body
+      portalContainer
     ) : null,
     fixedPopupRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactTableFixedPopupView, { request: fixedPopupRequest }),
-      document.body
+      portalContainer
     ) : null,
     headerContextMenuRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactTableContextMenuView, { request: headerContextMenuRequest }),
-      document.body
+      portalContainer
     ) : null,
     searchRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactListTableSearchDialog, { request: searchRequest }),
-      document.body
+      portalContainer
+    ) : null,
+    exportNameRequest ? createPortal(
+      /* @__PURE__ */ jsx(ReactListTableExportNameDialog, { request: exportNameRequest }),
+      portalContainer
     ) : null,
     dangerConfirmRequest ? createPortal(
       /* @__PURE__ */ jsx(
@@ -4761,11 +4882,11 @@ function ReactListTableInner(props, ref) {
           onClose: closeDangerConfirmRequest
         }
       ),
-      document.body
+      portalContainer
     ) : null,
     editorRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactTableEditorOverlay, { request: editorRequest }),
-      editorRequest.hostElement ?? document.body
+      editorRequest.hostElement && portalContainer.contains(editorRequest.hostElement) ? editorRequest.hostElement : portalContainer
     ) : null,
     imagePreviewRequest ? createPortal(
       /* @__PURE__ */ jsx(
@@ -4777,7 +4898,7 @@ function ReactListTableInner(props, ref) {
           onClose: imagePreviewRequest.onClose
         }
       ),
-      document.body
+      portalContainer
     ) : null
   ] });
 }