60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React, { useRef, useCallback, memo } from 'react'
|
|
import { ConfirmationRequest } from '../reducers/Global'
|
|
import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core'
|
|
import { KeyCodes } from '../utils/KeyCodes'
|
|
|
|
function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationRequest> }) {
|
|
const request = props.confirmationRequests[0]
|
|
const yesRef = useRef<HTMLButtonElement>()
|
|
const noRef = useRef<HTMLButtonElement>()
|
|
const arrowKeyHandler = useCallback((event: KeyboardEvent) => {
|
|
const isArrowKey = event.keyCode === KeyCodes.arrow_left || event.keyCode === KeyCodes.arrow_right
|
|
if (!isArrowKey) {
|
|
return
|
|
}
|
|
|
|
event.stopPropagation()
|
|
if (document.activeElement === noRef.current) {
|
|
yesRef.current && yesRef.current.focus()
|
|
} else {
|
|
noRef.current && noRef.current.focus()
|
|
}
|
|
}, [])
|
|
|
|
const confirm = React.useCallback(() => {
|
|
request && request.callback(true)
|
|
}, [request])
|
|
const reject = React.useCallback(() => {
|
|
request && request.callback(false)
|
|
}, [request])
|
|
|
|
if (!request) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open={true}
|
|
onClose={reject}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
onKeyDown={arrowKeyHandler}
|
|
>
|
|
<DialogTitle id="alert-dialog-title">{request.title}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">{request.inquiry}</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button ref={yesRef} variant="contained" onClick={confirm} color="primary" autoFocus>
|
|
Yes
|
|
</Button>
|
|
<Button ref={noRef} variant="contained" onClick={reject} color="secondary">
|
|
No
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default memo(ConfirmationDialog)
|