x-ui-design 0.6.42 → 0.6.44

package/dist/esm/types/hooks/useForm.d.ts

@@ -1,14 +1,7 @@
 import { RuleTypes } from '../types';
 import type { FieldData, FieldError, FormInstance } from '../types/form';
-declare const useForm: ({ initialValues, onFieldsChange, onValuesChange, scrollToFirstError, onFinish, onFinishFailed }: {
-    initialValues?: Record<string, RuleTypes>;
-    onFieldsChange?: (changedFields: FieldData[]) => void;
-    onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void;
-    scrollToFirstError?: boolean;
-    onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined;
-    onFinishFailed?: (errorInfo: {
-        values: Record<string, RuleTypes>;
-        errorFields: Pick<FieldError, "errors" | "name">[];
-    }) => void;
-}) => FormInstance;
+declare const useForm: (initialValues?: Record<string, RuleTypes>, onFieldsChange?: (changedFields: FieldData[]) => void, onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void, scrollToFirstError?: boolean, onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined, onFinishFailed?: (errorInfo: {
+    values: Record<string, RuleTypes>;
+    errorFields: Pick<FieldError, "errors" | "name">[];
+}) => void) => FormInstance;
 export { useForm };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect, Children, isValidElement, Fragment, Suspense, useContext, useMemo, createContext, useImperativeHandle, useCallback, 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';
 
@@ -598,14 +598,7 @@ const SpinerIcon = () => /*#__PURE__*/React.createElement("svg", {
   d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
 }));
 
-const useForm = ({
-  initialValues = {},
-  onFieldsChange,
-  onValuesChange,
-  scrollToFirstError,
-  onFinish,
-  onFinishFailed
-}) => {
+const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFirstError, onFinish, onFinishFailed) => {
   const touchedFieldsRef = useRef(new Set());
   const rulesRef = useRef({});
   const warningsRef = useRef({});
@@ -627,13 +620,9 @@ const useForm = ({
   });
   const fieldInstancesRef = useRef({});
   const [isReseting, setIsReseting] = useState(false);
-  const [errors, setErrors] = useState({});
-  const errorsRef = useRef(errors);
+  const errorsRef = useRef({});
   const fieldSubscribers = useRef({});
   const formSubscribers = useRef([]);
-  useEffect(() => {
-    errorsRef.current = errors;
-  }, [errors]);
   function getFormFields() {
     return Object.assign({}, ...Object.values(formRef.current));
   }
@@ -675,9 +664,8 @@ const useForm = ({
       touchedFieldsRef.current.add(name);
     }
     if (reset === null) {
-      setErrors({
-        [name]: []
-      });
+      errorsRef.current[name] = [];
+      // setErrors({ [name]: [] });
       return;
     }
     if (!errors?.length) {
@@ -698,9 +686,8 @@ const useForm = ({
         }
       });
     } else {
-      setErrors({
-        [name]: errors
-      });
+      errorsRef.current[name] = errors;
+      // setErrors({ [name]: errors });
     }
   }
   function setFieldsValue(values, reset) {
@@ -776,10 +763,8 @@ const useForm = ({
         }
       }
     }));
-    setErrors(prev => ({
-      ...prev,
-      [name]: fieldErrors
-    }));
+    errorsRef.current[name] = fieldErrors;
+    // setErrors(prev => ({ ...prev, [name]: fieldErrors }));
     warningsRef.current[name] = fieldWarnings;
     return fieldErrors.length === 0;
   }
@@ -796,8 +781,7 @@ const useForm = ({
     if (_scrollToFirstError.current) {
       const firstErrorContent = document.querySelectorAll('.xUi-form-item-has-error')?.[0];
       if (firstErrorContent) {
-        const _firstErrorContent = firstErrorContent.closest('.xUi-form-item');
-        _firstErrorContent?.scrollIntoView({
+        firstErrorContent.closest('.xUi-form-item')?.scrollIntoView({
           behavior: 'smooth'
         });
       }
@@ -811,10 +795,8 @@ const useForm = ({
         formData[name] = initialValues[name];
         touchedFieldsRef.current.delete(name);
         delete warningsRef.current[name];
-        setErrors(prev => ({
-          ...prev,
-          [name]: []
-        }));
+        errorsRef.current[name] = [];
+        // setErrors(prev => ({ ...prev, [name]: [] }));
         setFieldValue(name, initialValues[name], undefined, showError);
       });
     } else {
@@ -3717,38 +3699,6 @@ const SelectComponent = ({
       setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
     }
   };
-  const dataRender = (() => {
-    const options = filteredOptions.map(({
-      children,
-      className = '',
-      ...props
-    }, index) => {
-      const isSelected = hasMode ? selected.includes(props.value) : props.value === selected;
-      return /*#__PURE__*/React.createElement(Option, _extends({
-        key: `${props.value}_${index}`
-      }, props, {
-        selected: isSelected,
-        className: clsx([className, {
-          [`${prefixCls}-focused`]: hasMode ? isSelected : props.value === selected,
-          [`${prefixCls}-disabled`]: maxCount && hasMode && !isSelected ? selected.length >= maxCount : false
-        }]),
-        onClick: e => {
-          if (props.disabled) {
-            return;
-          }
-          handleSelect(e, props.value, {
-            children,
-            className,
-            ...props
-          });
-        },
-        "data-value": props.value
-      }), children || props.label || props.value, menuItemSelectedIcon && hasMode && isSelected && /*#__PURE__*/React.createElement("span", {
-        className: `${prefixCls}-selected-icon`
-      }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
-    });
-    return options;
-  })();
   const dropdownContent = !loading && open && isOpen && /*#__PURE__*/React.createElement("div", {
     className: clsx([`${prefixCls}-dropdown`, {
       [placement]: placement,
@@ -3790,7 +3740,35 @@ const SelectComponent = ({
       handleSelect(e, searchQuery);
     },
     "data-value": searchQuery
-  }, searchQuery), filteredOptions.length ? dataRender : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null)));
+  }, searchQuery), filteredOptions.length ? filteredOptions.map(({
+    children,
+    className = '',
+    ...props
+  }, index) => {
+    const isSelected = hasMode ? selected.includes(props.value) : props.value === selected;
+    return /*#__PURE__*/React.createElement(Option, _extends({
+      key: `${props.value}_${index}`
+    }, props, {
+      selected: isSelected,
+      className: clsx([className, {
+        [`${prefixCls}-focused`]: hasMode ? isSelected : props.value === selected,
+        [`${prefixCls}-disabled`]: maxCount && hasMode && !isSelected ? selected.length >= maxCount : false
+      }]),
+      onClick: e => {
+        if (props.disabled) {
+          return;
+        }
+        handleSelect(e, props.value, {
+          children,
+          className,
+          ...props
+        });
+      },
+      "data-value": props.value
+    }), children || props.label || props.value, menuItemSelectedIcon && hasMode && isSelected && /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selected-icon`
+    }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
+  }) : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null)));
   const selectedOption = (() => {
     const option = extractedOptions.find(e => e.value === selected || e.label === selected || e.children === selected) || selected;
     return option?.children || option?.label || option?.value || null;