x-ui-design 0.3.62 → 0.3.64

package/dist/esm/types/types/form.d.ts

@@ -26,7 +26,7 @@ export interface FieldError {
     name: string;
     errors: string[];
 }
-type FormLayoutTypes = 'horizontal' | 'vertical' | 'inline';
+export type FormLayoutTypes = 'horizontal' | 'vertical' | 'inline';
 export type FormProps = DefaultProps & {
     colon?: boolean;
     name?: string;
@@ -67,7 +67,7 @@ export type FormItemProps = DefaultProps & {
     feedbackIcons?: boolean;
 };
 export interface FormItemChildComponentProps {
-    child: React.ReactElement;
+    child: ReactElement;
     name: string;
     error: boolean;
     fieldValue: RuleTypes;
@@ -103,4 +103,3 @@ export interface FormInstance {
     getFieldInstance: (fieldName: string) => FieldInstancesRef;
     isReseting: boolean;
 }
-export {};

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React$1, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, createContext, forwardRef, useImperativeHandle, useCallback } from 'react';
+import React$1, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, cloneElement, createContext, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -820,16 +820,6 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange) => {
   return formInstance;
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 const prefixClsForm = 'xUi-form';
 const prefixClsFormItem = 'xUi-form-item';
 const prefixClsEmpty = 'xUi-empty';
@@ -845,6 +835,16 @@ const prefixClsTimePicker = 'xUi-timepicker';
 const prefixClsButton = 'xUi-button';
 const prefixClsSkeleton = 'xUi-skeleton';
 
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
 const parseValue = value => {
   if (value === 'true') {
     return true;
@@ -887,7 +887,7 @@ function flattenChildren(children) {
   const result = [];
   Children.forEach(children, child => {
     if (! /*#__PURE__*/isValidElement(child)) return;
-    if (child.type === 'div' || child.type === Fragment || child.type === Suspense) {
+    if (child.type === Fragment || child.type === Suspense) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       result.push(...flattenChildren(child.props.children));
@@ -973,7 +973,7 @@ const FormItem$1 = ({
   }, label || name, ":", isRequired && /*#__PURE__*/React$1.createElement("span", {
     className: `${prefixCls}-required`
   }, "*")), Children.map(childrenList, (child, key) => {
-    if (/*#__PURE__*/isValidElement(child) && child.type !== Fragment) {
+    if (/*#__PURE__*/isValidElement(child)) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       const {
@@ -982,23 +982,23 @@ const FormItem$1 = ({
         ...childProps
       } = child.props;
       const fieldValue = getFieldValue(name) ?? initialValue;
-      return /*#__PURE__*/React$1.createElement(FormItemChildComponent, _extends({}, childProps, {
+      return /*#__PURE__*/React$1.createElement(FormItemChildComponent, _extends({}, props, {
+        key: `${key}_${isReseting}`,
         name: name,
         child: child,
         value: value,
+        error: !!errorMessage,
         fieldValue: fieldValue,
-        noStyle: props.noStyle,
-        normalize: props.normalize,
-        key: `${key}_${isReseting}`,
-        error: Boolean(errorMessage),
         setFieldValue: setFieldValue,
-        feedbackIcons: feedbackIcons
+        feedbackIcons: feedbackIcons,
+        onChange: onChange,
+        noStyle: props.noStyle,
+        normalize: props.normalize
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         ,
-        size: childProps.size || props.size,
-        onChange: onChange
-      }, childProps));
+        size: childProps.size || props.size
+      }));
     }
     return child;
   }), !props.noStyle && errorMessage && /*#__PURE__*/React$1.createElement("span", {
@@ -1044,19 +1044,38 @@ const FormItemChildComponent = ({
     setFieldValue(name, rawValue);
     onChange?.(e, option);
   };
-  console.log({
-    name,
-    child: child.type
-  });
-  return /*#__PURE__*/React$1.createElement(child.type, _extends({}, props, {
-    name: name,
-    onChange: handleChange
-  }, error ? {
-    error
-  } : {}, {
-    key: `${name}_${wasNormalize}`,
-    value: fieldValue ?? props.value
-  }));
+  const injectPropsIntoFinalLeaf = child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    const childProps = child.props;
+    const isWrapper = typeof child.type === 'string' && ['div', 'span', 'label'].includes(child.type);
+    if (isWrapper) {
+      return /*#__PURE__*/cloneElement(child, {
+        ...childProps,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        children: Children.map(childProps.children, injectPropsIntoFinalLeaf)
+      });
+    }
+    if (childProps?.__injected) {
+      return child;
+    }
+    return /*#__PURE__*/cloneElement(child, {
+      ...props,
+      name,
+      onChange: handleChange,
+      key: `${name}_${wasNormalize}`,
+      value: fieldValue ?? props.value,
+      ...(error ? {
+        error
+      } : {}),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      __injected: true
+    });
+  };
+  return injectPropsIntoFinalLeaf(child);
 };
 FormItem$1.displayName = 'FormItem';
 
@@ -1104,6 +1123,31 @@ const Form$1 = ({
       formInstance.onValuesChange = onValuesChange;
     }
   }, [formInstance, onFieldsChange, onValuesChange]);
+  const injectPropsIntoFinalLeaf = child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    const childProps = child.props;
+    const isWrapper = typeof child.type === 'string' && ['div', 'span', 'label'].includes(child.type);
+    if (isWrapper) {
+      return /*#__PURE__*/cloneElement(child, {
+        ...childProps,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        children: Children.map(childProps.children, injectPropsIntoFinalLeaf)
+      });
+    }
+    if (childProps?.__injected) {
+      return child;
+    }
+    return /*#__PURE__*/cloneElement(child, {
+      ...childProps,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      size: childProps.size || rest.size,
+      layout: childProps.layout || layout
+    });
+  };
   return /*#__PURE__*/React$1.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React$1.createElement("form", {
@@ -1111,21 +1155,7 @@ const Form$1 = ({
     ref: formRef,
     onSubmit: handleSubmit,
     className: `${prefixCls} ${className}`
-  }, Children.map(childrenList, child => {
-    if (/*#__PURE__*/isValidElement(child) && child.type !== Fragment) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      const {
-        ...childProps
-      } = child.props;
-      return /*#__PURE__*/React$1.createElement(child.type, _extends({}, childProps, {
-        child: child,
-        size: childProps.size || rest.size,
-        layout: childProps.layout || layout
-      }));
-    }
-    return child;
-  })));
+  }, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
 };
 Form$1.Item = FormItem$1;