@uni-sw/u-design 2.0.4

package/es/components/UForm/Form.js

@@ -0,0 +1,318 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { __rest } from "tslib";
+import classNames from 'classnames';
+import FieldForm, { List, useWatch } from 'rc-field-form';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ConfigContext } from "../UConfigProvider";
+import DisabledContext, { DisabledContextProvider } from "../UConfigProvider/DisabledContext";
+import { CustomerContextProvider } from "../UConfigProvider/CustomerContext";
+import SizeContext, { SizeContextProvider } from "../UConfigProvider/SizeContext";
+import { FormContext } from "./context";
+import useForm from "./hooks/useForm";
+import { getTheme, CUSTOM_PREFIX } from "../../globalVarious";
+import ResizeObserver from 'rc-resize-observer';
+var InternalForm = function InternalForm(props, ref) {
+  var contextSize = React.useContext(SizeContext);
+  var contextDisabled = React.useContext(DisabledContext);
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction,
+    contextForm = _React$useContext.form;
+  var theme = props.theme,
+    customizePrefixCls = props.prefixCls,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? contextSize : _props$size,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? contextDisabled : _props$disabled,
+    form = props.form,
+    colon = props.colon,
+    labelAlign = props.labelAlign,
+    labelWrap = props.labelWrap,
+    labelCol = props.labelCol,
+    wrapperCol = props.wrapperCol,
+    hideRequiredMark = props.hideRequiredMark,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
+    scrollToFirstError = props.scrollToFirstError,
+    requiredMark = props.requiredMark,
+    onlyShow = props.onlyShow,
+    onFinishFailed = props.onFinishFailed,
+    name = props.name,
+    grid = props.grid,
+    style = props.style,
+    children = props.children,
+    itemAuto = props.itemAuto,
+    restFormProps = __rest(props, ["theme", "prefixCls", "className", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onlyShow", "onFinishFailed", "name", "grid", "style", "children", "itemAuto"]);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    formClient = _React$useState2[0],
+    setFormClient = _React$useState2[1];
+  /**
+   * 水平布局时  获取实际列数、label宽度、输入框宽度
+   * @param columnNum  列数
+   * @param autoColumn 是否自使用列数
+   * @param labelSize label宽度
+   * @param formWidth 容器宽度
+   * @param minValue 输入框最小宽度
+   * @param maxValue 输入框最大宽度
+   */
+  var _getRealPx = function getRealPx(columnNum, autoColumn, labelSize, formWidth, minValue, maxValue) {
+    var labelPx = 0;
+    if (typeof labelSize === 'number') {
+      labelPx = labelSize * columnNum;
+    } else {
+      labelPx = new Array(columnNum).fill(1).reduce(function (a, b, i) {
+        return a + (labelSize[i] || 85);
+      }, 0);
+    }
+    var inputPx = (formWidth - 40 * (columnNum - 1) - labelPx) / columnNum;
+    //最小label宽度
+    var minLabel = typeof labelSize === 'number' ? labelSize : Math.min.apply(Math, _toConsumableArray(labelSize.slice(0, columnNum)));
+    /** 输入框宽不够最小宽度 则减少一列 */
+    if (inputPx < minValue) {
+      /** 若列数不需要自适用 则缩短每列宽度 */
+      if (!autoColumn) {
+        /** 若输入框的宽度小于label宽度  则label和输入框宽度同时缩短 */
+        if (inputPx < minLabel) {
+          /** 每个输入框或label需要减的宽度 */
+          var deleteWidth = (labelPx + 40 * (columnNum - 1) + minLabel * columnNum - formWidth) / columnNum / 2;
+          return [columnNum, minLabel - deleteWidth, deleteWidth];
+        }
+        return [columnNum, inputPx];
+      }
+      if (columnNum > 1) {
+        return _getRealPx(columnNum - 1, autoColumn, labelSize, formWidth, minValue, maxValue);
+      }
+      return [1, inputPx];
+    }
+    /** 大于1列且输入框宽大于最大宽度 则使用最大输入框宽度设置 */
+    var ipx = inputPx > maxValue && columnNum > 1 ? maxValue : inputPx;
+    /** 若间距大于列 则需要设置最大宽度 */
+    var needMaxWidth = (formWidth - labelPx - ipx * columnNum) / (columnNum - 1) > minLabel + ipx;
+    /** 设置最大宽度 (整个label宽+输入框框宽+间距（间距最大是单列宽度的60%）)  以防中间间距过大 */
+    return [columnNum, ipx, 0, needMaxWidth ? labelPx + ipx * columnNum + (minLabel + ipx) * (columnNum - 1) * 0.6 : 0];
+  };
+  /**
+   * 水平布局时  获取实际列数、grid布局样式
+   * @param columnNum  列数
+   * @param autoColumn 是否自使用列数
+   * @param formWidth 容器宽度
+   * @param minValue 输入框最小宽度
+   * @param maxValue 输入框最大宽度
+   */
+  var _getVerticalInfo = function getVerticalInfo(columnNum, autoColumn, formWidth, minValue, maxValue) {
+    var inputPx = (formClient.width - 40 * (columnNum - 1)) / columnNum;
+    /** 输入框宽不够最小宽度 则减少一列 */
+    if (inputPx < minValue) {
+      /** 若列数不需要自适用 则缩短每列宽度 */
+      if (!autoColumn) {
+        return [columnNum, {
+          maxWidth: 'none',
+          gridTemplateColumns: "repeat(".concat(columnNum, ", 1fr)")
+        }];
+      }
+      if (columnNum > 1) {
+        return _getVerticalInfo(columnNum - 1, autoColumn, formWidth, minValue, maxValue);
+      }
+      return [1, {
+        maxWidth: 'none',
+        gridTemplateColumns: 'repeat(1, 1fr)'
+      }];
+    }
+    /** 大于1列且输入框宽大于最大宽度 则使用最大输入框宽度设置 */
+    var ipx = inputPx > maxValue && columnNum > 1 ? maxValue : inputPx;
+    /** 若间距大于列 则需要设置最大宽度 */
+    var needMaxWidth = (formWidth - ipx * columnNum) / (columnNum - 1) > ipx;
+    /** 设置最大宽度 (输入框框宽+间距（间距最大是单列宽度的60%）)  以防中间间距过大 */
+    var maxWidth = needMaxWidth ? ipx * columnNum + ipx * (columnNum - 1) * 0.6 : 'none';
+    return [columnNum, {
+      maxWidth: maxWidth,
+      gridTemplateColumns: "repeat(".concat(columnNum, ", minmax(").concat(minValue, "px, ").concat(maxValue, "px))")
+    }];
+  };
+  /**
+   * grid布局相关信息
+   */
+  var gridInfo = React.useMemo(function () {
+    if (!grid || !formClient) {
+      return;
+    }
+    var _ref = (typeof grid === 'boolean' ? {} : grid) || {},
+      _ref$maxColumnNum = _ref.maxColumnNum,
+      maxColumnNum = _ref$maxColumnNum === void 0 ? 4 : _ref$maxColumnNum,
+      _ref$labelSize = _ref.labelSize,
+      labelSize = _ref$labelSize === void 0 ? 85 : _ref$labelSize,
+      _ref$valueSize = _ref.valueSize,
+      valueSize = _ref$valueSize === void 0 ? {} : _ref$valueSize,
+      _ref$autoColumn = _ref.autoColumn,
+      autoColumn = _ref$autoColumn === void 0 ? true : _ref$autoColumn;
+    var _ref2 = valueSize || {},
+      _ref2$min = _ref2.min,
+      min = _ref2$min === void 0 ? 160 : _ref2$min,
+      _ref2$max = _ref2.max,
+      max = _ref2$max === void 0 ? 210 : _ref2$max;
+    if (layout === 'vertical') {
+      var _getVerticalInfo2 = _getVerticalInfo(maxColumnNum, autoColumn, formClient.width, min, max),
+        _getVerticalInfo3 = _slicedToArray(_getVerticalInfo2, 2),
+        _columnNum = _getVerticalInfo3[0],
+        gridTemplateColumns = _getVerticalInfo3[1];
+      return {
+        inputPx: 0,
+        labelPx: 0,
+        columnNum: _columnNum,
+        style: {
+          gridTemplateColumns: gridTemplateColumns
+        }
+      };
+    }
+    var _getRealPx2 = _getRealPx(maxColumnNum, autoColumn, labelSize, formClient.width, min, max),
+      _getRealPx3 = _slicedToArray(_getRealPx2, 4),
+      columnNum = _getRealPx3[0],
+      inputPx = _getRealPx3[1],
+      deleteWidth = _getRealPx3[2],
+      maxWidth = _getRealPx3[3];
+    if (typeof labelSize === 'number') {
+      return {
+        inputPx: inputPx,
+        labelPx: labelSize - (deleteWidth || 0),
+        columnNum: columnNum,
+        style: {
+          maxWidth: maxWidth || 'none',
+          gridTemplateColumns: "repeat(".concat(columnNum, ", ").concat(labelSize - (deleteWidth || 0) + inputPx, "px)")
+        }
+      };
+    }
+    var ary = new Array(columnNum).fill(1);
+    return {
+      inputPx: inputPx,
+      labelPx: ary.map(function (_, i) {
+        return (labelSize[i] || 85) - (deleteWidth || 0);
+      }),
+      columnNum: columnNum,
+      style: {
+        maxWidth: maxWidth || 'none',
+        gridTemplateColumns: ary.map(function (_, i) {
+          return "".concat((labelSize[i] || 85) - (deleteWidth || 0) + inputPx, "px");
+        }).join(' ')
+      }
+    };
+  }, [grid, formClient, layout]);
+  var mergedRequiredMark = useMemo(function () {
+    if (requiredMark !== undefined) {
+      return requiredMark;
+    }
+    if (contextForm && contextForm.requiredMark !== undefined) {
+      return contextForm.requiredMark;
+    }
+    if (hideRequiredMark) {
+      return false;
+    }
+    return true;
+  }, [hideRequiredMark, requiredMark, contextForm]);
+  var mergedColon = colon !== null && colon !== void 0 ? colon : contextForm === null || contextForm === void 0 ? void 0 : contextForm.colon;
+  var prefixCls = getPrefixCls('form', customizePrefixCls);
+  var formClassName = classNames("".concat(CUSTOM_PREFIX, "-form"), _defineProperty({}, "".concat(CUSTOM_PREFIX, "-form-theme-").concat(theme || getTheme()), theme || getTheme()), prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(layout), true), "".concat(prefixCls, "-hide-required-mark"), mergedRequiredMark === false), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(size), size), "".concat(prefixCls, "-grid"), grid), "".concat(prefixCls, "-auto"), grid || itemAuto), _defineProperty({}, className, !grid));
+  var _useForm = useForm(form),
+    _useForm2 = _slicedToArray(_useForm, 1),
+    wrapForm = _useForm2[0];
+  var __INTERNAL__ = wrapForm.__INTERNAL__;
+  __INTERNAL__.name = name;
+  var formContextValue = useMemo(function () {
+    return {
+      /** grid布局  默认标签文本对齐方式left */
+      labelAlign: grid && !labelAlign ? 'left' : labelAlign,
+      name: name,
+      labelCol: labelCol,
+      labelWrap: labelWrap,
+      wrapperCol: wrapperCol,
+      vertical: layout === 'vertical',
+      colon: mergedColon,
+      requiredMark: mergedRequiredMark,
+      itemRef: __INTERNAL__.itemRef,
+      form: wrapForm,
+      gridInfo: gridInfo,
+      formClient: formClient,
+      itemAuto: itemAuto
+    };
+  }, [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm, gridInfo, formClient, itemAuto]);
+  React.useImperativeHandle(ref, function () {
+    return wrapForm;
+  });
+  var onInternalFinishFailed = function onInternalFinishFailed(errorInfo) {
+    onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errorInfo);
+    var defaultScrollToFirstError = {
+      block: 'nearest'
+    };
+    if (scrollToFirstError && errorInfo.errorFields.length) {
+      if (_typeof(scrollToFirstError) === 'object') {
+        defaultScrollToFirstError = scrollToFirstError;
+      }
+      wrapForm.scrollToField(errorInfo.errorFields[0].name, defaultScrollToFirstError);
+    }
+  };
+  /**
+   * 读取容器宽度
+   */
+  var _setWidth = function _setWidth(a, dom) {
+    if (!grid) {
+      return;
+    }
+    var clientInfo = dom === null || dom === void 0 ? void 0 : dom.getBoundingClientRect();
+    console.log(clientInfo, 'clientInfo,clientInfo,clientInfo');
+    setFormClient(clientInfo);
+  };
+  return /*#__PURE__*/React.createElement(DisabledContextProvider, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(SizeContextProvider, {
+    size: size
+  }, /*#__PURE__*/React.createElement(CustomerContextProvider, {
+    customer: {
+      onlyShow: onlyShow
+    }
+  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: formContextValue
+  }, !!grid ? /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: _setWidth
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, /*#__PURE__*/React.createElement(FieldForm, Object.assign({
+    id: name
+  }, restFormProps, {
+    name: name,
+    onFinishFailed: onInternalFinishFailed,
+    form: wrapForm,
+    className: formClassName,
+    style: gridInfo === null || gridInfo === void 0 ? void 0 : gridInfo.style,
+    /** grid布局 控件宽度等样式获取后再渲染子表单  避免dom渲染闪屏 */
+    children: gridInfo ? children : null
+  })))) : /*#__PURE__*/React.createElement(FieldForm, Object.assign({
+    id: name
+  }, restFormProps, {
+    name: name,
+    onFinishFailed: onInternalFinishFailed,
+    form: wrapForm,
+    className: formClassName,
+    style: style,
+    children: children
+  }))))));
+};
+var Form = /*#__PURE__*/React.forwardRef(InternalForm);
+export { useForm, List, useWatch };
+export default Form;

