123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
- var _excluded = ["name", "initialValues", "fields", "form", "preserve", "children", "component", "validateMessages", "validateTrigger", "onValuesChange", "onFieldsChange", "onFinish", "onFinishFailed", "clearOnDestroy"];
- import * as React from 'react';
- import useForm from "./useForm";
- import FieldContext, { HOOK_MARK } from "./FieldContext";
- import FormContext from "./FormContext";
- import { isSimilar } from "./utils/valueUtil";
- import ListContext from "./ListContext";
- var Form = function Form(_ref, ref) {
- var name = _ref.name,
- initialValues = _ref.initialValues,
- fields = _ref.fields,
- form = _ref.form,
- preserve = _ref.preserve,
- children = _ref.children,
- _ref$component = _ref.component,
- Component = _ref$component === void 0 ? 'form' : _ref$component,
- validateMessages = _ref.validateMessages,
- _ref$validateTrigger = _ref.validateTrigger,
- validateTrigger = _ref$validateTrigger === void 0 ? 'onChange' : _ref$validateTrigger,
- onValuesChange = _ref.onValuesChange,
- _onFieldsChange = _ref.onFieldsChange,
- _onFinish = _ref.onFinish,
- onFinishFailed = _ref.onFinishFailed,
- clearOnDestroy = _ref.clearOnDestroy,
- restProps = _objectWithoutProperties(_ref, _excluded);
- var nativeElementRef = React.useRef(null);
- var formContext = React.useContext(FormContext);
- // We customize handle event since Context will makes all the consumer re-render:
- // https://reactjs.org/docs/context.html#contextprovider
- var _useForm = useForm(form),
- _useForm2 = _slicedToArray(_useForm, 1),
- formInstance = _useForm2[0];
- var _getInternalHooks = formInstance.getInternalHooks(HOOK_MARK),
- useSubscribe = _getInternalHooks.useSubscribe,
- setInitialValues = _getInternalHooks.setInitialValues,
- setCallbacks = _getInternalHooks.setCallbacks,
- setValidateMessages = _getInternalHooks.setValidateMessages,
- setPreserve = _getInternalHooks.setPreserve,
- destroyForm = _getInternalHooks.destroyForm;
- // Pass ref with form instance
- React.useImperativeHandle(ref, function () {
- return _objectSpread(_objectSpread({}, formInstance), {}, {
- nativeElement: nativeElementRef.current
- });
- });
- // Register form into Context
- React.useEffect(function () {
- formContext.registerForm(name, formInstance);
- return function () {
- formContext.unregisterForm(name);
- };
- }, [formContext, formInstance, name]);
- // Pass props to store
- setValidateMessages(_objectSpread(_objectSpread({}, formContext.validateMessages), validateMessages));
- setCallbacks({
- onValuesChange: onValuesChange,
- onFieldsChange: function onFieldsChange(changedFields) {
- formContext.triggerFormChange(name, changedFields);
- if (_onFieldsChange) {
- for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- rest[_key - 1] = arguments[_key];
- }
- _onFieldsChange.apply(void 0, [changedFields].concat(rest));
- }
- },
- onFinish: function onFinish(values) {
- formContext.triggerFormFinish(name, values);
- if (_onFinish) {
- _onFinish(values);
- }
- },
- onFinishFailed: onFinishFailed
- });
- setPreserve(preserve);
- // Set initial value, init store value when first mount
- var mountRef = React.useRef(null);
- setInitialValues(initialValues, !mountRef.current);
- if (!mountRef.current) {
- mountRef.current = true;
- }
- React.useEffect(function () {
- return function () {
- return destroyForm(clearOnDestroy);
- };
- },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- []);
- // Prepare children by `children` type
- var childrenNode;
- var childrenRenderProps = typeof children === 'function';
- if (childrenRenderProps) {
- var _values = formInstance.getFieldsValue(true);
- childrenNode = children(_values, formInstance);
- } else {
- childrenNode = children;
- }
- // Not use subscribe when using render props
- useSubscribe(!childrenRenderProps);
- // Listen if fields provided. We use ref to save prev data here to avoid additional render
- var prevFieldsRef = React.useRef();
- React.useEffect(function () {
- if (!isSimilar(prevFieldsRef.current || [], fields || [])) {
- formInstance.setFields(fields || []);
- }
- prevFieldsRef.current = fields;
- }, [fields, formInstance]);
- var formContextValue = React.useMemo(function () {
- return _objectSpread(_objectSpread({}, formInstance), {}, {
- validateTrigger: validateTrigger
- });
- }, [formInstance, validateTrigger]);
- var wrapperNode = /*#__PURE__*/React.createElement(ListContext.Provider, {
- value: null
- }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
- value: formContextValue
- }, childrenNode));
- if (Component === false) {
- return wrapperNode;
- }
- return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
- ref: nativeElementRef,
- onSubmit: function onSubmit(event) {
- event.preventDefault();
- event.stopPropagation();
- formInstance.submit();
- },
- onReset: function onReset(event) {
- var _restProps$onReset;
- event.preventDefault();
- formInstance.resetFields();
- (_restProps$onReset = restProps.onReset) === null || _restProps$onReset === void 0 || _restProps$onReset.call(restProps, event);
- }
- }), wrapperNode);
- };
- export default Form;
|