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