x-ui-design 0.6.14 → 0.6.16

package/dist/esm/types/components/Form/Item/Item.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormItemProps } from '../../../types/form';
 import './style.css';
 declare const FormItem: {
-    ({ prefixCls, name, label, rules, children, className, layout, style, dependencies, feedbackIcons, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
+    ({ prefixCls, name, label, rules, children, className, layout, style, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
     displayName: string;
 };
 export default FormItem;

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

@@ -81,6 +81,7 @@ export interface FormItemChildComponentProps {
     noStyle?: boolean;
     feedbackIcons?: boolean;
     ref?: FieldInstancesRef | null;
+    dependencies?: string[];
 }
 export interface FormInstance {
     submit: () => Promise<Record<string, RuleTypes> | undefined>;
@@ -112,5 +113,4 @@ export interface FormInstance {
     setOnFinish?: (onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => void;
     setOnValuesChange?: (onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => void;
     changeStep: (step: number) => void;
-    subscribeToErrors?: (callback: (errors: FieldError[]) => void) => () => void;
 }

package/dist/index.esm.js

@@ -620,7 +620,6 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   const fieldInstancesRef = useRef({});
   const [isReseting, setIsReseting] = useState(false);
   const errorsRef = useRef({});
-  const errorSubscribers = useRef([]);
   const fieldSubscribers = useRef({});
   const formSubscribers = useRef([]);
   function getFormFields() {
@@ -766,8 +765,6 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       [name]: fieldErrors
     };
     warningsRef.current[name] = fieldWarnings;
-    const currentErrors = getFieldsError();
-    errorSubscribers.current.forEach(callback => callback(currentErrors));
     return fieldErrors.length === 0;
   }
   async function validateFields(nameList) {
@@ -775,6 +772,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     const results = await Promise.all(fieldsToValidate.map(name => validateField(name)));
     if (_scrollToFirstError.current) {
       const firstErrorContent = document.querySelectorAll('.xUi-form-item-has-error')?.[0];
+      console.log(firstErrorContent);
       if (firstErrorContent) {
         firstErrorContent.closest('.xUi-form-item')?.scrollIntoView({
           behavior: 'smooth'
@@ -806,8 +804,6 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       });
     }
     formSubscribers.current.forEach(callback => callback(getFieldsValue()));
-    const currentErrors = getFieldsError();
-    errorSubscribers.current.forEach(callback => callback(currentErrors));
     setIsReseting(prev => !prev);
   }
   async function submit() {
@@ -841,12 +837,6 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       fieldCallbacks.forEach(unsubscribe => unsubscribe());
     };
   }
-  function subscribeToErrors(callback) {
-    errorSubscribers.current.push(callback);
-    return () => {
-      errorSubscribers.current = errorSubscribers.current.filter(cb => cb !== callback);
-    };
-  }
   function setScrollToFirstError(value) {
     _scrollToFirstError.current = value;
   }
@@ -894,8 +884,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     setOnFinish,
     setOnFieldsChange,
     setOnValuesChange,
-    changeStep,
-    subscribeToErrors
+    changeStep
   };
   return formInstance;
 };
@@ -982,6 +971,17 @@ function flattenChildren(children) {
 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);
 
+const debounce = (func, delay) => {
+  let timeoutId = null;
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
 const FormItem$1 = ({
   prefixCls = prefixClsFormItem,
   name,
@@ -991,8 +991,6 @@ const FormItem$1 = ({
   className = '',
   layout = 'vertical',
   style = {},
-  dependencies = [],
-  feedbackIcons,
   extra,
   hideLabel = false,
   removeErrorMessageHeight = false,
@@ -1009,10 +1007,7 @@ const FormItem$1 = ({
     isReseting,
     registerField,
     getFieldInstance,
-    setFieldInstance,
-    subscribeToFields,
-    validateFields,
-    subscribeToErrors
+    setFieldInstance
   } = formContext;
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
@@ -1024,22 +1019,6 @@ const FormItem$1 = ({
     setFieldInstance(name, fieldRef.current);
   }, [name, fieldRef.current]);
   useEffect(() => () => registerField(name, undefined, true), [name]);
-  useEffect(() => {
-    if (name && dependencies.length > 0) {
-      const unsubscribe = subscribeToFields(dependencies, () => {
-        validateFields([name]);
-      });
-      return () => {
-        unsubscribe();
-      };
-    }
-  }, [dependencies, name]);
-  useEffect(() => {
-    const unsubscribe = subscribeToErrors?.(errors => {
-      setErrorMessage(errors.find(error => error.name === name)?.errors?.[0] || '');
-    });
-    return () => unsubscribe?.();
-  }, []);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
@@ -1092,8 +1071,8 @@ const FormItemChildComponent = ({
   initialValue,
   normalize,
   noStyle,
-  feedbackIcons,
   ref,
+  dependencies = [],
   ...props
 }) => {
   const formContext = useContext(FormContext);
@@ -1101,7 +1080,9 @@ const FormItemChildComponent = ({
   const {
     getFieldsValue,
     getFieldValue,
-    setFieldValue
+    setFieldValue,
+    subscribeToFields,
+    validateFields
   } = formContext || {};
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
@@ -1115,6 +1096,19 @@ const FormItemChildComponent = ({
       setFieldValue?.(name, initialValue);
     }
   }, []);
+  useEffect(() => {
+    if (name && dependencies.length > 0) {
+      const unsubscribe = subscribeToFields?.(dependencies, () => {
+        validateFields?.([name]);
+      });
+      return () => {
+        unsubscribe?.();
+      };
+    }
+  }, [dependencies, name]);
+  const debouncedSetFieldValue = useRef(debounce((name, value) => {
+    setFieldValue?.(name, value, undefined, undefined, true);
+  }, 10)).current;
   const handleChange = (e, option) => {
     let rawValue = e?.target ? e.target.value : e;
     if (normalize) {
@@ -1131,7 +1125,7 @@ const FormItemChildComponent = ({
         return;
       }
     }
-    setFieldValue?.(name, rawValue, undefined, undefined, true);
+    debouncedSetFieldValue(name, rawValue);
     onChange?.(e, option);
   };
   const injectPropsIntoFinalLeaf = child => {
@@ -3036,6 +3030,7 @@ const InputComponent = ({
   }, prefix && /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-prefix`
   }, prefix), /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    suppressHydrationWarning: true,
     ref: inputRef
   }, props.type === 'password' && iconRender ? {
     type: iconRenderVisible ? 'text' : 'password'