-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugin_form.js
41 lines (39 loc) · 1.85 KB
/
plugin_form.js
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
import React from "react";
import { utils } from "./";
import { useForm } from "react-hook-form";
export * from "react-hook-form";
const Form = ({ _usemodule_in_design, children, onSubmit, onReset, onError, onInit, onWatch, onFormState, defaultValues, rules, formOptions, ...props }) => {
const id = React.useRef( utils.getRand() ),
ref = React.useRef(),
instance = useForm( formOptions ),
{ handleSubmit, register, watch, formState, reset } = instance;
formOptions = formOptions || {};
formOptions.defaultValues = defaultValues;
if ( typeof onWatch === "function") utils.asyncExecute(onWatch, 0, "react-hook-form_" + id, [ watch() ]);
if ( typeof onFormState === "function") {
// isValid is only applicable with formOptions.mode=onChange or formOptions.mode=onBlur.
const { isDirty, isValid, dirtyFields, isSubmitting, isSubmitted, touched, submitCount, errors } = formState;
onFormState({ isDirty, isValid, dirtyFields, isSubmitting, isSubmitted, touched, submitCount, errors }, formState);
}
React.useEffect(() => {
if(!_usemodule_in_design){
for ( let name, field, elements = ref.current.elements, i = 0, l = elements.length; i < l; i++ ) {
field = elements[i];
name = field.name;
if (name) {
register( field, rules && rules.hasOwnProperty(name) ? rules[name] : null );
}
}
if (onInit && typeof onInit === "function") onInit(ref.current, instance);
}
}, [register, instance, onInit, rules]);
return React.useMemo( () => {
return React.createElement((_usemodule_in_design?"div":"form"),{ ...props, ref,
onSubmit: handleSubmit(onSubmit, onError),
onReset: () => {
return reset(Object.assign({}, defaultValues));
}
}, children);
}, [children, handleSubmit, onSubmit, onError, reset, props, ref, defaultValues]);
}
export { Form as RHForm };