x-ui-design 0.6.12 → 0.6.13

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

@@ -4,7 +4,6 @@ import React, {
   Children,
   isValidElement,
   ReactElement,
-  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -24,6 +23,20 @@ import { prefixClsFormItem } from '../../../utils';
 import { FormContext } from '../Form';
 import './style.css';
 
+const debounce = (func: (...args: any[]) => void, delay: number) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
 const FormItem = ({
   prefixCls = prefixClsFormItem,
   name,
@@ -198,12 +211,17 @@ const FormItemChildComponent = ({
 }: FormItemChildComponentProps) => {
   const formContext = useContext(FormContext);
 
-  const animationRef = useRef<number | null>(null);
   const [wasNormalize, setWasNormalize] = useState(false);
 
   const { getFieldsValue } = formContext || {};
 
-  const handleChange = useCallback((e: SyntheticBaseEvent, option?: OptionProps) => {
+  const debouncedSetFieldValue = useRef(
+    debounce((name: string, value: any) => {
+      setFieldValue(name, value, undefined, undefined, true);
+    }, 200)
+  ).current;
+
+  const handleChange = (e: SyntheticBaseEvent, option?: OptionProps) => {
     let rawValue: RuleType | SyntheticBaseEvent = e?.target
       ? e.target.value
       : e;
@@ -218,20 +236,21 @@ const FormItemChildComponent = ({
         e.target.value = rawValue;
         setWasNormalize(prev => !prev);
 
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-        }
+        const timeout = setTimeout(() => {
+          (
+            document.querySelector(`[name='${name}']`) as HTMLInputElement
+          )?.focus();
+
+          clearTimeout(timeout);
+        }, 0);
 
-        animationRef.current = requestAnimationFrame(() => {
-          (document.querySelector(`[name='${name}']`) as HTMLInputElement)?.focus();
-        });
         return;
       }
     }
 
-    setFieldValue(name, rawValue, undefined, undefined, true);
+    debouncedSetFieldValue(name, rawValue);
     onChange?.(e, option);
-  }, [fieldValue, props.value, name]);
+  };
 
   const injectPropsIntoFinalLeaf = (child: ReactElement): ReactElement => {
     if (!isValidElement(child)) {
@@ -259,7 +278,7 @@ const FormItemChildComponent = ({
     if (childProps?.__injected) {
       return child;
     }
-
+    
     return <child.type
       {...props}
       ref={ref}
@@ -284,4 +303,4 @@ const FormItemChildComponent = ({
 
 FormItem.displayName = 'FormItem';
 
-export default FormItem;
+export default FormItem;

package/lib/components/Input/Input.tsx

@@ -119,13 +119,7 @@ const InputComponent = ({
       }
     };
 
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current)
-    }
-
-    animationRef.current = requestAnimationFrame(() => {
-      props.onChange?.(eventWithMaskedValue as RuleType);
-    })
+    props.onChange?.(eventWithMaskedValue as RuleType);
   };
 
   const handleClear = (e: MouseEvent<HTMLSpanElement> & TargetProps) => {

package/package.json

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