on 49d35eb help sign in
bridge/src/form/BridgeForm.js
47 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 return errors;
29 }
31 afterSubmit();
32 },
33 [afterSubmit, onSubmit]
34 );
36 return (
37 <Form mutators={{ ...arrayMutators }} onSubmit={_onSubmit} {...rest}>
38 {formProps => (
39 <form style={{ display: 'contents' }} onSubmit={formProps.handleSubmit}>
40 <ValidationPauser />
41 {children(formProps)}
42 {onValues && <ValuesHandler {...formProps} onValues={onValues} />}
43 </form>
44 )}
45 </Form>
46 );