Form.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. Object.defineProperty(exports, "List", {
  9. enumerable: true,
  10. get: function () {
  11. return _rcFieldForm.List;
  12. }
  13. });
  14. exports.default = void 0;
  15. Object.defineProperty(exports, "useForm", {
  16. enumerable: true,
  17. get: function () {
  18. return _useForm.default;
  19. }
  20. });
  21. Object.defineProperty(exports, "useWatch", {
  22. enumerable: true,
  23. get: function () {
  24. return _rcFieldForm.useWatch;
  25. }
  26. });
  27. var React = _interopRequireWildcard(require("react"));
  28. var _classnames = _interopRequireDefault(require("classnames"));
  29. var _rcFieldForm = _interopRequireWildcard(require("rc-field-form"));
  30. var _context = require("../config-provider/context");
  31. var _DisabledContext = _interopRequireWildcard(require("../config-provider/DisabledContext"));
  32. var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
  33. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  34. var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
  35. var _context2 = require("./context");
  36. var _useForm = _interopRequireDefault(require("./hooks/useForm"));
  37. var _useFormWarning = _interopRequireDefault(require("./hooks/useFormWarning"));
  38. var _style = _interopRequireDefault(require("./style"));
  39. var _validateMessagesContext = _interopRequireDefault(require("./validateMessagesContext"));
  40. var __rest = void 0 && (void 0).__rest || function (s, e) {
  41. var t = {};
  42. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  43. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  44. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  45. }
  46. return t;
  47. };
  48. const InternalForm = (props, ref) => {
  49. const contextDisabled = React.useContext(_DisabledContext.default);
  50. const {
  51. getPrefixCls,
  52. direction,
  53. requiredMark: contextRequiredMark,
  54. colon: contextColon,
  55. scrollToFirstError: contextScrollToFirstError,
  56. className: contextClassName,
  57. style: contextStyle
  58. } = (0, _context.useComponentConfig)('form');
  59. const {
  60. prefixCls: customizePrefixCls,
  61. className,
  62. rootClassName,
  63. size,
  64. disabled = contextDisabled,
  65. form,
  66. colon,
  67. labelAlign,
  68. labelWrap,
  69. labelCol,
  70. wrapperCol,
  71. hideRequiredMark,
  72. layout = 'horizontal',
  73. scrollToFirstError,
  74. requiredMark,
  75. onFinishFailed,
  76. name,
  77. style,
  78. feedbackIcons,
  79. variant
  80. } = props,
  81. restFormProps = __rest(props, ["prefixCls", "className", "rootClassName", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "style", "feedbackIcons", "variant"]);
  82. const mergedSize = (0, _useSize.default)(size);
  83. const contextValidateMessages = React.useContext(_validateMessagesContext.default);
  84. if (process.env.NODE_ENV !== 'production') {
  85. // eslint-disable-next-line react-hooks/rules-of-hooks
  86. (0, _useFormWarning.default)(props);
  87. }
  88. const mergedRequiredMark = React.useMemo(() => {
  89. if (requiredMark !== undefined) {
  90. return requiredMark;
  91. }
  92. if (hideRequiredMark) {
  93. return false;
  94. }
  95. if (contextRequiredMark !== undefined) {
  96. return contextRequiredMark;
  97. }
  98. return true;
  99. }, [hideRequiredMark, requiredMark, contextRequiredMark]);
  100. const mergedColon = colon !== null && colon !== void 0 ? colon : contextColon;
  101. const prefixCls = getPrefixCls('form', customizePrefixCls);
  102. // Style
  103. const rootCls = (0, _useCSSVarCls.default)(prefixCls);
  104. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
  105. const formClassName = (0, _classnames.default)(prefixCls, `${prefixCls}-${layout}`, {
  106. [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
  107. // todo: remove in next major version
  108. [`${prefixCls}-rtl`]: direction === 'rtl',
  109. [`${prefixCls}-${mergedSize}`]: mergedSize
  110. }, cssVarCls, rootCls, hashId, contextClassName, className, rootClassName);
  111. const [wrapForm] = (0, _useForm.default)(form);
  112. const {
  113. __INTERNAL__
  114. } = wrapForm;
  115. __INTERNAL__.name = name;
  116. const formContextValue = React.useMemo(() => ({
  117. name,
  118. labelAlign,
  119. labelCol,
  120. labelWrap,
  121. wrapperCol,
  122. layout,
  123. colon: mergedColon,
  124. requiredMark: mergedRequiredMark,
  125. itemRef: __INTERNAL__.itemRef,
  126. form: wrapForm,
  127. feedbackIcons
  128. }), [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm, feedbackIcons]);
  129. const nativeElementRef = React.useRef(null);
  130. React.useImperativeHandle(ref, () => {
  131. var _a;
  132. return Object.assign(Object.assign({}, wrapForm), {
  133. nativeElement: (_a = nativeElementRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement
  134. });
  135. });
  136. const scrollToField = (options, fieldName) => {
  137. if (options) {
  138. let defaultScrollToFirstError = {
  139. block: 'nearest'
  140. };
  141. if (typeof options === 'object') {
  142. defaultScrollToFirstError = Object.assign(Object.assign({}, defaultScrollToFirstError), options);
  143. }
  144. wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
  145. }
  146. };
  147. const onInternalFinishFailed = errorInfo => {
  148. onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errorInfo);
  149. if (errorInfo.errorFields.length) {
  150. const fieldName = errorInfo.errorFields[0].name;
  151. if (scrollToFirstError !== undefined) {
  152. scrollToField(scrollToFirstError, fieldName);
  153. return;
  154. }
  155. if (contextScrollToFirstError !== undefined) {
  156. scrollToField(contextScrollToFirstError, fieldName);
  157. }
  158. }
  159. };
  160. return wrapCSSVar(/*#__PURE__*/React.createElement(_context2.VariantContext.Provider, {
  161. value: variant
  162. }, /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
  163. disabled: disabled
  164. }, /*#__PURE__*/React.createElement(_SizeContext.default.Provider, {
  165. value: mergedSize
  166. }, /*#__PURE__*/React.createElement(_context2.FormProvider, {
  167. // This is not list in API, we pass with spread
  168. validateMessages: contextValidateMessages
  169. }, /*#__PURE__*/React.createElement(_context2.FormContext.Provider, {
  170. value: formContextValue
  171. }, /*#__PURE__*/React.createElement(_context2.NoFormStyle, {
  172. status: true
  173. }, /*#__PURE__*/React.createElement(_rcFieldForm.default, Object.assign({
  174. id: name
  175. }, restFormProps, {
  176. name: name,
  177. onFinishFailed: onInternalFinishFailed,
  178. form: wrapForm,
  179. ref: nativeElementRef,
  180. style: Object.assign(Object.assign({}, contextStyle), style),
  181. className: formClassName
  182. })))))))));
  183. };
  184. const Form = /*#__PURE__*/React.forwardRef(InternalForm);
  185. if (process.env.NODE_ENV !== 'production') {
  186. Form.displayName = 'Form';
  187. }
  188. var _default = exports.default = Form;