x-ui-design 0.6.21 → 0.6.23

package/lib/components/Form/Form.tsx

@@ -38,9 +38,10 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
   scrollToFirstError = false,
   ...rest
 }) => {
-  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
-  const formInstance = form || internalForm;
+  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange); 
   const formRef = useRef<HTMLFormElement>(null);
+  
+  const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
 
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
@@ -55,6 +56,8 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
 
   const childrenList = useMemo(() => flattenChildren(children), [children]);
 
+  const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
+
   useEffect(() => {
     if (onFieldsChange) {
       formInstance.setOnFieldsChange?.(onFieldsChange);
@@ -110,16 +113,27 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
       size={childProps.size || rest.size}
       layout={childProps.layout || layout}
     />
-  }, [rest.size, layout, flattenChildren]);
+  }, [rest.size, layout]);
+
+  console.info({
+  children,
+  form,
+  style,
+  prefixCls,
+  className,
+  initialValues,
+  layout,
+  scrollToFirstError,
+  ...rest
+});
 
-  console.info(1)
   return (
     <FormContext.Provider value={formInstance}>
       <form
         style={style}
         ref={formRef}
         onSubmit={handleSubmit}
-        className={`${prefixCls} ${className}`}
+        className={formClassName}
       >
         {Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))}
       </form>

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

@@ -160,6 +160,7 @@ const FormItemChildComponent = memo(({
     getFieldsValue,
     getFieldValue,
     setFieldValue,
+    subscribeToField,
     subscribeToFields,
     validateFields
   } = formContext || {};
@@ -167,12 +168,20 @@ const FormItemChildComponent = memo(({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   const { onChange, value } = child.props;
-  const fieldValue = value ?? getFieldValue?.(name) ?? initialValue;
+  const [fieldValue, _setFieldValue] = useState(value ?? getFieldValue?.(name) ?? initialValue);
 
   useEffect(() => {
     if (initialValue) {
       setFieldValue?.(name, initialValue);
     }
+
+    const unsubscribe = subscribeToField?.(name, (value) => {
+      _setFieldValue(value);
+    })
+
+    return () => {
+      unsubscribe?.();
+    }
   }, []);
 
   useEffect(() => {

package/lib/hooks/useForm.ts

@@ -367,8 +367,7 @@ const useForm = (
   ) {
     const fieldCallbacks = names.map(name =>
       subscribeToField(name, () => {
-        const updatedValues = getFieldsValue(names);
-        callback(updatedValues);
+        callback(getFieldsValue(names));
       })
     );
 

package/package.json

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

package/src/app/page.tsx

@@ -1860,7 +1860,9 @@ export default function Home() {
     const [type, setType] = useState('full');
 
     useEffect(() => {
-        form.setFieldsValue({ type: 'partial' })
+        // setInterval(() => {
+        //     form.setFieldsValue({ email: Date.now().toString() })
+        // }, 1000);
     }, [])
 
     const disableDate = useCallback(