x-ui-design 0.6.12 → 0.6.14

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, initialValue, feedbackIcons, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
+    ({ prefixCls, name, label, rules, children, className, layout, style, dependencies, feedbackIcons, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
     displayName: string;
 };
 export default FormItem;

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

@@ -74,9 +74,7 @@ export interface FormItemChildComponentProps {
     child: ReactElement;
     name: string;
     error: boolean;
-    fieldValue: RuleTypes;
-    value: RuleType;
-    setFieldValue: (name: string, value: RuleType, errors?: string[], reset?: boolean | null | undefined, touch?: boolean) => void;
+    initialValue: RuleTypes;
     onChange?: (e: SyntheticBaseEvent, option?: OptionProps) => void;
     size?: SizeType;
     normalize?: (value: RuleType, prevValue: RuleType, allValues: RuleType) => RuleType;
@@ -114,4 +112,5 @@ 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

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, createContext, useImperativeHandle, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -619,7 +619,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() {
@@ -643,13 +644,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
     }));
@@ -663,12 +664,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       touchedFieldsRef.current.add(name);
     }
     if (reset === null) {
-      setErrors({
-        [name]: []
-      });
+      errorsRef.current[name] = [];
       return;
     }
-    if (!errors?.length) {
+    if (!errorsRef.current?.length) {
       validateField(name).then(() => {
         const allValues = getFieldsValue();
         fieldSubscribers.current[name]?.forEach(callback => callback(value));
@@ -686,9 +685,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         }
       });
     } else {
-      setErrors({
-        [name]: errors
-      });
+      errorsRef.current[name] = errors || [];
     }
   }
   function setFieldsValue(values, reset) {
@@ -764,11 +761,13 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         }
       }
     }));
-    setErrors(prev => ({
-      ...prev,
+    errorsRef.current = {
+      ...errorsRef.current,
       [name]: fieldErrors
-    }));
+    };
     warningsRef.current[name] = fieldWarnings;
+    const currentErrors = getFieldsError();
+    errorSubscribers.current.forEach(callback => callback(currentErrors));
     return fieldErrors.length === 0;
   }
   async function validateFields(nameList) {
@@ -791,10 +790,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         formData[name] = initialValues[name];
         touchedFieldsRef.current.delete(name);
         delete warningsRef.current[name];
-        setErrors(prev => ({
-          ...prev,
+        errorsRef.current = {
+          ...errorsRef.current,
           [name]: []
-        }));
+        };
         setFieldValue(name, initialValues[name], undefined, showError);
       });
     } else {
@@ -807,6 +806,8 @@ 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() {
@@ -840,6 +841,12 @@ 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;
   }
@@ -887,7 +894,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     setOnFinish,
     setOnFieldsChange,
     setOnValuesChange,
-    changeStep
+    changeStep,
+    subscribeToErrors
   };
   return formInstance;
 };
