x-ui-design 0.6.49 → 0.6.51

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

@@ -0,0 +1,2 @@
+import type { FormInstance } from '../types/form';
+export declare function useWatchError(form: FormInstance, name: string): string[] | undefined;

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

@@ -102,6 +102,7 @@ export interface FormInstance {
     subscribeToField: (name: string, callback: (value: RuleTypes) => void) => () => void;
     subscribeToForm: (callback: (values: Record<string, RuleTypes>) => void) => () => void;
     subscribeToFields: (names: string[], callback: (values: Record<string, RuleTypes>) => void) => () => void;
+    subscribeToError?: (name: string, callback: (errors?: string[]) => void) => void;
     isFieldValidating: (name: string) => boolean;
     onFieldsChange?: (changedFields: FieldData[]) => void;
     onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, createContext, useImperativeHandle, memo, useCallback, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, createContext, useImperativeHandle, memo, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -620,7 +620,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   });
   const fieldInstancesRef = useRef({});
   const [isReseting, setIsReseting] = useState(false);
-  const [errors, setErrors] = useState({});
+  const errorsRef = useRef({});
+  const errorSubscribers = useRef({});
   const fieldSubscribers = useRef({});
   const formSubscribers = useRef([]);
   function getFormFields() {
@@ -644,13 +645,13 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     }, {});
   }
   function getFieldError(name) {
-    return errors[name] || [];
+    return errorsRef.current[name] || [];
   }
   function getFieldWarning(name) {
     return warningsRef.current[name] || [];
   }
   function getFieldsError() {
-    return Object.entries(errors).map(([name, err]) => ({
+    return Object.entries(errorsRef.current).map(([name, err]) => ({
       name,
       errors: err
     }));
@@ -664,9 +665,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       touchedFieldsRef.current.add(name);
     }
     if (reset === null) {
-      setErrors({
-        [name]: []
-      });
+      errorsRef.current[name] = [];
+      notifyErrorSubscribers(name);
       return;
     }
     if (!errors?.length) {
@@ -687,9 +687,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         }
       });
     } else {
-      setErrors({
-        [name]: errors
-      });
+      errorsRef.current[name] = errors;
     }
   }
   function setFieldsValue(values, reset) {
@@ -765,11 +763,9 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         }
       }
     }));
-    setErrors(prev => ({
-      ...prev,
-      [name]: fieldErrors
-    }));
+    errorsRef.current[name] = fieldErrors;
     warningsRef.current[name] = fieldWarnings;
+    notifyErrorSubscribers(name);
     return fieldErrors.length === 0;
   }
   async function validateFields(nameList) {
@@ -790,6 +786,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         });
       }
     }
+    fieldsToValidate.forEach(name => notifyErrorSubscribers(name));
     return results.every(valid => valid);
   }
   function resetFields(nameList, showError = true) {
@@ -799,10 +796,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         formData[name] = initialValues[name];
         touchedFieldsRef.current.delete(name);
         delete warningsRef.current[name];
-        setErrors(prev => ({
-          ...prev,
-          [name]: []
-        }));
+        errorsRef.current[name] = [];
+        notifyErrorSubscribers(name);
         setFieldValue(name, initialValues[name], undefined, showError);
       });
     } else {
@@ -848,6 +843,19 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       fieldCallbacks.forEach(unsubscribe => unsubscribe());
     };
   }
+  function subscribeToError(name, callback) {
+    if (!errorSubscribers.current[name]) {
+      errorSubscribers.current[name] = [];
+    }
+    errorSubscribers.current[name].push(callback);
+    return () => {
+      errorSubscribers.current[name] = errorSubscribers.current[name].filter(cb => cb !== callback);
+    };
+  }
+  function notifyErrorSubscribers(name) {
+    const errors = getFieldError(name);
+    errorSubscribers.current[name]?.forEach(cb => cb(errors));
+  }
   function setScrollToFirstError(value) {
     _scrollToFirstError.current = value;
   }
@@ -894,6 +902,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     setFieldInstance,
     subscribeToFields,
     setScrollToFirstError,
+    subscribeToError,
     scrollToFirstError,
     isReseting,
     setOnFinish,
@@ -983,6 +992,20 @@ function flattenChildren(children) {
   return result;
 }
 
+function useWatchError(form, name) {
+  const [errors, setErrors] = useState(form.getFieldError(name));
+  useEffect(() => {
+    // Subscribe directly to error changes
+    const unsubscribe = form.subscribeToError?.(name, newErrors => {
+      setErrors(newErrors);
+    });
+    // Initialize on mount
+    setErrors(form.getFieldError(name));
+    return unsubscribe;
+  }, [form, name]);
+  return errors;
+}
+
 var css_248z$l = ".xUi-form-item{display:flex;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{color:var(--xui-error-color);display:block;font-size:var(--xui-font-size-xs);line-height:16px;margin-bottom:8px;margin-top:4px;min-height:16px;position:relative;right:0;text-align:end;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{width:-webkit-fill-available}";
 styleInject(css_248z$l);
 
@@ -1009,10 +1032,10 @@ const FormItem$1 = ({
   if (!formContext) {
     throw new Error('FormItem must be used within a Form');
   }
+  const errors = useWatchError(formContext, name)?.[0];
   const {
     isReseting,
     registerField,
-    getFieldError,
     getFieldValue,
     setFieldValue,
     getFieldInstance,
@@ -1046,7 +1069,6 @@ const FormItem$1 = ({
     }
   }, [dependencies, name]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
-  const errorMessage = getFieldError(name)?.[0];
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     "data-instance": name,
@@ -1079,7 +1101,7 @@ const FormItem$1 = ({
         name: name,
         child: child,
         value: value,
-        error: !!errorMessage,
+        error: !!errors,
         fieldValue: fieldValue,
         setFieldValue: setFieldValue,
         feedbackIcons: feedbackIcons,
@@ -1095,7 +1117,7 @@ const FormItem$1 = ({
       }, extra || '') : null, !props.noStyle && /*#__PURE__*/React.createElement("span", {
         ref: errorRef,
         className: clsx([`${prefixCls}-error`, {
-          [`${prefixCls}-has-error`]: errorMessage?.length
+          [`${prefixCls}-has-error`]: errors?.length
         }]),
         style: {
           ...(removeErrorMessageHeight ? {
@@ -1105,7 +1127,7 @@ const FormItem$1 = ({
             marginBottom: 0
           } : {})
         }
-      }, errorMessage || ''));
+      }, errors || ''));
     }
     return child;
   }));
@@ -1213,15 +1235,8 @@ const Form$1 = ({
   const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
   const handleSubmit = async e => {
     e.preventDefault();
-    if (await formInstance.validateFields()) {
-      onFinish?.(formInstance.getFieldsValue());
-    } else if (onFinishFailed) {
-      const errorFields = formInstance.getFieldsError().filter(e => e.errors.length);
-      onFinishFailed({
-        values: formInstance.getFieldsValue(),
-        errorFields
-      });
-    }
+    e.stopPropagation();
+    await formInstance.submit();
   };
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {