75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
|
import clsx from 'clsx'
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
import { Row } from './layout/row'
|
||
|
|
import { ConfirmationButton } from './confirmation-button'
|
||
|
|
import { ExclamationIcon } from '@heroicons/react/solid'
|
||
|
|
|
||
|
|
export function WarningConfirmationButton(props: {
|
||
|
|
warning?: string
|
||
|
|
onSubmit: () => void
|
||
|
|
disabled?: boolean
|
||
|
|
isSubmitting: boolean
|
||
|
|
openModalButtonClass?: string
|
||
|
|
submitButtonClassName?: string
|
||
|
|
}) {
|
||
|
|
const {
|
||
|
|
onSubmit,
|
||
|
|
warning,
|
||
|
|
disabled,
|
||
|
|
isSubmitting,
|
||
|
|
openModalButtonClass,
|
||
|
|
submitButtonClassName,
|
||
|
|
} = props
|
||
|
|
|
||
|
|
if (!warning) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={clsx(
|
||
|
|
openModalButtonClass,
|
||
|
|
isSubmitting ? 'loading' : '',
|
||
|
|
disabled && 'btn-disabled'
|
||
|
|
)}
|
||
|
|
onClick={onSubmit}
|
||
|
|
disabled={disabled}
|
||
|
|
>
|
||
|
|
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ConfirmationButton
|
||
|
|
openModalBtn={{
|
||
|
|
className: clsx(
|
||
|
|
openModalButtonClass,
|
||
|
|
isSubmitting && 'btn-disabled loading'
|
||
|
|
),
|
||
|
|
label: 'Submit',
|
||
|
|
}}
|
||
|
|
cancelBtn={{
|
||
|
|
label: 'Cancel',
|
||
|
|
className: 'btn-warning',
|
||
|
|
}}
|
||
|
|
submitBtn={{
|
||
|
|
label: 'Submit',
|
||
|
|
className: clsx(
|
||
|
|
'border-none btn-sm btn-ghost self-center',
|
||
|
|
submitButtonClassName
|
||
|
|
),
|
||
|
|
}}
|
||
|
|
onSubmit={onSubmit}
|
||
|
|
>
|
||
|
|
<Row className="items-center text-xl">
|
||
|
|
<ExclamationIcon
|
||
|
|
className="h-16 w-16 text-yellow-400"
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
Whoa, there!
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<p>{warning}</p>
|
||
|
|
</ConfirmationButton>
|
||
|
|
)
|
||
|
|
}
|