git.iko.soy/bridge
on f1b5e41 help sign in
bridge/src/form/SubmitButton.js
73 lines 1.8 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { useFormState } from 'react-final-form';
5import { ForwardButton } from 'components/Buttons';
7import { blinkIf } from 'components/Blinky';
8import { onlyHasWarning } from './helpers';
10export default function SubmitButton({
11 as: As = ForwardButton,
12 className,
13 children,
14 handleSubmit,
15 ...rest
16}) {
17 const form = useFormState();
18 const {
19 valid,
20 validating,
21 submitting,
22 hasValidationErrors,
23 hasSubmitErrors,
24 dirtySinceLastSubmit,
25 submitErrors,
26 submitSucceeded,
27 } = form;
28 console.log(form);
30 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
32 // can submit if:
33 // 1) is valid
34 // OR has submit errors
35 // AND
36 // a) is dirty
37 // b) OR only has a warning (double conf)
38 // 2) AND is not validating
39 // 3) AND has no validation errors
40 // 4) AND is not actively submitting
41 // 5) AND submit has not yet succeeded
42 const canSubmit =
43 (valid ||
44 (hasSubmitErrors &&
45 (dirtySinceLastSubmit || onlyWarningInSubmitErrors))) &&
46 !validating &&
47 !hasValidationErrors &&
48 !submitting &&
49 !submitSucceeded;
51 // show the warning action text if
52 // 1) we have that warning at all
53 // 2) we can submit or are submitting
54 const showWarningSubmitText =
55 onlyWarningInSubmitErrors &&
56 !dirtySinceLastSubmit &&
57 (canSubmit || submitting);
59 return (
60 <As
61 type="submit"
62 className={cn('mt4', className)}
63 disabled={!canSubmit}
64 accessory={blinkIf(validating || submitting)}
65 onClick={handleSubmit}
66 solid
67 {...rest}>
68 {typeof children === 'function'
69 ? children(showWarningSubmitText)
70 : children}
71 </As>
72 );