git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/form/SubmitButton.jsx
71 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
33 // AND
34 // a) is dirty
35 // b) OR only has a warning (double conf)
36 // 2) AND is not validating
37 // 3) AND has no validation errors
38 // 4) AND is not actively submitting
39 // 5) AND submit has not yet succeeded
40 const canSubmit =
41 (valid ||
42 (hasSubmitErrors &&
43 (dirtySinceLastSubmit || onlyWarningInSubmitErrors))) &&
44 !validating &&
45 !hasValidationErrors &&
46 !submitting &&
47 !submitSucceeded;
49 // show the warning action text if
50 // 1) we have that warning at all
51 // 2) we can submit or are submitting
52 const showWarningSubmitText =
53 onlyWarningInSubmitErrors &&
54 !dirtySinceLastSubmit &&
55 (canSubmit || submitting);
57 return (
58 <As
59 type="submit"
60 className={cn('mt4', className)}
61 disabled={!canSubmit}
62 accessory={blinkIf(validating || submitting)}
63 onClick={handleSubmit}
64 solid
65 {...rest}>
66 {typeof children === 'function'
67 ? children(showWarningSubmitText)
68 : children}
69 </As>
70 );