Form.js
4.71 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
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";
import * as React from 'react';
import useForm from './useForm';
import FieldContext, { HOOK_MARK } from './FieldContext';
import FormContext from './FormContext';
import { isSimilar } from './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 = _objectWithoutProperties(_ref, ["name", "initialValues", "fields", "form", "preserve", "children", "component", "validateMessages", "validateTrigger", "onValuesChange", "onFieldsChange", "onFinish", "onFinishFailed"]);
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 _formInstance$getInte = formInstance.getInternalHooks(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(_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;
} // 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 (!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(FieldContext.Provider, {
value: formContextValue
}, childrenNode);
if (Component === false) {
return wrapperNode;
}
return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
onSubmit: function onSubmit(event) {
event.preventDefault();
event.stopPropagation();
formInstance.submit();
}
}), wrapperNode);
};
export default Form;