712cad9ea1
Came across this issue while migrating to Omnivore, but I saw it also reported in issue #3648. There was a first attempt to fix in #3653, but I believe it's an issue in the library itself, which is not there anymore in 2.0.6. It also fixes the "too much recursion" error that shows in the console when the modal is open, both in the Feeds page and in the Inbox (e.g. when clicking on Edit Info).
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import {
|
|
ModalRoot,
|
|
ModalContent,
|
|
ModalOverlay,
|
|
} from '../elements/ModalPrimitives'
|
|
import { VStack, HStack } from '../elements/LayoutPrimitives'
|
|
import { Button } from '../elements/Button'
|
|
import { StyledText } from '../elements/StyledText'
|
|
|
|
type ConfirmationModalProps = {
|
|
message?: string
|
|
richMessage?: React.ReactNode
|
|
icon?: React.ReactNode
|
|
acceptButtonLabel?: string
|
|
cancelButtonLabel?: string
|
|
onAccept: () => void
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
|
|
return (
|
|
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
|
|
<ModalOverlay />
|
|
<ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
|
|
<VStack alignment="center" distribution="center" css={{ p: '15px' }}>
|
|
{props.icon ? props.icon : null}
|
|
{props.richMessage ? (
|
|
props.richMessage
|
|
) : (
|
|
<StyledText>{props.message}</StyledText>
|
|
)}
|
|
<HStack distribution="center" css={{ pt: '$2' }}>
|
|
<Button
|
|
style="ctaOutlineYellow"
|
|
css={{ mr: '$2' }}
|
|
onClick={() => props.onOpenChange(false)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
props.onOpenChange(false)
|
|
}
|
|
}}
|
|
>
|
|
{props.cancelButtonLabel ? props.cancelButtonLabel : 'Cancel'}
|
|
</Button>
|
|
<Button
|
|
style="ctaDarkYellow"
|
|
onClick={props.onAccept}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
props.onAccept()
|
|
}
|
|
}}
|
|
>
|
|
{props.acceptButtonLabel ?? 'Confirm'}
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
</ModalContent>
|
|
</ModalRoot>
|
|
)
|
|
}
|