x-ui-design 0.6.20 → 0.6.22

package/dist/esm/types/components/Form/Form.d.ts

@@ -1,7 +1,5 @@
-import React, { FC } from 'react';
-import { FormInstance, FormItemProps, FormProps } from '../../types/form';
+import React from 'react';
+import { FormInstance, FormProps } from '../../types/form';
 export declare const FormContext: React.Context<FormInstance | null>;
-declare const Form: FC<FormProps> & {
-    Item: FC<FormItemProps>;
-};
-export default Form;
+declare const _default: React.NamedExoticComponent<FormProps>;
+export default _default;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, createContext, useImperativeHandle, useCallback, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, createContext, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -830,8 +830,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
   }
   function subscribeToFields(names, callback) {
     const fieldCallbacks = names.map(name => subscribeToField(name, () => {
-      const updatedValues = getFieldsValue(names);
-      callback(updatedValues);
+      callback(getFieldsValue(names));
     }));
     return () => {
       fieldCallbacks.forEach(unsubscribe => unsubscribe());
@@ -1070,6 +1069,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
     getFieldsValue,
     getFieldValue,
     setFieldValue,
+    subscribeToField,
     subscribeToFields,
     validateFields
   } = formContext || {};
@@ -1079,11 +1079,17 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
     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(() => {
     if (name && dependencies.length > 0) {
@@ -1187,6 +1193,7 @@ const Form$1 = ({
     }
   };
   const childrenList = useMemo(() => flattenChildren(children), [children]);
+  const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
   useEffect(() => {
     if (onFieldsChange) {
       formInstance.setOnFieldsChange?.(onFieldsChange);
@@ -1201,7 +1208,7 @@ const Form$1 = ({
       formInstance.setScrollToFirstError(scrollToFirstError);
     }
   }, [formInstance, onFieldsChange, onValuesChange, onFinish, scrollToFirstError]);
-  const injectPropsIntoFinalLeaf = child => {
+  const injectPropsIntoFinalLeaf = useCallback(child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1218,23 +1225,34 @@ const Form$1 = ({
       size: childProps.size || rest.size,
       layout: childProps.layout || layout
     }));
-  };
-  console.info(1);
+  }, [rest.size, layout]);
+  console.info({
+    children,
+    form,
+    style,
+    prefixCls,
+    className,
+    initialValues,
+    layout,
+    scrollToFirstError,
+    ...rest
+  });
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React.createElement("form", {
     style: style,
     ref: formRef,
     onSubmit: handleSubmit,
-    className: `${prefixCls} ${className}`
+    className: formClassName
   }, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
 };
 Form$1.Item = FormItem$1;
+var Form$2 = /*#__PURE__*/memo(Form$1);
 
-var Form$2 = /*#__PURE__*/Object.freeze({
+var Form$3 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	FormContext: FormContext,
-	default: Form$1
+	default: Form$2
 });
 
 const useWatch = ({
@@ -1286,7 +1304,7 @@ const RangePicker$2 = dynamic$1(() => Promise.resolve().then(function () { retur
 const TimePicker$2 = dynamic$1(() => Promise.resolve().then(function () { return TimePicker$1; }), {
   ssr: false
 });
-const Form = dynamic$1(() => Promise.resolve().then(function () { return Form$2; }), {
+const Form = dynamic$1(() => Promise.resolve().then(function () { return Form$3; }), {
   ssr: false
 });
 const FormItem = dynamic$1(() => Promise.resolve().then(function () { return Item; }), {