155 lines
6.2 KiB
JavaScript
155 lines
6.2 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
var React = _interopRequireWildcard(require("react"));
|
|
var _useForm3 = _interopRequireDefault(require("./useForm"));
|
|
var _FieldContext = _interopRequireWildcard(require("./FieldContext"));
|
|
var _FormContext = _interopRequireDefault(require("./FormContext"));
|
|
var _valueUtil = require("./utils/valueUtil");
|
|
var _ListContext = _interopRequireDefault(require("./ListContext"));
|
|
var _excluded = ["name", "initialValues", "fields", "form", "preserve", "children", "component", "validateMessages", "validateTrigger", "onValuesChange", "onFieldsChange", "onFinish", "onFinishFailed", "clearOnDestroy"];
|
|
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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
var nativeElementRef = React.useRef(null);
|
|
var formContext = React.useContext(_FormContext.default);
|
|
|
|
// We customize handle event since Context will makes all the consumer re-render:
|
|
// https://reactjs.org/docs/context.html#contextprovider
|
|
var _useForm = (0, _useForm3.default)(form),
|
|
_useForm2 = (0, _slicedToArray2.default)(_useForm, 1),
|
|
formInstance = _useForm2[0];
|
|
var _getInternalHooks = formInstance.getInternalHooks(_FieldContext.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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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((0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 (!(0, _valueUtil.isSimilar)(prevFieldsRef.current || [], fields || [])) {
|
|
formInstance.setFields(fields || []);
|
|
}
|
|
prevFieldsRef.current = fields;
|
|
}, [fields, formInstance]);
|
|
var formContextValue = React.useMemo(function () {
|
|
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formInstance), {}, {
|
|
validateTrigger: validateTrigger
|
|
});
|
|
}, [formInstance, validateTrigger]);
|
|
var wrapperNode = /*#__PURE__*/React.createElement(_ListContext.default.Provider, {
|
|
value: null
|
|
}, /*#__PURE__*/React.createElement(_FieldContext.default.Provider, {
|
|
value: formContextValue
|
|
}, childrenNode));
|
|
if (Component === false) {
|
|
return wrapperNode;
|
|
}
|
|
return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, 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);
|
|
};
|
|
var _default = exports.default = Form; |