konnosDashboard
FormActions.tsx49 lines · main
1import { Button } from 'ui'
2
3interface Props {
4 form: React.HTMLProps<HTMLButtonElement>['form']
5 hasChanges: boolean | undefined // Disables submit button if false
6 handleReset: () => void // Handling a reset/cancel of the form
7 helper?: React.ReactNode // Helper text to show alongside actions
8 disabled?: boolean
9 isSubmitting?: boolean
10 submitText?: string
11}
12
13export const FormActions = ({
14 form,
15 hasChanges = undefined,
16 handleReset,
17 helper,
18 disabled = false,
19 isSubmitting,
20 submitText = 'Save',
21}: Props) => {
22 const isDisabled = isSubmitting || disabled || (!hasChanges && hasChanges !== undefined)
23
24 return (
25 <div
26 className={[
27 'flex w-full items-center gap-2',
28 // justify actions to right if no helper text
29 helper ? 'justify-between' : 'justify-end',
30 ].join(' ')}
31 >
32 {helper && <span className="text-sm text-foreground-lighter">{helper}</span>}
33 <div className="flex items-center gap-2">
34 <Button disabled={isDisabled} type="default" htmlType="reset" onClick={() => handleReset()}>
35 Cancel
36 </Button>
37 <Button
38 form={form}
39 type="primary"
40 htmlType="submit"
41 disabled={isDisabled}
42 loading={isSubmitting}
43 >
44 {submitText}
45 </Button>
46 </div>
47 </div>
48 )
49}