package/es/components/UForm/FormItem/ItemHolder.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Meta } from 'rc-field-form/lib/interface';
+import type { ReportMetaChange } from '../context';
+import type { FormItemProps } from '.';
+export interface ItemHolderProps extends FormItemProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    errors: React.ReactNode[];
+    warnings: React.ReactNode[];
+    meta: Meta;
+    children?: React.ReactNode;
+    fieldId?: string;
+    isRequired?: boolean;
+    onSubItemMetaChange: ReportMetaChange;
+    fillColumn?: boolean | number;
+    maxValuePx?: number;
+    search?: boolean;
+}
+export default function ItemHolder(props: ItemHolderProps): JSX.Element;

package/es/components/UForm/FormItem/ItemHolder.js

@@ -0,0 +1,246 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { __rest } from "tslib";
+import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import classNames from 'classnames';
+import * as React from 'react';
+import omit from 'rc-util/lib/omit';
+import { Row } from "../../UGrid";
+import FormItemLabel from "../FormItemLabel";
+import FormItemInput from "../FormItemInput";
+import { FormContext, FormItemInputContext, NoStyleItemContext } from "../context";
+import useDebounce from "../hooks/useDebounce";
+var iconMap = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined
+};
+export default function ItemHolder(props) {
+  var prefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    help = props.help,
+    errors = props.errors,
+    warnings = props.warnings,
+    validateStatus = props.validateStatus,
+    meta = props.meta,
+    hasFeedback = props.hasFeedback,
+    hidden = props.hidden,
+    children = props.children,
+    fieldId = props.fieldId,
+    isRequired = props.isRequired,
+    onSubItemMetaChange = props.onSubItemMetaChange,
+    fillColumn = props.fillColumn,
+    maxValuePx = props.maxValuePx,
+    search = props.search,
+    restProps = __rest(props, ["prefixCls", "className", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "isRequired", "onSubItemMetaChange", "fillColumn", "maxValuePx", "search"]);
+  var itemPrefixCls = "".concat(prefixCls, "-item");
+  var _React$useContext = React.useContext(FormContext),
+    requiredMark = _React$useContext.requiredMark,
+    gridInfo = _React$useContext.gridInfo,
+    formClient = _React$useContext.formClient;
+  var formItemInputContext = React.useContext(FormItemInputContext);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    labelWidth = _React$useState2[0],
+    setLabelWidth = _React$useState2[1];
+  // ======================== Margin ========================
+  var itemRef = React.useRef(null);
+  var debounceErrors = useDebounce(errors);
+  var debounceWarnings = useDebounce(warnings);
+  var hasHelp = help !== undefined && help !== null;
+  var hasError = !!(hasHelp || errors.length || warnings.length);
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    marginBottom = _React$useState4[0],
+    setMarginBottom = _React$useState4[1];
+  /** 根据formItemInputContext 是否有值  判断是否是Item内嵌的Item */
+  var inItem = formItemInputContext && Object.keys(formItemInputContext).length > 0;
+  /**
+   * 获取
+   */
+  var _React$useMemo = React.useMemo(function () {
+      if (!gridInfo) {
+        return {};
+      }
+      if (search) {
+        return {
+          valueStyle: {
+            minWidth: 'auto',
+            maxWidth: 'none'
+          },
+          gridItemStyle: {
+            gridColumnStart: gridInfo.columnNum
+          },
+          gridClassName: "".concat(itemPrefixCls, "-search")
+        };
+      }
+      if (!fillColumn) {
+        if (inItem || !gridInfo.inputPx) {
+          return {};
+        }
+        /** 只有最外层item的控件容器设置 */
+        return {
+          valueStyle: {
+            minWidth: gridInfo.inputPx,
+            maxWidth: gridInfo.inputPx
+          }
+        };
+      }
+      var columnNum = typeof fillColumn === 'number' && fillColumn < gridInfo.columnNum ? fillColumn : gridInfo.columnNum || 1;
+      /** 若子表单单独设置了最大控件宽度  但本身表单的控件宽带就满足  则此表单只需占用一列即可 */
+      if (maxValuePx && gridInfo.inputPx >= maxValuePx) {
+        columnNum = 1;
+      }
+      if (columnNum <= 1) {
+        if (inItem || !gridInfo.inputPx) {
+          return {};
+        }
+        /** 只有最外层item的控件容器设置 */
+        return {
+          valueStyle: {
+            minWidth: gridInfo.inputPx,
+            maxWidth: gridInfo.inputPx
+          }
+        };
+      }
+      var lableWidth = gridInfo.labelPx instanceof Array ? gridInfo.labelPx[0] : gridInfo.labelPx;
+      return {
+        lableWidth: lableWidth,
+        valueStyle: {
+          minWidth: maxValuePx ? "".concat(maxValuePx, "px") : 'auto',
+          maxWidth: maxValuePx ? "".concat(maxValuePx, "px") : 'none'
+        },
+        gridItemStyle: {
+          gridColumnStart: "span ".concat(columnNum)
+        },
+        gridClassName: "".concat(itemPrefixCls, "-grid")
+      };
+    }, [fillColumn, gridInfo, maxValuePx, search, inItem]),
+    gridClassName = _React$useMemo.gridClassName,
+    gridItemStyle = _React$useMemo.gridItemStyle,
+    lableWidth = _React$useMemo.lableWidth,
+    valueStyle = _React$useMemo.valueStyle;
+  /**
+   * 根据各类label宽度、输入框宽度、当前子表单相对父表单的左侧间距 计算当前表单是第几列
+   */
+  var _getIndex2 = function _getIndex(labelPx, inputPx, left, index) {
+    var other = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var width = (labelPx[index] || 85) + inputPx + other;
+    if (left < width) {
+      return index;
+    }
+    return _getIndex2(labelPx, inputPx, left, index + 1, width);
+  };
+  /**
+   * 确认当前子表单列数后  设置对应列的label宽度
+   */
+  var _setLabelWidth = function _setLabelWidth() {
+    if (!formClient || !itemRef.current || !gridInfo) {
+      return;
+    }
+    var labelPx = gridInfo.labelPx,
+      inputPx = gridInfo.inputPx;
+    if (!(labelPx instanceof Array) || new Set(labelPx).size <= 1) {
+      setLabelWidth(lableWidth);
+      return;
+    }
+    var index = _getIndex2(labelPx, inputPx, itemRef.current.offsetLeft - formClient.left, 0) || 0;
+    setLabelWidth(labelPx[index]);
+  };
+  React.useLayoutEffect(function () {
+    if (!lableWidth) {
+      return;
+    }
+    _setLabelWidth();
+  }, [lableWidth, gridInfo, formClient]);
+  useLayoutEffect(function () {
+    if (hasError && itemRef.current) {
+      var itemStyle = getComputedStyle(itemRef.current);
+      setMarginBottom(parseInt(itemStyle.marginBottom, 10));
+    }
+  }, [hasError]);
+  var onErrorVisibleChanged = function onErrorVisibleChanged(nextVisible) {
+    if (!nextVisible) {
+      setMarginBottom(null);
+    }
+  };
+  // ======================== Status ========================
+  var mergedValidateStatus = '';
+  if (validateStatus !== undefined) {
+    mergedValidateStatus = validateStatus;
+  } else if (meta.validating) {
+    mergedValidateStatus = 'validating';
+  } else if (debounceErrors.length) {
+    mergedValidateStatus = 'error';
+  } else if (debounceWarnings.length) {
+    mergedValidateStatus = 'warning';
+  } else if (meta.touched) {
+    mergedValidateStatus = 'success';
+  }
+  var formItemStatusContext = React.useMemo(function () {
+    var feedbackIcon;
+    if (hasFeedback) {
+      var IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
+      feedbackIcon = IconNode ? (/*#__PURE__*/React.createElement("span", {
+        className: classNames("".concat(itemPrefixCls, "-feedback-icon"), "".concat(itemPrefixCls, "-feedback-icon-").concat(mergedValidateStatus))
+      }, /*#__PURE__*/React.createElement(IconNode, null))) : null;
+    }
+    return {
+      status: mergedValidateStatus,
+      hasFeedback: hasFeedback,
+      feedbackIcon: feedbackIcon,
+      isFormItemInput: true
+    };
+  }, [mergedValidateStatus, hasFeedback]);
+  // ======================== Render ========================
+  var itemClassName = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, itemPrefixCls, true), "".concat(gridClassName), !!gridClassName), "".concat(itemPrefixCls, "-with-help"), hasHelp || debounceErrors.length || debounceWarnings.length), "".concat(className), !!className), "".concat(itemPrefixCls, "-has-feedback"), mergedValidateStatus && hasFeedback), "".concat(itemPrefixCls, "-has-success"), mergedValidateStatus === 'success'), "".concat(itemPrefixCls, "-has-warning"), mergedValidateStatus === 'warning'), "".concat(itemPrefixCls, "-has-error"), mergedValidateStatus === 'error'), "".concat(itemPrefixCls, "-is-validating"), mergedValidateStatus === 'validating'), "".concat(itemPrefixCls, "-hidden"), hidden);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(itemClassName),
+    style: Object.assign(Object.assign({}, style), gridItemStyle),
+    ref: itemRef
+  }, /*#__PURE__*/React.createElement(Row, Object.assign({
+    className: "".concat(itemPrefixCls, "-row")
+  }, omit(restProps, ['_internalItemRender', 'colon', 'dependencies', 'extra', 'fieldKey', 'getValueFromEvent', 'getValueProps', 'htmlFor', 'id', 'initialValue', 'isListField', 'label', 'labelAlign', 'labelCol', 'labelWrap', 'messageVariables', 'name', 'normalize', 'noStyle', 'preserve', 'required', 'requiredMark', 'rules', 'shouldUpdate', 'trigger', 'tooltip', 'validateFirst', 'validateTrigger', 'valuePropName', 'wrapperCol'])), /*#__PURE__*/React.createElement(FormItemLabel, Object.assign({
+    htmlFor: fieldId,
+    required: isRequired,
+    requiredMark: requiredMark
+  }, props, {
+    prefixCls: prefixCls,
+    style: gridClassName && {
+      minWidth: labelWidth,
+      maxWidth: labelWidth
+    }
+  })), /*#__PURE__*/React.createElement(FormItemInput, Object.assign({}, props, meta, {
+    errors: debounceErrors,
+    warnings: debounceWarnings,
+    prefixCls: prefixCls,
+    status: mergedValidateStatus,
+    help: help,
+    marginBottom: marginBottom,
+    onErrorVisibleChanged: onErrorVisibleChanged,
+    style: valueStyle
+  }), /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
+    value: onSubItemMetaChange
+  }, /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
+    value: formItemStatusContext
+  }, children)))), !!marginBottom && (/*#__PURE__*/React.createElement("div", {
+    className: "".concat(itemPrefixCls, "-margin-offset"),
+    style: {
+      marginBottom: -marginBottom
+    }
+  })));
+}

