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