antd
Version:
An enterprise-class UI design language and React components implementation
187 lines (186 loc) • 7.2 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "List", {
enumerable: true,
get: function () {
return _rcFieldForm.List;
}
});
exports.default = void 0;
Object.defineProperty(exports, "useForm", {
enumerable: true,
get: function () {
return _useForm.default;
}
});
Object.defineProperty(exports, "useWatch", {
enumerable: true,
get: function () {
return _rcFieldForm.useWatch;
}
});
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcFieldForm = _interopRequireWildcard(require("rc-field-form"));
var _context = require("../config-provider/context");
var _DisabledContext = _interopRequireWildcard(require("../config-provider/DisabledContext"));
var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
var _context2 = require("./context");
var _useForm = _interopRequireDefault(require("./hooks/useForm"));
var _useFormWarning = _interopRequireDefault(require("./hooks/useFormWarning"));
var _style = _interopRequireDefault(require("./style"));
var _validateMessagesContext = _interopRequireDefault(require("./validateMessagesContext"));
var __rest = void 0 && (void 0).__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;
};
const InternalForm = (props, ref) => {
const contextDisabled = React.useContext(_DisabledContext.default);
const {
getPrefixCls,
direction,
requiredMark: contextRequiredMark,
colon: contextColon,
scrollToFirstError: contextScrollToFirstError,
className: contextClassName,
style: contextStyle
} = (0, _context.useComponentConfig)('form');
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
size,
disabled = contextDisabled,
form,
colon,
labelAlign,
labelWrap,
labelCol,
wrapperCol,
hideRequiredMark,
layout = 'horizontal',
scrollToFirstError,
requiredMark,
onFinishFailed,
name,
style,
feedbackIcons,
variant
} = props,
restFormProps = __rest(props, ["prefixCls", "className", "rootClassName", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "style", "feedbackIcons", "variant"]);
const mergedSize = (0, _useSize.default)(size);
const contextValidateMessages = React.useContext(_validateMessagesContext.default);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
(0, _useFormWarning.default)(props);
}
const mergedRequiredMark = React.useMemo(() => {
if (requiredMark !== undefined) {
return requiredMark;
}
if (hideRequiredMark) {
return false;
}
if (contextRequiredMark !== undefined) {
return contextRequiredMark;
}
return true;
}, [hideRequiredMark, requiredMark, contextRequiredMark]);
const mergedColon = colon !== null && colon !== void 0 ? colon : contextColon;
const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style
const rootCls = (0, _useCSSVarCls.default)(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
const formClassName = (0, _classnames.default)(prefixCls, `${prefixCls}-${layout}`, {
[`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
// todo: remove in next major version
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${mergedSize}`]: mergedSize
}, cssVarCls, rootCls, hashId, contextClassName, className, rootClassName);
const [wrapForm] = (0, _useForm.default)(form);
const {
__INTERNAL__
} = wrapForm;
__INTERNAL__.name = name;
const formContextValue = React.useMemo(() => ({
name,
labelAlign,
labelCol,
labelWrap,
wrapperCol,
vertical: layout === 'vertical',
colon: mergedColon,
requiredMark: mergedRequiredMark,
itemRef: __INTERNAL__.itemRef,
form: wrapForm,
feedbackIcons
}), [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm, feedbackIcons]);
const nativeElementRef = React.useRef(null);
React.useImperativeHandle(ref, () => {
var _a;
return Object.assign(Object.assign({}, wrapForm), {
nativeElement: (_a = nativeElementRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement
});
});
const scrollToField = (options, fieldName) => {
if (options) {
let defaultScrollToFirstError = {
block: 'nearest'
};
if (typeof options === 'object') {
defaultScrollToFirstError = Object.assign(Object.assign({}, defaultScrollToFirstError), options);
}
wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
}
};
const onInternalFinishFailed = errorInfo => {
onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errorInfo);
if (errorInfo.errorFields.length) {
const fieldName = errorInfo.errorFields[0].name;
if (scrollToFirstError !== undefined) {
scrollToField(scrollToFirstError, fieldName);
return;
}
if (contextScrollToFirstError !== undefined) {
scrollToField(contextScrollToFirstError, fieldName);
}
}
};
return wrapCSSVar(/*#__PURE__*/React.createElement(_context2.VariantContext.Provider, {
value: variant
}, /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
disabled: disabled
}, /*#__PURE__*/React.createElement(_SizeContext.default.Provider, {
value: mergedSize
}, /*#__PURE__*/React.createElement(_context2.FormProvider, {
// This is not list in API, we pass with spread
validateMessages: contextValidateMessages
}, /*#__PURE__*/React.createElement(_context2.FormContext.Provider, {
value: formContextValue
}, /*#__PURE__*/React.createElement(_rcFieldForm.default, Object.assign({
id: name
}, restFormProps, {
name: name,
onFinishFailed: onInternalFinishFailed,
form: wrapForm,
ref: nativeElementRef,
style: Object.assign(Object.assign({}, contextStyle), style),
className: formClassName
}))))))));
};
const Form = /*#__PURE__*/React.forwardRef(InternalForm);
if (process.env.NODE_ENV !== 'production') {
Form.displayName = 'Form';
}
var _default = exports.default = Form;