x-ui-design 0.6.12 → 0.6.13

package/dist/index.js

@@ -976,6 +976,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,
@@ -1114,12 +1125,14 @@ const FormItemChildComponent = ({
   ...props
 }) => {
   const formContext = React.useContext(FormContext);
-  const animationRef = React.useRef(null);
   const [wasNormalize, setWasNormalize] = React.useState(false);
   const {
     getFieldsValue
   } = formContext || {};
-  const handleChange = React.useCallback((e, option) => {
+  const debouncedSetFieldValue = React.useRef(debounce((name, value) => {
+    setFieldValue(name, value, undefined, undefined, true);
+  }, 200)).current;
+  const handleChange = (e, option) => {
     let rawValue = e?.target ? e.target.value : e;
     if (normalize) {
       const prevValue = fieldValue ?? props.value;
@@ -1128,18 +1141,16 @@ const FormItemChildComponent = ({
       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);
+    debouncedSetFieldValue(name, rawValue);
     onChange?.(e, option);
-  }, [fieldValue, props.value, name]);
+  };
   const injectPropsIntoFinalLeaf = child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
@@ -3008,12 +3019,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) {