package/es/components/UForm/FormItem/index.d.ts

@@ -0,0 +1,42 @@
+import type { FormInstance } from 'rc-field-form';
+import type { FieldProps } from 'rc-field-form/lib/Field';
+import * as React from 'react';
+import useFormItemStatus from '../hooks/useFormItemStatus';
+import type { FormItemInputProps } from '../FormItemInput';
+import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel';
+declare const ValidateStatuses: ["success", "warning", "error", "validating", ""];
+export type ValidateStatus = typeof ValidateStatuses[number];
+type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
+type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
+type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
+export interface FormItemProps<Values = any> extends FormItemLabelProps, FormItemInputProps, RcFieldProps<Values> {
+    prefixCls?: string;
+    noStyle?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: ChildrenType<Values>;
+    id?: string;
+    hasFeedback?: boolean;
+    validateStatus?: ValidateStatus;
+    required?: boolean;
+    hidden?: boolean | ((fields: any) => boolean);
+    initialValue?: any;
+    messageVariables?: Record<string, string>;
+    tooltip?: LabelTooltipType;
+    /** @deprecated No need anymore */
+    fieldKey?: React.Key | React.Key[];
+    disabled?: boolean | ((fields: any) => boolean);
+    hasRule?: boolean | ((fields: any) => boolean);
+    onlyShow?: boolean;
+    fields?: any;
+    fillColumn?: boolean | number;
+    maxValuePx?: number;
+    search?: boolean;
+}
+declare function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement;
+type InternalFormItemType = typeof InternalFormItem;
+type CompoundedComponent = InternalFormItemType & {
+    useStatus: typeof useFormItemStatus;
+};
+declare const FormItem: CompoundedComponent;
+export default FormItem;