x-ui-design 0.6.29 → 0.6.31

package/dist/esm/types/hooks/useForm.d.ts

@@ -1,4 +1,14 @@
 import { RuleTypes } from '../types';
-import type { FieldData, FormInstance } from '../types/form';
-declare const useForm: (initialValues?: Record<string, RuleTypes>, onFieldsChange?: (changedFields: FieldData[]) => void, onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void, scrollToFirstError?: boolean, onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => FormInstance;
+import type { FieldData, FieldError, FormInstance } from '../types/form';
+declare const useForm: ({ initialValues, onFieldsChange, onValuesChange, scrollToFirstError, onFinish, onFinishFailed }: {
+    initialValues?: Record<string, RuleTypes>;
+    onFieldsChange?: (changedFields: FieldData[]) => void;
+    onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void;
+    scrollToFirstError?: boolean;
+    onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined;
+    onFinishFailed?: (errorInfo: {
+        values: Record<string, RuleTypes>;
+        errorFields: Pick<FieldError, "errors" | "name">[];
+    }) => void;
+}) => FormInstance;
 export { useForm };

package/dist/esm/types/types/form.d.ts

@@ -83,7 +83,7 @@ export interface FormItemChildComponentProps {
     ref?: FieldInstancesRef | null;
     dependencies?: string[];
 }
-export interface FormInstance {
+export type FormInstance = {
     submit: () => Promise<Record<string, RuleTypes> | undefined>;
     setFields: (fields: FieldData[]) => void;
     resetFields: (nameList?: string[], showError?: boolean | null) => void;
@@ -113,5 +113,9 @@ export interface FormInstance {
     setOnFieldsChange?: (onFieldsChange?: (changedFields: FieldData[]) => void) => void;
     setOnFinish?: (onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => void;
     setOnValuesChange?: (onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => void;
+    setOnFinishFailed?: (onFinishFailed?: (errorInfo: {
+        values: Record<string, RuleTypes>;
+        errorFields: Pick<FieldError, 'errors' | 'name'>[];
+    }) => void) => void;
     changeStep: (step: number) => void;
-}
+};

package/dist/index.esm.js

@@ -598,7 +598,14 @@ const SpinerIcon = () => /*#__PURE__*/React.createElement("svg", {
   d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
 }));
 
-const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFirstError, onFinish) => {
+const useForm = ({
+  initialValues = {},
+  onFieldsChange,
+  onValuesChange,
+  scrollToFirstError,
+  onFinish,
+  onFinishFailed
+}) => {
   const touchedFieldsRef = useRef(new Set());
   const rulesRef = useRef({});
   const warningsRef = useRef({});
@@ -607,7 +614,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   const formHandlersRef = useRef({
     onFinish,
     onValuesChange,
-    onFieldsChange
+    onFieldsChange,
+    onFinishFailed
   });
   const formRef = useRef({
     [stepRef.current]: {
@@ -775,19 +783,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     if (_scrollToFirstError.current) {
       const firstErrorContent = document.querySelectorAll('.xUi-form-item-has-error')?.[0];
       if (firstErrorContent) {
-        let toggleDisplay = false;
         const _firstErrorContent = firstErrorContent.closest('.xUi-form-item');
-        if (_firstErrorContent.style.display === 'none') {
-          toggleDisplay = true;
-          _firstErrorContent.style.display = 'block';
-        }
-        firstErrorContent.closest('.xUi-form-item')?.scrollIntoView({
+        _firstErrorContent?.scrollIntoView({
           behavior: 'smooth'
         });
-        if (toggleDisplay) {
-          toggleDisplay = false;
-          _firstErrorContent.style.display = 'none';
-        }
       }
     }
     return results.every(valid => valid);
@@ -824,7 +823,14 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     return (await validateFields()) ? (() => {
       formHandlersRef.current.onFinish?.(formData);
       return formData;
-    })() : undefined;
+    })() : (() => {
+      const errorFields = formInstance.getFieldsError().filter(e => e.errors.length);
+      formHandlersRef.current.onFinishFailed?.({
+        values: formInstance.getFieldsValue(),
+        errorFields
+      });
+      return undefined;
+    })();
   }
   function subscribeToField(name, callback) {
     if (!fieldSubscribers.current[name]) {
@@ -868,6 +874,9 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   function setOnValuesChange(onValuesChange) {
     formHandlersRef.current.onValuesChange = onValuesChange;
   }
+  function setOnFinishFailed(onFinishFailed) {
+    formHandlersRef.current.onFinishFailed = onFinishFailed;
+  }
   function setOnFinish(onFinish) {
     formHandlersRef.current.onFinish = onFinish;
   }
@@ -907,6 +916,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     setOnFinish,
     setOnFieldsChange,
     setOnValuesChange,
+    setOnFinishFailed,
     changeStep
   };
   return formInstance;
@@ -1206,7 +1216,12 @@ const Form$1 = ({
   scrollToFirstError = false,
   ...rest
 }) => {
-  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
+  const internalForm = useForm({
+    initialValues,
+    onFieldsChange,
+    onValuesChange,
+    onFinishFailed
+  });
   const formRef = useRef(null);
   const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
   const handleSubmit = useCallback(async e => {
@@ -1214,7 +1229,7 @@ const Form$1 = ({
     if (await formInstance.validateFields()) {
       onFinish?.(formInstance.getFieldsValue());
     } else if (onFinishFailed) {
-      const errorFields = formInstance.getFieldsError();
+      const errorFields = formInstance.getFieldsError().filter(e => e.errors.length);
       onFinishFailed({
         values: formInstance.getFieldsValue(),
         errorFields
@@ -1224,19 +1239,22 @@ const Form$1 = ({
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
   useEffect(() => {
+    if (onFinish) {
+      formInstance.setOnFinish?.(onFinish);
+    }
     if (onFieldsChange) {
       formInstance.setOnFieldsChange?.(onFieldsChange);
     }
     if (onValuesChange) {
       formInstance.setOnValuesChange?.(onValuesChange);
     }
-    if (onFinish) {
-      formInstance.setOnFinish?.(onFinish);
+    if (onFinishFailed) {
+      formInstance.setOnFinishFailed?.(onFinishFailed);
     }
     if (scrollToFirstError) {
       formInstance.setScrollToFirstError(scrollToFirstError);
     }
-  }, [formInstance, onFieldsChange, onValuesChange, onFinish, scrollToFirstError]);
+  }, [formInstance, onFieldsChange, onValuesChange, onFinishFailed, onFinish, scrollToFirstError]);
   const injectPropsIntoFinalLeaf = useCallback(child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;