@@ -984,7 +992,6 @@ const FormItem$1 = ({
   layout = 'vertical',
   style = {},
   dependencies = [],
-  initialValue,
   feedbackIcons,
   extra,
   hideLabel = false,
@@ -993,6 +1000,7 @@ const FormItem$1 = ({
 }) => {
   const formContext = useContext(FormContext);
   const errorRef = useRef(null);
+  const [errorMessage, setErrorMessage] = useState('');
   const fieldRef = useRef(null);
   if (!formContext) {
     throw new Error('FormItem must be used within a Form');
@@ -1000,13 +1008,11 @@ const FormItem$1 = ({
   const {
     isReseting,
     registerField,
-    getFieldError,
-    getFieldValue,
-    setFieldValue,
     getFieldInstance,
     setFieldInstance,
     subscribeToFields,
-    validateFields
+    validateFields,
+    subscribeToErrors
   } = formContext;
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
@@ -1018,11 +1024,6 @@ const FormItem$1 = ({
     setFieldInstance(name, fieldRef.current);
   }, [name, fieldRef.current]);
   useEffect(() => () => registerField(name, undefined, true), [name]);
-  useEffect(() => {
-    if (initialValue) {
-      setFieldValue(name, initialValue);
-    }
-  }, []);
   useEffect(() => {
     if (name && dependencies.length > 0) {
       const unsubscribe = subscribeToFields(dependencies, () => {
@@ -1033,8 +1034,13 @@ const FormItem$1 = ({
       };
     }
   }, [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]);
-  const errorMessage = getFieldError(name)?.[0];
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     "data-instance": name,
@@ -1050,14 +1056,6 @@ const FormItem$1 = ({
     className: `${prefixCls}-required`
   }, "*")), Children.map(childrenList, (child, key) => {
     if (/*#__PURE__*/isValidElement(child)) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      const {
-        onChange,
-        value,
-        ...childProps
-      } = child.props;
-      const fieldValue = value ?? getFieldValue(name) ?? initialValue;
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormItemChildComponent, _extends({}, props, {
         key: `${key}_${isReseting}`
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1066,18 +1064,7 @@ const FormItem$1 = ({
         ref: fieldRef,
         name: name,
         child: child,
-        value: value,
-        error: !!errorMessage,
-        fieldValue: fieldValue,
-        setFieldValue: setFieldValue,
-        feedbackIcons: feedbackIcons,
-        onChange: onChange,
-        noStyle: props.noStyle,
-        normalize: props.normalize
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        ,
-        size: childProps.size || props.size
+        error: !!errorMessage
       })), extra ? /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-extra`
       }, extra || '') : null, !props.noStyle && /*#__PURE__*/React.createElement("span", {
@@ -1102,9 +1089,7 @@ const FormItemChildComponent = ({
   child,
   name,
   error,
-  fieldValue,
-  setFieldValue,
-  onChange,
+  initialValue,
   normalize,
   noStyle,
   feedbackIcons,
@@ -1112,32 +1097,43 @@ const FormItemChildComponent = ({
   ...props
 }) => {
   const formContext = useContext(FormContext);
-  const animationRef = useRef(null);
   const [wasNormalize, setWasNormalize] = useState(false);
   const {
-    getFieldsValue
+    getFieldsValue,
+    getFieldValue,
+    setFieldValue
   } = formContext || {};
-  const handleChange = useCallback((e, option) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  const {
+    onChange,
+    value
+  } = child.props;
+  const fieldValue = value ?? getFieldValue?.(name) ?? initialValue;
+  useEffect(() => {
+    if (initialValue) {
+      setFieldValue?.(name, initialValue);
+    }
+  }, []);
+  const handleChange = (e, option) => {
     let rawValue = e?.target ? e.target.value : e;
     if (normalize) {
-      const prevValue = fieldValue ?? props.value;
+      const prevValue = fieldValue;
       const allValues = getFieldsValue?.();
       rawValue = normalize(rawValue, prevValue, allValues);
       if (rawValue === prevValue) {
         e.target.value = rawValue;
         setWasNormalize(prev => !prev);
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-        }
-        animationRef.current = requestAnimationFrame(() => {
+        const timeout = setTimeout(() => {
           document.querySelector(`[name='${name}']`)?.focus();
-        });
+          clearTimeout(timeout);
+        }, 0);
         return;
       }
     }
-    setFieldValue(name, rawValue, undefined, undefined, true);
+    setFieldValue?.(name, rawValue, undefined, undefined, true);
     onChange?.(e, option);
-  }, [fieldValue, props.value, name]);
+  };
   const injectPropsIntoFinalLeaf = child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
@@ -1155,11 +1151,15 @@ const FormItemChildComponent = ({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
     }, child.props, {
-      name: name,
+      name: name
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      ,
+      size: childProps.size || props.size,
       child: child,
+      value: fieldValue,
       onChange: handleChange,
-      key: `${name}_${wasNormalize}`,
-      value: fieldValue ?? props.value
+      key: `${name}_${wasNormalize}`
     }, 'dangerouslySetInnerHTML' in childProps ? {} : {
       __injected: true,
       ...(error ? {
@@ -3006,12 +3006,7 @@ const InputComponent = ({
         value: rawInput
       }
     };
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-    }
-    animationRef.current = requestAnimationFrame(() => {
-      props.onChange?.(eventWithMaskedValue);
-    });
+    props.onChange?.(eventWithMaskedValue);
   };
   const handleClear = e => {
     if (mask) {