@zat-design/sisyphus-react 4.6.2 → 4.6.3-beta.1

package/es/ProForm/components/combination/FormList/components/Empty.d.ts

@@ -8,6 +8,7 @@ interface EmptyProps {
     form?: FormInstance;
     namePath?: InternalNamePath;
     emptyBtnText?: string;
+    onAdd?: () => unknown | Promise<unknown>;
 }
-declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText, onAdd, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
 export default Empty;

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

@@ -3,12 +3,24 @@ import { Button } from "antd";
 import isFunction from "lodash/isFunction";
 import EmptyImg from "../../../../../assets/empty.png";
 import locale from "../../../../../locale";
-const Empty = ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }) => {
+const Empty = ({
+  disabled,
+  toolbarProps,
+  operation,
+  form,
+  namePath,
+  emptyBtnText,
+  onAdd
+}) => {
   const addConfig = Array.isArray(toolbarProps) ? toolbarProps.find((item) => item.type === "add") : null;
   const handleAddClick = async () => {
     var _a;
     if (!operation || !form || !namePath)
       return;
+    if (onAdd) {
+      await onAdd();
+      return;
+    }
     const value = form.getFieldValue(namePath);
     const data = await ((_a = addConfig == null ? void 0 : addConfig.onClick) == null ? void 0 : _a.call(addConfig, value, { operation, form, namePath, index: 0 }));
     if (!(addConfig == null ? void 0 : addConfig.onClick) || data === true) {

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Row, Tabs } from "antd";
+import { Badge, Row, Tabs } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import { DndContext } from "@dnd-kit/core";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
@@ -11,6 +11,7 @@ import ProIcon from "../../../../../ProIcon";
 import locale from "../../../../../locale";
 import RenderFields from "../../../render/RenderFields";
 import ActionButton from "./ActionButton";
+import Empty from "./Empty";
 import { memoWith } from "../utils";
 import {
   executeToolbarAdd,
@@ -18,7 +19,29 @@ import {
   isToolbarActionVisible,
   normalizeToolbarActions
 } from "../toolbarActions";
+import { subscribeFormListTabsValidation } from "../tabsValidation";
 const MemoRenderFields = React.memo(RenderFields, memoWith);
+const getTabErrorCounts = (errorFields, fields, namePath) => {
+  const uniqueErrors = /* @__PURE__ */ new Map();
+  errorFields.forEach((errorField) => {
+    var _a;
+    if (!((_a = errorField.errors) == null ? void 0 : _a.length) || errorField.name.length <= namePath.length + 1)
+      return;
+    const matchesList = namePath.every((name, index) => errorField.name[index] === name);
+    if (!matchesList)
+      return;
+    const fieldName = errorField.name[namePath.length];
+    const field = fields.find((item) => item.name === fieldName);
+    if (!field)
+      return;
+    const fieldKey = String(field.key);
+    const errorPath = JSON.stringify(errorField.name.slice(namePath.length + 1));
+    const paths = uniqueErrors.get(fieldKey) || /* @__PURE__ */ new Set();
+    paths.add(errorPath);
+    uniqueErrors.set(fieldKey, paths);
+  });
+  return new Map(Array.from(uniqueErrors, ([fieldKey, paths]) => [fieldKey, paths.size]));
+};
 const SortableTabLabel = ({
   children,
   disabled,
@@ -69,6 +92,7 @@ const TabsFields = (props) => {
     diffConfig,
     disabled,
     draggable,
+    emptyBtnText,
     fields,
     form,
     isView,
@@ -84,11 +108,17 @@ const TabsFields = (props) => {
   const fieldKeys = fields.map((field) => String(field.key));
   const fieldKeysSignature = fieldKeys.join("\0");
   const [activeKey, setActiveKey] = useState(fieldKeys[0]);
+  const [validationErrorFields, setValidationErrorFields] = useState([]);
   const activeIndexRef = useRef(0);
   const fieldKeysRef = useRef(fieldKeys);
+  const fieldsRef = useRef(fields);
+  const namePathRef = useRef(namePath);
   const pendingAddKeysRef = useRef(null);
   const validatingRef = useRef(false);
   fieldKeysRef.current = fieldKeys;
+  fieldsRef.current = fields;
+  namePathRef.current = namePath;
+  const errorCounts = getTabErrorCounts(validationErrorFields, fields, namePath);
   const currentIndex = activeKey ? fieldKeys.indexOf(activeKey) : -1;
   if (currentIndex >= 0)
     activeIndexRef.current = currentIndex;
@@ -106,6 +136,22 @@ const TabsFields = (props) => {
     const fallbackIndex = Math.min(activeIndexRef.current, fieldKeys.length - 1);
     setActiveKey(fallbackIndex >= 0 ? fieldKeys[fallbackIndex] : void 0);
   }, [activeKey, fieldKeysSignature]);
+  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));
+    }),
+    [form]
+  );
   const validateCurrent = useCallback(async () => {
     if (!activeKey)
       return true;
@@ -142,7 +188,8 @@ const TabsFields = (props) => {
     (item) => item.type === "add" && isToolbarActionVisible(item, form, namePath)
   );
   const addLabel = (addAction == null ? void 0 : addAction.label) ?? locale.ProForm.formListTabsAdd;
-  const hideAdd = !addAction || addAction.disabled || disabled || isView || Boolean(max && max <= fields.length);
+  const hasReachedMax = max !== void 0 && max <= fields.length;
+  const hideAdd = !addAction || addAction.disabled || disabled || isView || hasReachedMax;
   const handleAdd = async () => {
     if (!addAction || hideAdd)
       return;
@@ -198,30 +245,46 @@ const TabsFields = (props) => {
     const tabTitle = isFunction(title) ? title(record, index, form) : title;
     const renderedTitle = tabTitle ?? `Tab ${index + 1}`;
     const tabActionProps = wrapValidatedActions(actionProps || void 0);
+    const errorCount = errorCounts.get(fieldKey) || 0;
     return {
       key: fieldKey,
       closable: false,
-      label: /* @__PURE__ */ jsxs(SortableTabLabel, { fieldKey, draggable, disabled: disabled || isView, 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
-          }
-        )
-      ] }),
+      label: /* @__PURE__ */ jsx(SortableTabLabel, { fieldKey, draggable, disabled: disabled || isView, children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          className: "pro-form-list-tabs-error-badge",
+          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__ */ jsx("div", { className: "pro-form-list-tabs-content", children: /* @__PURE__ */ jsx(Row, { gutter: 16, className: "pro-form-list-fields", children: /* @__PURE__ */ jsx(
         MemoRenderFields,
         {
@@ -235,31 +298,45 @@ const TabsFields = (props) => {
       ) }) })
     };
   });
-  return /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
     SortableContext,
     {
       items: fieldKeys.map((key) => ({ id: key })),
       strategy: horizontalListSortingStrategy,
-      children: /* @__PURE__ */ jsx(
-        Tabs,
-        {
-          className: "pro-form-list-tabs",
-          type: "editable-card",
-          size: "small",
-          activeKey,
-          addIcon: /* @__PURE__ */ jsxs("span", { className: "pro-form-list-tabs-add", children: [
-            /* @__PURE__ */ jsx(PlusOutlined, {}),
-            /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-add-label", children: addLabel })
-          ] }),
-          hideAdd,
-          items,
-          onChange: handleChange,
-          onEdit: (_, action) => {
-            if (action === "add")
-              void handleAdd();
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            className: "pro-form-list-tabs",
+            type: "editable-card",
+            size: "small",
+            activeKey,
+            addIcon: /* @__PURE__ */ jsxs("span", { className: "pro-form-list-tabs-add", children: [
+              /* @__PURE__ */ jsx(PlusOutlined, {}),
+              /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-add-label", children: addLabel })
+            ] }),
+            hideAdd,
+            items,
+            onChange: handleChange,
+            onEdit: (_, action) => {
+              if (action === "add")
+                void handleAdd();
+            }
           }
-        }
-      )
+        ),
+        fields.length === 0 && /* @__PURE__ */ jsx(
+          Empty,
+          {
+            disabled: hideAdd,
+            toolbarProps: addAction ? [{ ...addAction, show: true }] : false,
+            operation,
+            form,
+            namePath,
+            emptyBtnText,
+            onAdd: handleAdd
+          }
+        )
+      ]
     }
   ) });
 };

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

