Form.js
5.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 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,
restProps = (0, _objectWithoutProperties2.default)(_ref, ["name", "initialValues", "fields", "form", "preserve", "children", "component", "validateMessages", "validateTrigger", "onValuesChange", "onFieldsChange", "onFinish", "onFinishFailed"]);
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 _formInstance$getInte = formInstance.getInternalHooks(_FieldContext.HOOK_MARK),
useSubscribe = _formInstance$getInte.useSubscribe,
setInitialValues = _formInstance$getInte.setInitialValues,
setCallbacks = _formInstance$getInte.setCallbacks,
setValidateMessages = _formInstance$getInte.setValidateMessages,
setPreserve = _formInstance$getInte.setPreserve; // Pass ref with form instance
React.useImperativeHandle(ref, function () {
return formInstance;
}); // 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;
} // Prepare children by `children` type
var childrenNode = children;
var childrenRenderProps = typeof children === 'function';
if (childrenRenderProps) {
var values = formInstance.getFieldsValue(true);
childrenNode = children(values, formInstance);
} // 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(_FieldContext.default.Provider, {
value: formContextValue
}, childrenNode);
if (Component === false) {
return wrapperNode;
}
return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
onSubmit: function onSubmit(event) {
event.preventDefault();
event.stopPropagation();
formInstance.submit();
}
}), wrapperNode);
};
var _default = Form;
exports.default = _default;