@zat-design/sisyphus-react 4.6.5-beta.1 → 4.6.5-beta.2

package/es/ProForm/components/combination/FormList/components/ActionButton.js

@@ -10,6 +10,7 @@ import omit from "lodash/omit";
 import classNames from "classnames";
 import { useMemo } from "react";
 import {
+  CloseOutlined,
   CopyOutlined,
   PlusSquareOutlined,
   ArrowUpOutlined,
@@ -37,7 +38,7 @@ const getDefaultActions = (mode) => {
         remove(index);
       },
       label: locale.ProForm.formListActions[1],
-      icon: mode === "less" || mode === "tabs" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
+      icon: mode === "tabs" ? /* @__PURE__ */ jsx(CloseOutlined, {}) : mode === "less" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
     },
     copy: {
       onClick: (record, { namePath, index, operation }) => {
@@ -196,6 +197,8 @@ const ActionButton = (props) => {
           title: title ?? `${locale.ProForm.formListConfirmMessage}`,
           onCancel: (e) => e.stopPropagation(),
           onConfirm: (e) => {
+            if (mode === "tabs")
+              e == null ? void 0 : e.stopPropagation();
             if (type === "add") {
               handleAddClick();
             } else {
@@ -209,6 +212,7 @@ const ActionButton = (props) => {
               ...defaultRest,
               ...omit(rest, filterKeys),
               className: "pro-form-list-delete-icon",
+              "data-form-list-action": mode === "tabs" ? type : void 0,
               type: "text",
               onClick: (e) => e.stopPropagation(),
               children: label || defaultLabel
@@ -227,6 +231,7 @@ const ActionButton = (props) => {
           }),
           ...defaultRest,
           ...omit(rest, filterKeys),
+          "data-form-list-action": mode === "tabs" ? type : void 0,
           type: "text",
           onClick: (e) => {
             e.stopPropagation();

package/es/ProForm/components/combination/FormList/components/TabsFields.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Badge, Row, Tabs } from "antd";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Badge, Row, Tabs, theme, Tooltip } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
-import { DndContext } from "@dnd-kit/core";
-import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import { DndContext, DragOverlay, useDraggable, useDroppable } from "@dnd-kit/core";
 import isFunction from "lodash/isFunction";
 import dragSvg from "../../../../../assets/drag.svg";
 import ProIcon from "../../../../../ProIcon";
@@ -21,6 +20,7 @@ import {
 } from "../toolbarActions";
 import { subscribeFormListTabsValidation } from "../tabsValidation";
 const MemoRenderFields = React.memo(RenderFields, memoWith);
+const MAX_TAB_TITLE_LENGTH = 10;
 const getTabErrorCounts = (errorFields, fields, namePath) => {
   const uniqueErrors = /* @__PURE__ */ new Map();
   errorFields.forEach((errorField) => {
@@ -48,27 +48,40 @@ const SortableTabLabel = ({
   draggable,
   fieldKey
 }) => {
+  const instanceId = useId();
+  const id = `${fieldKey}-${instanceId}`;
   const {
     attributes,
     listeners,
     setActivatorNodeRef,
-    setNodeRef,
-    transform,
-    transition,
+    setNodeRef: setDragNodeRef,
     isDragging
-  } = useSortable({
-    id: fieldKey,
+  } = useDraggable({
+    id,
+    data: { fieldKey },
     disabled: disabled || !draggable
   });
+  const { setNodeRef: setDropNodeRef, isOver } = useDroppable({
+    id,
+    data: { fieldKey },
+    disabled: disabled || !draggable
+  });
+  const setNodeRef = useCallback(
+    (node) => {
+      setDragNodeRef(node);
+      setDropNodeRef(node);
+    },
+    [setDragNodeRef, setDropNodeRef]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setNodeRef,
       className: "pro-form-list-tabs-label",
+      "data-drag-over": isOver || void 0,
+      "data-form-list-field-key": fieldKey,
       style: {
-        opacity: isDragging ? 0.4 : void 0,
-        transform: CSS.Translate.toString(transform),
-        transition
+        opacity: isDragging ? 0.4 : void 0
       },
       children: [
         !disabled && draggable && /* @__PURE__ */ jsx(
@@ -78,7 +91,7 @@ const SortableTabLabel = ({
             ...listeners,
             ref: setActivatorNodeRef,
             className: "pro-form-list-tabs-drag-handle",
-            children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16, color: "#949599" })
+            children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16 })
           }
         ),
         children
@@ -87,6 +100,20 @@ const SortableTabLabel = ({
   );
 };
 const TabsFields = (props) => {
+  var _a;
+  const { token } = theme.useToken();
+  const tabsStyle = {
+    "--pro-form-list-tabs-primary": token.colorPrimary,
+    "--pro-form-list-tabs-primary-hover": token.colorPrimaryHover,
+    "--pro-form-list-tabs-primary-bg": token.colorPrimaryBg,
+    "--pro-form-list-tabs-text": token.colorText,
+    "--pro-form-list-tabs-muted": token.colorTextDescription,
+    "--pro-form-list-tabs-close": token.colorTextQuaternary,
+    "--pro-form-list-tabs-border": token.colorBorder,
+    "--pro-form-list-tabs-bg": token.colorBgContainer,
+    "--pro-form-list-tabs-error": token.colorError,
+    "--pro-form-list-tabs-solid-text": token.colorTextLightSolid
+  };
   const {
     actionProps,
     diffConfig,
@@ -108,6 +135,7 @@ const TabsFields = (props) => {
   const fieldKeys = fields.map((field) => String(field.key));
   const fieldKeysSignature = fieldKeys.join("\0");
   const [activeKey, setActiveKey] = useState(fieldKeys[0]);
+  const [draggedKey, setDraggedKey] = useState();
   const [validationErrorFields, setValidationErrorFields] = useState([]);
   const activeIndexRef = useRef(0);
   const fieldKeysRef = useRef(fieldKeys);
@@ -136,21 +164,22 @@ const TabsFields = (props) => {
     const fallbackIndex = Math.min(activeIndexRef.current, fieldKeys.length - 1);
     setActiveKey(fallbackIndex >= 0 ? fieldKeys[fallbackIndex] : void 0);
   }, [activeKey, fieldKeysSignature]);
+  const activateFirstError = useCallback((errorFields) => {
+    const counts = getTabErrorCounts(errorFields, fieldsRef.current, namePathRef.current);
+    const firstErrorIndex = fieldsRef.current.findIndex((field) => counts.has(String(field.key)));
+    if (firstErrorIndex < 0)
+      return;
+    activeIndexRef.current = firstErrorIndex;
+    setActiveKey(String(fieldsRef.current[firstErrorIndex].key));
+  }, []);
   useEffect(
     () => subscribeFormListTabsValidation(form, (event) => {
       setValidationErrorFields(event.errorFields);
       if (event.reason !== "submitFailed")
         return;
-      const counts = getTabErrorCounts(event.errorFields, fieldsRef.current, namePathRef.current);
-      const firstErrorIndex = fieldsRef.current.findIndex(
-        (field) => counts.has(String(field.key))
-      );
-      if (firstErrorIndex < 0)
-        return;
-      activeIndexRef.current = firstErrorIndex;
-      setActiveKey(String(fieldsRef.current[firstErrorIndex].key));
+      activateFirstError(event.errorFields);
     }),
-    [form]
+    [form, activateFirstError]
   );
   const validateCurrent = useCallback(async () => {
     if (!activeKey)
@@ -165,13 +194,31 @@ const TabsFields = (props) => {
       return false;
     }
   }, [activeKey, fieldKeysSignature, form, namePath]);
+  const validateAllItems = useCallback(async () => {
+    if (!fieldsRef.current.length || !(form == null ? void 0 : form.validateFields))
+      return true;
+    try {
+      await form.validateFields(
+        fieldsRef.current.map((field) => [...namePathRef.current, field.name]),
+        { recursive: true }
+      );
+      setValidationErrorFields([]);
+      return true;
+    } catch (error) {
+      if (error && typeof error === "object" && "errorFields" in error && Array.isArray(error.errorFields) && !("outOfDate" in error && error.outOfDate)) {
+        setValidationErrorFields(error.errorFields);
+        activateFirstError(error.errorFields);
+      }
+      return false;
+    }
+  }, [form, activateFirstError]);
   const runAfterValidation = useCallback(
-    async (callback) => {
+    async (callback, validate = validateCurrent) => {
       if (validatingRef.current)
         return false;
       validatingRef.current = true;
       try {
-        if (!await validateCurrent())
+        if (!await validate())
           return false;
         return await callback();
       } finally {
@@ -199,7 +246,7 @@ const TabsFields = (props) => {
       if (!added)
         pendingAddKeysRef.current = null;
       return added;
-    });
+    }, validateAllItems);
   };
   const handleChange = (nextActiveKey) => {
     if (nextActiveKey === activeKey)
@@ -214,10 +261,14 @@ const TabsFields = (props) => {
     });
   };
   const handleDragEnd = ({ active, over }) => {
-    if (!over || active.id === over.id)
+    var _a2, _b;
+    setDraggedKey(void 0);
+    const sourceKey = (_a2 = active.data.current) == null ? void 0 : _a2.fieldKey;
+    const targetKey = (_b = over == null ? void 0 : over.data.current) == null ? void 0 : _b.fieldKey;
+    if (!over || sourceKey === targetKey)
       return;
-    const activeIndex = fieldKeys.indexOf(String(active.id));
-    const overIndex = fieldKeys.indexOf(String(over.id));
+    const activeIndex = fieldKeys.indexOf(sourceKey);
+    const overIndex = fieldKeys.indexOf(targetKey);
     if (activeIndex >= 0 && overIndex >= 0)
       operation.move(activeIndex, overIndex);
   };
@@ -233,7 +284,7 @@ const TabsFields = (props) => {
         const result = await runAfterValidation(() => {
           didRun = true;
           return callback ? callback(record, option) : item.type === "copy" ? true : void 0;
-        });
+        }, validateAllItems);
         return didRun ? result : FORM_LIST_ACTION_ABORT;
       }
     };
@@ -244,6 +295,9 @@ const TabsFields = (props) => {
     const record = form.getFieldValue(itemNamePath);
     const tabTitle = isFunction(title) ? title(record, index, form) : title;
     const renderedTitle = tabTitle ?? `Tab ${index + 1}`;
+    const titleChars = typeof renderedTitle === "string" || typeof renderedTitle === "number" ? Array.from(String(renderedTitle)) : void 0;
+    const isTitleOverflow = titleChars && titleChars.length > MAX_TAB_TITLE_LENGTH;
+    const displayTitle = isTitleOverflow ? `${titleChars.slice(0, MAX_TAB_TITLE_LENGTH).join("")}...` : renderedTitle;
     const tabActionProps = wrapValidatedActions(actionProps || void 0);
     const errorCount = errorCounts.get(fieldKey) || 0;
     return {
@@ -258,33 +312,27 @@ const TabsFields = (props) => {
           count: errorCount,
           overflowCount: 99,
           size: "small",
-          children: /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: `pro-form-list-tabs-title-content${errorCount ? " pro-form-list-tabs-title-content-error" : ""}`,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: renderedTitle }),
-                actionProps !== false && /* @__PURE__ */ jsx(
-                  ActionButton,
-                  {
-                    min,
-                    max,
-                    index,
-                    length: fields.length,
-                    operation,
-                    namePath: itemNamePath,
-                    form,
-                    field: { ...field, key: fieldKey },
-                    fields,
-                    actionProps: tabActionProps,
-                    mode: "tabs",
-                    disabled,
-                    isView
-                  }
-                )
-              ]
-            }
-          )
+          children: /* @__PURE__ */ jsxs("span", { className: "pro-form-list-tabs-title-content", children: [
+            isTitleOverflow ? /* @__PURE__ */ jsx(Tooltip, { title: renderedTitle, placement: "top", children: /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: displayTitle }) }) : /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: displayTitle }),
+            actionProps !== false && /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                min,
+                max,
+                index,
+                length: fields.length,
+                operation,
+                namePath: itemNamePath,
+                form,
+                field: { ...field, key: fieldKey },
+                fields,
+                actionProps: tabActionProps,
+                mode: "tabs",
+                disabled,
+                isView
+              }
+            )
+          ] })
         }
       ) }),
       children: /* @__PURE__ */ jsx("div", { className: "pro-form-list-tabs-content", children: /* @__PURE__ */ jsx(Row, { gutter: 16, className: "pro-form-list-fields", children: /* @__PURE__ */ jsx(
@@ -300,16 +348,24 @@ const TabsFields = (props) => {
       ) }) })
     };
   });