@@ -130,6 +130,17 @@
 }
 
 .pro-form-list-tabs {
+  &.@{ant-prefix}-tabs > .@{ant-prefix}-tabs-nav {
+    .@{ant-prefix}-tabs-nav-wrap {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    .@{ant-prefix}-tabs-nav-list {
+      overflow: visible;
+    }
+  }
+
   &.@{ant-prefix}-tabs-card > .@{ant-prefix}-tabs-nav {
     &::before {
       border-bottom-color: var(--ant-color-border, #d9d9d9);
@@ -168,6 +179,31 @@
     white-space: nowrap;
   }
 
+  .pro-form-list-tabs-error-badge {
+    display: inline-flex;
+
+    .@{ant-prefix}-badge-count {
+      top: 0;
+      right: 0;
+      z-index: 2;
+      pointer-events: none;
+      transform: translate(50%, -50%);
+      box-shadow: 0 0 0 2px var(--ant-color-bg-container, #fff);
+      transition: none;
+      animation: none;
+
+      .@{ant-prefix}-scroll-number-only-unit {
+        transition: none;
+      }
+    }
+  }
+
+  .pro-form-list-tabs-title-content {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  }
+
   .pro-form-list-tabs-drag-handle {
     display: inline-flex;
     align-items: center;

package/es/ProForm/components/combination/FormList/tabsValidation.d.ts

@@ -0,0 +1,14 @@
+import type { FormInstance } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+export interface FormListTabsErrorField {
+    errors?: unknown[];
+    name: InternalNamePath;
+}
+export interface FormListTabsValidationEvent {
+    errorFields: FormListTabsErrorField[];
+    reason: 'fieldsChange' | 'submitFailed' | 'submitSuccess';
+}
+type FormListTabsValidationListener = (event: FormListTabsValidationEvent) => void;
+export declare const subscribeFormListTabsValidation: (form: FormInstance, listener: FormListTabsValidationListener) => () => void;
+export declare const notifyFormListTabsValidation: (form: FormInstance, event: FormListTabsValidationEvent) => void;
+export {};

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

@@ -0,0 +1,19 @@
+const formListeners = /* @__PURE__ */ new WeakMap();
+const subscribeFormListTabsValidation = (form, listener) => {
+  const listeners = formListeners.get(form) || /* @__PURE__ */ new Set();
+  listeners.add(listener);
+  formListeners.set(form, listeners);
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size)
+      formListeners.delete(form);
+  };
+};
+const notifyFormListTabsValidation = (form, event) => {
+  var _a;
+  (_a = formListeners.get(form)) == null ? void 0 : _a.forEach((listener) => listener(event));
+};
+export {
+  notifyFormListTabsValidation,
+  subscribeFormListTabsValidation
+};

package/es/ProForm/index.js

@@ -29,6 +29,7 @@ import locale from "../locale";
 import useWatch from "./hooks/useWatch";
 import FormsProvider, { useContextForms, useForms } from "../FormsProvider";
 import { useStep } from "../ProStep";
+import { notifyFormListTabsValidation } from "./components/combination/FormList/tabsValidation";
 const ProForm = (props, ref) => {
   const {
     mode = "search",
@@ -144,8 +145,20 @@ const ProForm = (props, ref) => {
     }
   };
   const handleFinish = () => {
+    notifyFormListTabsValidation(form, { reason: "submitSuccess", errorFields: [] });
     onFinish == null ? void 0 : onFinish(form.getFieldsValue());
   };
+  const handleFieldsChange = (changedFields, allFields) => {
+    var _a;
+    notifyFormListTabsValidation(form, {
+      reason: "fieldsChange",
+      errorFields: allFields.filter((field) => {
+        var _a2;
+        return (_a2 = field.errors) == null ? void 0 : _a2.length;
+      })
+    });
+    (_a = otherProps.onFieldsChange) == null ? void 0 : _a.call(otherProps, changedFields, allFields);
+  };
   const cls = classnames({
     "pro-form": true,
     "pro-form-view": isView,
@@ -177,7 +190,7 @@ const ProForm = (props, ref) => {
       otherProps.layout = otherProps.layout || "vertical";
     }
   }
-  const filteredOtherProps = omit(otherProps, ["desensitizationKey"]);
+  const filteredOtherProps = omit(otherProps, ["desensitizationKey", "onFieldsChange"]);
   return /* @__PURE__ */ jsxs(
     Form,
     {
@@ -194,10 +207,12 @@ const ProForm = (props, ref) => {
       ...omit(config, ["isDiffAll"]),
       ...filteredOtherProps,
       labelAlign: labelAlign ?? config.labelAlign ?? "left",
+      onFieldsChange: handleFieldsChange,
       onValuesChange: handleValuesChange,
       onFinish: handleFinish,
       onFinishFailed: ({ errorFields }) => {
         var _a;
+        notifyFormListTabsValidation(form, { reason: "submitFailed", errorFields });
         if (scrollToError && (errorFields == null ? void 0 : errorFields.length)) {
           form.scrollToField((_a = errorFields[0]) == null ? void 0 : _a.name, {
             block: "center",

package/package.json

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