Form.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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 FieldForm, { List, useWatch } from 'rc-field-form';
  13. import { useComponentConfig } from '../config-provider/context';
  14. import DisabledContext, { DisabledContextProvider } from '../config-provider/DisabledContext';
  15. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  16. import useSize from '../config-provider/hooks/useSize';
  17. import SizeContext from '../config-provider/SizeContext';
  18. import { FormContext, FormProvider, NoFormStyle, VariantContext } from './context';
  19. import useForm from './hooks/useForm';
  20. import useFormWarning from './hooks/useFormWarning';
  21. import useStyle from './style';
  22. import ValidateMessagesContext from './validateMessagesContext';
  23. const InternalForm = (props, ref) => {
  24. const contextDisabled = React.useContext(DisabledContext);
  25. const {
  26. getPrefixCls,
  27. direction,
  28. requiredMark: contextRequiredMark,
  29. colon: contextColon,
  30. scrollToFirstError: contextScrollToFirstError,
  31. className: contextClassName,
  32. style: contextStyle
  33. } = useComponentConfig('form');
  34. const {
  35. prefixCls: customizePrefixCls,
  36. className,
  37. rootClassName,
  38. size,
  39. disabled = contextDisabled,
  40. form,
  41. colon,
  42. labelAlign,
  43. labelWrap,
  44. labelCol,
  45. wrapperCol,
  46. hideRequiredMark,
  47. layout = 'horizontal',
  48. scrollToFirstError,
  49. requiredMark,
  50. onFinishFailed,
  51. name,
  52. style,
  53. feedbackIcons,
  54. variant
  55. } = props,
  56. restFormProps = __rest(props, ["prefixCls", "className", "rootClassName", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "style", "feedbackIcons", "variant"]);
  57. const mergedSize = useSize(size);
  58. const contextValidateMessages = React.useContext(ValidateMessagesContext);
  59. if (process.env.NODE_ENV !== 'production') {
  60. // eslint-disable-next-line react-hooks/rules-of-hooks
  61. useFormWarning(props);
  62. }
  63. const mergedRequiredMark = React.useMemo(() => {
  64. if (requiredMark !== undefined) {
  65. return requiredMark;
  66. }
  67. if (hideRequiredMark) {
  68. return false;
  69. }
  70. if (contextRequiredMark !== undefined) {
  71. return contextRequiredMark;
  72. }
  73. return true;
  74. }, [hideRequiredMark, requiredMark, contextRequiredMark]);
  75. const mergedColon = colon !== null && colon !== void 0 ? colon : contextColon;
  76. const prefixCls = getPrefixCls('form', customizePrefixCls);
  77. // Style
  78. const rootCls = useCSSVarCls(prefixCls);
  79. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  80. const formClassName = classNames(prefixCls, `${prefixCls}-${layout}`, {
  81. [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
  82. // todo: remove in next major version
  83. [`${prefixCls}-rtl`]: direction === 'rtl',
  84. [`${prefixCls}-${mergedSize}`]: mergedSize
  85. }, cssVarCls, rootCls, hashId, contextClassName, className, rootClassName);
  86. const [wrapForm] = useForm(form);
  87. const {
  88. __INTERNAL__
  89. } = wrapForm;
  90. __INTERNAL__.name = name;
  91. const formContextValue = React.useMemo(() => ({
  92. name,
  93. labelAlign,
  94. labelCol,
  95. labelWrap,
  96. wrapperCol,
  97. layout,
  98. colon: mergedColon,
  99. requiredMark: mergedRequiredMark,
  100. itemRef: __INTERNAL__.itemRef,
  101. form: wrapForm,
  102. feedbackIcons
  103. }), [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm, feedbackIcons]);
  104. const nativeElementRef = React.useRef(null);
  105. React.useImperativeHandle(ref, () => {
  106. var _a;
  107. return Object.assign(Object.assign({}, wrapForm), {
  108. nativeElement: (_a = nativeElementRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement
  109. });
  110. });
  111. const scrollToField = (options, fieldName) => {
  112. if (options) {
  113. let defaultScrollToFirstError = {
  114. block: 'nearest'
  115. };
  116. if (typeof options === 'object') {
  117. defaultScrollToFirstError = Object.assign(Object.assign({}, defaultScrollToFirstError), options);
  118. }
  119. wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
  120. }
  121. };
  122. const onInternalFinishFailed = errorInfo => {
  123. onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errorInfo);
  124. if (errorInfo.errorFields.length) {
  125. const fieldName = errorInfo.errorFields[0].name;
  126. if (scrollToFirstError !== undefined) {
  127. scrollToField(scrollToFirstError, fieldName);
  128. return;
  129. }
  130. if (contextScrollToFirstError !== undefined) {
  131. scrollToField(contextScrollToFirstError, fieldName);
  132. }
  133. }
  134. };
  135. return wrapCSSVar(/*#__PURE__*/React.createElement(VariantContext.Provider, {
  136. value: variant
  137. }, /*#__PURE__*/React.createElement(DisabledContextProvider, {
  138. disabled: disabled
  139. }, /*#__PURE__*/React.createElement(SizeContext.Provider, {
  140. value: mergedSize
  141. }, /*#__PURE__*/React.createElement(FormProvider, {
  142. // This is not list in API, we pass with spread
  143. validateMessages: contextValidateMessages
  144. }, /*#__PURE__*/React.createElement(FormContext.Provider, {
  145. value: formContextValue
  146. }, /*#__PURE__*/React.createElement(NoFormStyle, {
  147. status: true
  148. }, /*#__PURE__*/React.createElement(FieldForm, Object.assign({
  149. id: name
  150. }, restFormProps, {
  151. name: name,
  152. onFinishFailed: onInternalFinishFailed,
  153. form: wrapForm,
  154. ref: nativeElementRef,
  155. style: Object.assign(Object.assign({}, contextStyle), style),
  156. className: formClassName
  157. })))))))));
  158. };
  159. const Form = /*#__PURE__*/React.forwardRef(InternalForm);
  160. if (process.env.NODE_ENV !== 'production') {
  161. Form.displayName = 'Form';
  162. }
  163. export { List, useForm, useWatch };
  164. export default Form;