-  return /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
-    SortableContext,
+  const draggedLabel = (_a = items.find((item) => item.key === draggedKey)) == null ? void 0 : _a.label;
+  return /* @__PURE__ */ jsxs(
+    DndContext,
     {
-      items: fieldKeys.map((key) => ({ id: key })),
-      strategy: horizontalListSortingStrategy,
+      onDragStart: ({ active }) => {
+        var _a2;
+        return setDraggedKey((_a2 = active.data.current) == null ? void 0 : _a2.fieldKey);
+      },
+      onDragCancel: () => setDraggedKey(void 0),
+      onDragEnd: handleDragEnd,
       children: [
         /* @__PURE__ */ jsx(
           Tabs,
           {
             className: "pro-form-list-tabs",
+            style: tabsStyle,
+            classNames: { popup: { root: "pro-form-list-tabs-dropdown" } },
+            more: { overlayStyle: tabsStyle },
             type: "editable-card",
             size: "small",
             activeKey,
@@ -337,10 +393,26 @@ const TabsFields = (props) => {
             emptyBtnText,
             onAdd: handleAdd
           }
+        ),
+        typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, zIndex: token.zIndexPopupBase + 100, children: React.isValidElement(draggedLabel) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pro-form-list-tabs pro-form-list-tabs-drag-overlay",
+              style: tabsStyle,
+              "data-active": draggedKey === activeKey,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxs("div", { className: "pro-form-list-tabs-label", children: [
+                /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-drag-handle", children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16 }) }),
+                draggedLabel.props.children
+              ] })
+            }
+          ) }),
+          document.body
         )
       ]
     }
