x-ui-design 0.4.76 → 0.4.78

package/lib/components/Form/Item/Item.tsx

@@ -14,6 +14,7 @@ import { clsx } from '../../../helpers';
 import { RuleType, SyntheticBaseEvent } from '../../../types';
 import { flattenChildren } from '../../../helpers/flatten';
 import {
+  FieldInstancesInputRef,
   FieldInstancesRef,
   FormItemChildComponentProps,
   FormItemProps
@@ -44,7 +45,7 @@ const FormItem = ({
   const formContext = useContext(FormContext);
 
   const errorRef = useRef<HTMLSpanElement>(null);
-  const fieldRef = useRef<FieldInstancesRef>(null);
+  const fieldRef = useRef(null);
 
   if (!formContext) {
     throw new Error('FormItem must be used within a Form');
@@ -65,7 +66,7 @@ const FormItem = ({
 
   useEffect(() => {
     if (name && !getFieldInstance(name)) {
-      registerField(name, rules, false, fieldRef.current ?? undefined);
+      registerField(name, rules, false, fieldRef.current);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [name, rules, fieldRef.current]);
@@ -100,22 +101,10 @@ const FormItem = ({
 
   const errorMessage = getFieldError(name)?.[0];
 
-  const mergeRefs = (elementRef: (el: FieldInstancesRef) => void) => {
-    return (el: FieldInstancesRef) => {
-      fieldRef.current = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      } else if (elementRef && typeof elementRef === 'object') {
-        // @ts-ignore
-        elementRef.current = el;
-      }
-    };
-  };
-
   return (
     <div
       style={style}
+      ref={fieldRef}
       className={clsx([
         `${prefixCls}`,
         {
@@ -142,9 +131,7 @@ const FormItem = ({
 
           return (
             <div
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              ref={mergeRefs(child.ref)}
+              
             >
               <FormItemChildComponent
                 {...props}

package/lib/hooks/useForm.ts

@@ -168,10 +168,14 @@ const useForm = (
     return !!name;
   }
 
-  function registerField(name: string, rules: RuleObject[] = [], remove: boolean = false, fieldRef?: FieldInstancesRef) {
+  function registerField(name: string, rules: RuleObject[] = [], remove: boolean = false, fieldRef?: FieldInstancesRef | null) {
     if (remove) {
       delete formRef.current[stepRef.current]?.[name];
       delete rulesRef.current[name];
+
+      if (fieldInstancesRef.current[name]) {
+        delete fieldInstancesRef.current[name];
+      }
     } else {
       if (!(name in formRef.current[stepRef.current])) {
         formRef.current[stepRef.current][name] = initialValues?.[name];

package/lib/types/form.ts

@@ -34,7 +34,7 @@ export interface FieldData {
   errors?: string[];
 }
 
-export type FieldInstancesInputRef = HTMLInputElement | null;
+export type FieldInstancesInputRef = HTMLInputElement | HTMLDivElement | null;
 export type FieldInstancesRef = {
   input?: FieldInstancesInputRef;
 };
@@ -119,7 +119,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, fieldRef?: FieldInstancesRef) => void;
+  registerField: (name: string, rules?: RuleObject[], remove?: boolean, fieldRef?: FieldInstancesRef | null) => void;
   setFieldValue: (name: string, value: RuleTypes, errors?: string[],
     reset?: boolean | null | undefined,
     touch?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.4.76",
+  "version": "0.4.78",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -2080,6 +2080,8 @@ export default function Home() {
                         setStep(step - 1)
                     }}>Previous</Button>}
                     <Button type="primary" size="middle" htmlType="button" onClick={async () => {
+                        console.log(form.getFieldInstance('username'));
+                        
                         if (await form.validateFields()) {
                             if (step === 2) {
                                 form.submit();