x-ui-design 0.4.75 → 0.4.76

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

@@ -87,7 +87,7 @@ export interface FormInstance {
     setFields: (fields: FieldData[]) => void;
     resetFields: (nameList?: string[], showError?: boolean | null) => void;
     getFieldError: (name: string) => string[];
-    registerField: (name: string, rules?: RuleObject[], remove?: boolean) => void;
+    registerField: (name: string, rules?: RuleObject[], remove?: boolean, fieldRef?: FieldInstancesRef) => void;
     setFieldValue: (name: string, value: RuleTypes, errors?: string[], reset?: boolean | null | undefined, touch?: boolean) => void;
     getFieldValue: (name: string) => RuleTypes;
     validateFields: (nameList?: string[]) => Promise<boolean>;

package/dist/index.esm.js

@@ -710,7 +710,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   function isFieldValidating(name) {
     return !!name;
   }
-  function registerField(name, rules = [], remove = false) {
+  function registerField(name, rules = [], remove = false, fieldRef) {
     if (remove) {
       delete formRef.current[stepRef.current]?.[name];
       delete rulesRef.current[name];
@@ -719,6 +719,9 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         formRef.current[stepRef.current][name] = initialValues?.[name];
       }
       rulesRef.current[name] = rules;
+      if (fieldRef) {
+        fieldInstancesRef.current[name] = fieldRef;
+      }
     }
   }
   async function validateField(name) {
@@ -986,6 +989,7 @@ const FormItem$1 = ({
 }) => {
   const formContext = useContext(FormContext);
   const errorRef = useRef(null);
+  const fieldRef = useRef(null);
   if (!formContext) {
     throw new Error('FormItem must be used within a Form');
   }
@@ -1002,10 +1006,10 @@ const FormItem$1 = ({
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
     if (name && !getFieldInstance(name)) {
-      registerField(name, rules);
+      registerField(name, rules, false, fieldRef.current ?? undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name, rules]);
+  }, [name, rules, fieldRef.current]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => () => registerField(name, undefined, true), [name]);
   useEffect(() => {
@@ -1027,6 +1031,17 @@ const FormItem$1 = ({
   }, [dependencies, name]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
   const errorMessage = getFieldError(name)?.[0];
+  const mergeRefs = elementRef => {
+    return el => {
+      fieldRef.current = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      } else if (elementRef && typeof elementRef === 'object') {
+        // @ts-ignore
+        elementRef.current = el;
+      }
+    };
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: clsx([`${prefixCls}`, {
@@ -1049,7 +1064,11 @@ const FormItem$1 = ({
         ...childProps
       } = child.props;
       const fieldValue = value ?? getFieldValue(name) ?? initialValue;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormItemChildComponent, _extends({}, props, {
+      return /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        ref: mergeRefs(child.ref)
+      }, /*#__PURE__*/React.createElement(FormItemChildComponent, _extends({}, props, {
         key: `${key}_${isReseting}`,
         name: name,
         child: child,