-  ) });
+  );
 };
 var TabsFields_default = TabsFields;
 export {

package/es/ProForm/components/combination/FormList/style/index.less

@@ -49,8 +49,7 @@
   }
 }
 
-.pro-form-list,
-.pro-form-list-tabs {
+.pro-form-list {
   .@{ant-prefix}-tabs-nav {
     margin-bottom: 0 !important;
   }
@@ -116,63 +115,94 @@
       background: transparent !important;
     }
   }
-
-  .pro-form-list-tool-btn-tabs {
-    width: auto;
-    min-width: 20px;
-    height: 20px;
-    padding: 0;
-
-    &:hover {
-      background: transparent !important;
-    }
-  }
 }
 
 .pro-form-list-tabs {
   &.@{ant-prefix}-tabs > .@{ant-prefix}-tabs-nav {
+    margin-bottom: 0;
+    padding-top: 8px;
+
+    &::before {
+      display: none;
+    }
+
     .@{ant-prefix}-tabs-nav-wrap {
+      min-width: 0;
       overflow-x: clip;
       overflow-y: visible;
     }
 
     .@{ant-prefix}-tabs-nav-list {
       overflow: visible;
+      align-items: center;
+      gap: 12px;
     }
   }
 
   &.@{ant-prefix}-tabs-card > .@{ant-prefix}-tabs-nav {
-    &::before {
-      border-bottom-color: var(--ant-color-border, #d9d9d9);
-    }
-
     .@{ant-prefix}-tabs-tab {
-      padding: 0;
-      border-color: var(--ant-color-border, #d9d9d9);
-      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
-
-      &.@{ant-prefix}-tabs-tab-active {
-        border-bottom-color: var(--ant-color-bg-container, #fff);
+      height: 32px;
+      // 覆盖全局 card Tabs 的强制内外边距，间距统一交给 nav-list。
+      padding: 0 !important;
+      margin: 0 !important;
+      background: transparent;
+      border: 0;
+
+      &.@{ant-prefix}-tabs-tab-active .pro-form-list-tabs-label {
+        color: var(--pro-form-list-tabs-primary);
+        background: var(--pro-form-list-tabs-primary-bg);
+        border-color: var(--pro-form-list-tabs-primary);
       }
     }
 
-    .@{ant-prefix}-tabs-tab + .@{ant-prefix}-tabs-tab,
-    .@{ant-prefix}-tabs-nav-add {
-      margin-left: 4px;
+    .@{ant-prefix}-tabs-tab-btn {
+      color: inherit;
+      text-shadow: none;
     }
 
     .@{ant-prefix}-tabs-nav-add {
       width: auto;
-      padding: 0 @zaui-space-size-xs;
-      border-color: var(--ant-color-border, #d9d9d9);
-      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
+      min-width: 32px;
+      height: 32px;
+      padding: 0 12px;
+      margin: 0;
+      color: var(--pro-form-list-tabs-muted);
+      background: var(--pro-form-list-tabs-bg);
+      border: 1px dashed var(--pro-form-list-tabs-border);
+      border-radius: 16px;
+
+      &:focus:not(:hover) {
+        color: var(--pro-form-list-tabs-muted);
+        border-color: var(--pro-form-list-tabs-border);
+      }
+
+      &:hover {
+        color: var(--pro-form-list-tabs-primary-hover);
+        border-color: var(--pro-form-list-tabs-primary-hover);
+      }
     }
   }
 
   .pro-form-list-tabs-label {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    height: 32px;
+    padding: 0 12px;
+    color: var(--pro-form-list-tabs-text);
+    background: var(--pro-form-list-tabs-bg);
+    border: 1px solid var(--pro-form-list-tabs-border);
+    border-radius: 16px;
+
+    &:hover {
+      color: var(--pro-form-list-tabs-primary-hover);
+      border-color: var(--pro-form-list-tabs-primary-hover);
+    }
+
+    &[data-drag-over='true'] {
+      border-color: var(--pro-form-list-tabs-primary-hover);
+    }
   }
 
   .pro-form-list-tabs-title {
@@ -180,15 +210,20 @@
   }
 
   .pro-form-list-tabs-error-badge {
+    // 角标以整个胶囊为定位容器，随拖动一起移动。
+    position: static;
     display: inline-flex;
+    color: inherit;
 
     .@{ant-prefix}-badge-count {
-      top: 0;
-      right: 0;
+      top: 4px;
+      right: 4px;
       z-index: 2;
       pointer-events: none;
       transform: translate(50%, -50%);
-      box-shadow: 0 0 0 2px var(--ant-color-bg-container, #fff);
+      color: var(--pro-form-list-tabs-solid-text);
+      background: var(--pro-form-list-tabs-error);
+      box-shadow: 0 0 0 2px var(--pro-form-list-tabs-bg);
       transition: none;
       animation: none;
 
@@ -204,36 +239,132 @@
     align-items: center;
   }
 
+  .pro-form-list-tabs-add {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    white-space: nowrap;
+    .pro-form-list-tabs-add-label {
+      font-size: 14px;
+    }
+  }
+
+  .pro-form-list-tabs-content {
+    padding: 12px 0 0;
+    border: 0;
+  }
+}
+
+.pro-form-list-tabs,
+.pro-form-list-tabs-dropdown {
   .pro-form-list-tabs-drag-handle {
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
+    color: var(--pro-form-list-tabs-muted);
+    touch-action: none;
+
     .pro-icon {
       cursor: move;
     }
   }
-  .pro-form-list-delete-icon {
-    &:hover {
-      background: transparent !important;
+
+  .pro-form-list-action {
+    padding-bottom: 0;
+
+    [data-form-list-action] {
+      min-width: 20px;
+      height: 20px;
+      padding: 0;
+      color: inherit;
+    }
+
+    [data-form-list-action='delete'] {
+      color: var(--pro-form-list-tabs-close);
+      border-radius: 4px;
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--pro-form-list-tabs-muted);
+        background: transparent;
+      }
     }
   }
+}
 
-  .pro-form-list-tabs-add {
-    display: inline-flex;
+.pro-form-list-tabs-dropdown {
+  min-width: 180px;
+  max-width: calc(100vw - 32px);
+
+  .@{ant-prefix}-tabs-dropdown-menu-item {
+    &:hover,
+    &-active,
+    &-selected {
+      background: transparent;
+    }
+  }
+
+  .@{ant-prefix}-tabs-dropdown-menu-item > span {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pro-form-list-tabs-label {
+    display: flex;
+    align-items: center;
     gap: 4px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pro-form-list-tabs-error-badge {
+    display: flex;
+    flex: 1;
     align-items: center;
+    gap: 8px;
+    min-width: 0;
+    color: inherit;
+  }
+
+  .pro-form-list-tabs-title-content {
+    display: contents;
+  }
+
+  .pro-form-list-tabs-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
     white-space: nowrap;
-    .pro-form-list-tabs-add-label {
-      font-size: 14px;
-    }
+    text-overflow: ellipsis;
   }
 
   .pro-form-list-action {
-    padding-bottom: 0;
+    order: 2;
+    flex-shrink: 0;
+    margin-inline-start: auto;
   }
 
-  .pro-form-list-tabs-content {
-    padding: 12px 0 0;
-    border: 0;
+  .@{ant-prefix}-badge-count {
+    position: static;
+    order: 1;
+    flex-shrink: 0;
+    transform: none;
+  }
+}
+
+.pro-form-list-tabs-drag-overlay {
+  pointer-events: none;
+
+  .pro-form-list-tabs-label {
+    width: max-content;
+    min-width: 100%;
+  }
+
+  &[data-active='true'] .pro-form-list-tabs-label {
+    color: var(--pro-form-list-tabs-primary);
+    background: var(--pro-form-list-tabs-primary-bg);
+    border-color: var(--pro-form-list-tabs-primary);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.6.5-beta.1",
+  "version": "4.6.5-beta.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public",