109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
import { Box, Button, Typography } from '@mui/joy'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
function AcknowledgmentModal({ config }) {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false)
|
|
|
|
const handleAction = useCallback(() => {
|
|
config.onClose()
|
|
}, [config])
|
|
|
|
// Keyboard shortcuts for acknowledgment modal
|
|
useEffect(() => {
|
|
const handleKeyDown = event => {
|
|
if (!config?.isOpen) return
|
|
|
|
// Show keyboard shortcuts when Ctrl/Cmd is pressed
|
|
if (event.ctrlKey || event.metaKey) {
|
|
setShowKeyboardShortcuts(true)
|
|
}
|
|
|
|
// Ctrl/Cmd + Y for acknowledge
|
|
if ((event.ctrlKey || event.metaKey) && event.key === 'y') {
|
|
event.preventDefault()
|
|
handleAction()
|
|
return
|
|
}
|
|
|
|
// Escape key for acknowledge
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault()
|
|
handleAction()
|
|
return
|
|
}
|
|
|
|
// Enter key for acknowledge
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
handleAction()
|
|
return
|
|
}
|
|
}
|
|
|
|
const handleKeyUp = event => {
|
|
if (!event.ctrlKey && !event.metaKey) {
|
|
setShowKeyboardShortcuts(false)
|
|
}
|
|
}
|
|
|
|
if (config?.isOpen) {
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
document.addEventListener('keyup', handleKeyUp)
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
document.removeEventListener('keyup', handleKeyUp)
|
|
}
|
|
}, [config?.isOpen, handleAction])
|
|
|
|
return (
|
|
<ResponsiveModal
|
|
open={config?.isOpen}
|
|
onClose={config?.onClose}
|
|
size='md'
|
|
unmountDelay={250}
|
|
>
|
|
<Box
|
|
sx={{ p: 2, minWidth: { xs: '100%', sm: '400px' }, maxWidth: '500px' }}
|
|
>
|
|
<Typography level='h4' mb={2} textAlign='center'>
|
|
{config?.title}
|
|
</Typography>
|
|
|
|
<Typography
|
|
level='body-md'
|
|
mb={3}
|
|
sx={{
|
|
lineHeight: 1.6,
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-word',
|
|
}}
|
|
>
|
|
{config?.message}
|
|
</Typography>
|
|
|
|
<Box display={'flex'} justifyContent={'center'} mt={2}>
|
|
<Button
|
|
size='lg'
|
|
onClick={handleAction}
|
|
color={config?.color || 'primary'}
|
|
fullWidth
|
|
endDecorator={
|
|
<KeyboardShortcutHint shortcut='Y' show={showKeyboardShortcuts} />
|
|
}
|
|
sx={{ minWidth: '120px' }}
|
|
>
|
|
{config?.acknowledgeText}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
|
|
export default AcknowledgmentModal
|