git.iko.soy/bridge
on c6f53ef help sign in
bridge/src/form/BridgeForm.js
49 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
40 style={formProps?.style || { display: 'contents' }}
41 onSubmit={formProps.handleSubmit}>
42 <ValidationPauser />
43 {children(formProps)}
44 {onValues && <ValuesHandler {...formProps} onValues={onValues} />}
45 </form>
46 )}
47 </Form>
48 );