123 lines
5.4 KiB
JavaScript
123 lines
5.4 KiB
JavaScript
|
"use client";
|
||
|
|
||
|
var __rest = this && this.__rest || function (s, e) {
|
||
|
var t = {};
|
||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
|
}
|
||
|
return t;
|
||
|
};
|
||
|
import * as React from 'react';
|
||
|
import classNames from 'classnames';
|
||
|
import isVisible from "rc-util/es/Dom/isVisible";
|
||
|
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
|
||
|
import omit from "rc-util/es/omit";
|
||
|
import { Row } from '../../grid';
|
||
|
import { FormContext, NoStyleItemContext } from '../context';
|
||
|
import FormItemInput from '../FormItemInput';
|
||
|
import FormItemLabel from '../FormItemLabel';
|
||
|
import useDebounce from '../hooks/useDebounce';
|
||
|
import { getStatus } from '../util';
|
||
|
import StatusProvider from './StatusProvider';
|
||
|
export default function ItemHolder(props) {
|
||
|
const {
|
||
|
prefixCls,
|
||
|
className,
|
||
|
rootClassName,
|
||
|
style,
|
||
|
help,
|
||
|
errors,
|
||
|
warnings,
|
||
|
validateStatus,
|
||
|
meta,
|
||
|
hasFeedback,
|
||
|
hidden,
|
||
|
children,
|
||
|
fieldId,
|
||
|
required,
|
||
|
isRequired,
|
||
|
onSubItemMetaChange
|
||
|
} = props,
|
||
|
restProps = __rest(props, ["prefixCls", "className", "rootClassName", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "required", "isRequired", "onSubItemMetaChange"]);
|
||
|
const itemPrefixCls = `${prefixCls}-item`;
|
||
|
const {
|
||
|
requiredMark
|
||
|
} = React.useContext(FormContext);
|
||
|
// ======================== Margin ========================
|
||
|
const itemRef = React.useRef(null);
|
||
|
const debounceErrors = useDebounce(errors);
|
||
|
const debounceWarnings = useDebounce(warnings);
|
||
|
const hasHelp = help !== undefined && help !== null;
|
||
|
const hasError = !!(hasHelp || errors.length || warnings.length);
|
||
|
const isOnScreen = !!itemRef.current && isVisible(itemRef.current);
|
||
|
const [marginBottom, setMarginBottom] = React.useState(null);
|
||
|
useLayoutEffect(() => {
|
||
|
if (hasError && itemRef.current) {
|
||
|
// The element must be part of the DOMTree to use getComputedStyle
|
||
|
// https://stackoverflow.com/questions/35360711/getcomputedstyle-returns-a-cssstyledeclaration-but-all-properties-are-empty-on-a
|
||
|
const itemStyle = getComputedStyle(itemRef.current);
|
||
|
setMarginBottom(parseInt(itemStyle.marginBottom, 10));
|
||
|
}
|
||
|
}, [hasError, isOnScreen]);
|
||
|
const onErrorVisibleChanged = nextVisible => {
|
||
|
if (!nextVisible) {
|
||
|
setMarginBottom(null);
|
||
|
}
|
||
|
};
|
||
|
// ======================== Status ========================
|
||
|
const getValidateState = function () {
|
||
|
let isDebounce = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||
|
const _errors = isDebounce ? debounceErrors : meta.errors;
|
||
|
const _warnings = isDebounce ? debounceWarnings : meta.warnings;
|
||
|
return getStatus(_errors, _warnings, meta, '', !!hasFeedback, validateStatus);
|
||
|
};
|
||
|
const mergedValidateStatus = getValidateState();
|
||
|
// ======================== Render ========================
|
||
|
const itemClassName = classNames(itemPrefixCls, className, rootClassName, {
|
||
|
[`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length,
|
||
|
// Status
|
||
|
[`${itemPrefixCls}-has-feedback`]: mergedValidateStatus && hasFeedback,
|
||
|
[`${itemPrefixCls}-has-success`]: mergedValidateStatus === 'success',
|
||
|
[`${itemPrefixCls}-has-warning`]: mergedValidateStatus === 'warning',
|
||
|
[`${itemPrefixCls}-has-error`]: mergedValidateStatus === 'error',
|
||
|
[`${itemPrefixCls}-is-validating`]: mergedValidateStatus === 'validating',
|
||
|
[`${itemPrefixCls}-hidden`]: hidden
|
||
|
});
|
||
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
className: itemClassName,
|
||
|
style: style,
|
||
|
ref: itemRef
|
||
|
}, /*#__PURE__*/React.createElement(Row, Object.assign({
|
||
|
className: `${itemPrefixCls}-row`
|
||
|
}, omit(restProps, ['_internalItemRender', 'colon', 'dependencies', 'extra', 'fieldKey', 'getValueFromEvent', 'getValueProps', 'htmlFor', 'id', '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({
|
||
|
htmlFor: fieldId
|
||
|
}, props, {
|
||
|
requiredMark: requiredMark,
|
||
|
required: required !== null && required !== void 0 ? required : isRequired,
|
||
|
prefixCls: prefixCls
|
||
|
})), /*#__PURE__*/React.createElement(FormItemInput, Object.assign({}, props, meta, {
|
||
|
errors: debounceErrors,
|
||
|
warnings: debounceWarnings,
|
||
|
prefixCls: prefixCls,
|
||
|
status: mergedValidateStatus,
|
||
|
help: help,
|
||
|
marginBottom: marginBottom,
|
||
|
onErrorVisibleChanged: onErrorVisibleChanged
|
||
|
}), /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
|
||
|
value: onSubItemMetaChange
|
||
|
}, /*#__PURE__*/React.createElement(StatusProvider, {
|
||
|
prefixCls: prefixCls,
|
||
|
meta: meta,
|
||
|
errors: meta.errors,
|
||
|
warnings: meta.warnings,
|
||
|
hasFeedback: hasFeedback,
|
||
|
// Already calculated
|
||
|
validateStatus: mergedValidateStatus
|
||
|
}, children)))), !!marginBottom && /*#__PURE__*/React.createElement("div", {
|
||
|
className: `${itemPrefixCls}-margin-offset`,
|
||
|
style: {
|
||
|
marginBottom: -marginBottom
|
||
|
}
|
||
|
}));
|
||
|
}
|