on e82c628 help sign in
bridge/src/form/BridgeForm.js
51 lines 1.3 kB history raw
1import React, { useCallback } from 'react';
2import { Form } from 'react-final-form';
3import setFieldData from 'final-form-set-field-data';
4import arrayMutators from 'final-form-arrays';
5import { noop } from 'lodash';
7import ValuesHandler from './ValuesHandler';
8import ValidationPauser from './ValidationPauser';
10/**
11 * BridgeForm adds nice-to-haves for every form in bridge.
12 * + afterSubmit callback for redirects
13 * + default onSubmit to noop so react-final-form doesn't throw
14 * + pauses validation when the form is unmounted
15 * + `onValues` handler for reactive changes
16 * + automatically includes array and field data mutators
17 */
18export default function BridgeForm({
19 children,
20 onValues,
21 onSubmit = noop,
22 afterSubmit = noop,
23 ...rest
24}) {
25 const _onSubmit = useCallback(
26 async (...args) => {
27 const errors = await onSubmit(...args);
28 if (errors) {
29 return errors;
30 }
32 afterSubmit();
33 },
34 [afterSubmit, onSubmit]
35 );
37 return (
38 <Form
39 mutators={{ setFieldData, ...arrayMutators }}
40 onSubmit={_onSubmit}
41 {...rest}>
42 {formProps => (
43 <>
44 <ValidationPauser />
45 {children(formProps)}
46 {onValues && <ValuesHandler onValues={onValues} />}
47 </>
48 )}
49 </Form>
50 );