ItemHolder.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import classNames from 'classnames';
  12. import isVisible from "rc-util/es/Dom/isVisible";
  13. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  14. import omit from "rc-util/es/omit";
  15. import { Row } from '../../grid';
  16. import { FormContext, NoStyleItemContext } from '../context';
  17. import FormItemInput from '../FormItemInput';
  18. import FormItemLabel from '../FormItemLabel';
  19. import useDebounce from '../hooks/useDebounce';
  20. import { getStatus } from '../util';
  21. import StatusProvider from './StatusProvider';
  22. export default function ItemHolder(props) {
  23. const {
  24. prefixCls,
  25. className,
  26. rootClassName,
  27. style,
  28. help,
  29. errors,
  30. warnings,
  31. validateStatus,
  32. meta,
  33. hasFeedback,
  34. hidden,
  35. children,
  36. fieldId,
  37. required,
  38. isRequired,
  39. onSubItemMetaChange,
  40. layout: propsLayout,
  41. name
  42. } = props,
  43. restProps = __rest(props, ["prefixCls", "className", "rootClassName", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "required", "isRequired", "onSubItemMetaChange", "layout", "name"]);
  44. const itemPrefixCls = `${prefixCls}-item`;
  45. const {
  46. requiredMark,
  47. layout: formLayout
  48. } = React.useContext(FormContext);
  49. const layout = propsLayout || formLayout;
  50. const vertical = layout === 'vertical';
  51. // ======================== Margin ========================
  52. const itemRef = React.useRef(null);
  53. const debounceErrors = useDebounce(errors);
  54. const debounceWarnings = useDebounce(warnings);
  55. const hasHelp = help !== undefined && help !== null;
  56. const hasError = !!(hasHelp || errors.length || warnings.length);
  57. const isOnScreen = !!itemRef.current && isVisible(itemRef.current);
  58. const [marginBottom, setMarginBottom] = React.useState(null);
  59. useLayoutEffect(() => {
  60. if (hasError && itemRef.current) {
  61. // The element must be part of the DOMTree to use getComputedStyle
  62. // https://stackoverflow.com/questions/35360711/getcomputedstyle-returns-a-cssstyledeclaration-but-all-properties-are-empty-on-a
  63. const itemStyle = getComputedStyle(itemRef.current);
  64. setMarginBottom(parseInt(itemStyle.marginBottom, 10));
  65. }
  66. }, [hasError, isOnScreen]);
  67. const onErrorVisibleChanged = nextVisible => {
  68. if (!nextVisible) {
  69. setMarginBottom(null);
  70. }
  71. };
  72. // ======================== Status ========================
  73. const getValidateState = (isDebounce = false) => {
  74. const _errors = isDebounce ? debounceErrors : meta.errors;
  75. const _warnings = isDebounce ? debounceWarnings : meta.warnings;
  76. return getStatus(_errors, _warnings, meta, '', !!hasFeedback, validateStatus);
  77. };
  78. const mergedValidateStatus = getValidateState();
  79. // ======================== Render ========================
  80. const itemClassName = classNames(itemPrefixCls, className, rootClassName, {
  81. [`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length,
  82. // Status
  83. [`${itemPrefixCls}-has-feedback`]: mergedValidateStatus && hasFeedback,
  84. [`${itemPrefixCls}-has-success`]: mergedValidateStatus === 'success',
  85. [`${itemPrefixCls}-has-warning`]: mergedValidateStatus === 'warning',
  86. [`${itemPrefixCls}-has-error`]: mergedValidateStatus === 'error',
  87. [`${itemPrefixCls}-is-validating`]: mergedValidateStatus === 'validating',
  88. [`${itemPrefixCls}-hidden`]: hidden,
  89. // Layout
  90. [`${itemPrefixCls}-${layout}`]: layout
  91. });
  92. return /*#__PURE__*/React.createElement("div", {
  93. className: itemClassName,
  94. style: style,
  95. ref: itemRef
  96. }, /*#__PURE__*/React.createElement(Row, Object.assign({
  97. className: `${itemPrefixCls}-row`
  98. }, omit(restProps, ['_internalItemRender', 'colon', 'dependencies', 'extra', 'fieldKey', 'getValueFromEvent', 'getValueProps', 'htmlFor', 'id',
  99. // It is deprecated because `htmlFor` is its replacement.
  100. 'initialValue', 'isListField', 'label', 'labelAlign', 'labelCol', 'labelWrap', 'messageVariables', 'name', 'normalize', 'noStyle', 'preserve', 'requiredMark', 'rules', 'shouldUpdate', 'trigger', 'tooltip', 'validateFirst', 'validateTrigger', 'valuePropName', 'wrapperCol', 'validateDebounce'])), /*#__PURE__*/React.createElement(FormItemLabel, Object.assign({
  101. htmlFor: fieldId
  102. }, props, {
  103. requiredMark: requiredMark,
  104. required: required !== null && required !== void 0 ? required : isRequired,
  105. prefixCls: prefixCls,
  106. vertical: vertical
  107. })), /*#__PURE__*/React.createElement(FormItemInput, Object.assign({}, props, meta, {
  108. errors: debounceErrors,
  109. warnings: debounceWarnings,
  110. prefixCls: prefixCls,
  111. status: mergedValidateStatus,
  112. help: help,
  113. marginBottom: marginBottom,
  114. onErrorVisibleChanged: onErrorVisibleChanged
  115. }), /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
  116. value: onSubItemMetaChange
  117. }, /*#__PURE__*/React.createElement(StatusProvider, {
  118. prefixCls: prefixCls,
  119. meta: meta,
  120. errors: meta.errors,
  121. warnings: meta.warnings,
  122. hasFeedback: hasFeedback,
  123. // Already calculated
  124. validateStatus: mergedValidateStatus,
  125. name: name
  126. }, children)))), !!marginBottom && (/*#__PURE__*/React.createElement("div", {
  127. className: `${itemPrefixCls}-margin-offset`,
  128. style: {
  129. marginBottom: -marginBottom
  130. }
  131. })));
  132. }