git.iko.soy/bridge
on 09c909e help sign in
bridge/src/form/SubmitButton.js
83 lines 1.9 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 {
18 values,
19 errors,
20 valid,
21 validating,
22 submitting,
23 hasValidationErrors,
24 hasSubmitErrors,
25 dirtySinceLastSubmit,
26 submitErrors,
27 submitSucceeded,
28 } = useFormState();
30 console.log({
31 values,
32 valid,
33 validating,
34 submitting,
35 hasValidationErrors,
36 errors,
37 submitErrors,
38 });
40 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
42 // can submit if:
43 // 1) is valid
44 // OR has submit errors
45 // AND
46 // a) is dirty
47 // b) OR only has a warning (double conf)
48 // 2) AND is not validating
49 // 3) AND has no validation errors
50 // 4) AND is not actively submitting
51 // 5) AND submit has not yet succeeded
52 const canSubmit =
53 (valid ||
54 (hasSubmitErrors &&
55 (dirtySinceLastSubmit || onlyWarningInSubmitErrors))) &&
56 !validating &&
57 !hasValidationErrors &&
58 !submitting &&
59 !submitSucceeded;
61 // show the warning action text if
62 // 1) we have that warning at all
63 // 2) we can submit or are submitting
64 const showWarningSubmitText =
65 onlyWarningInSubmitErrors &&
66 !dirtySinceLastSubmit &&
67 (canSubmit || submitting);
69 return (
70 <As
71 type="submit"
72 className={cn('mt4', className)}
73 disabled={!canSubmit}
74 accessory={blinkIf(validating || submitting)}
75 onClick={handleSubmit}
76 solid
77 {...rest}>
78 {typeof children === 'function'
79 ? children(showWarningSubmitText)
80 : children}
81 </As>
82 );