import * as React from "react" ; import Button from "@material-ui/core/Button" ; import Dialog from "@material-ui/core/Dialog" ; import DialogActions from "@material-ui/core/DialogActions" ; import DialogContent from "@material-ui/core/DialogContent" ; import DialogTitle from "@material-ui/core/DialogTitle" ; import DialogContentText from "@material-ui/core/DialogContentText" ; import { useTranslation } from "react-i18next" ; export const DeleteImageDialog = ( props ) => { const { onClose , open , selectedImages } = props ; function onClickDeleteButton ( ) { props . setSelectedImages ( [ ] ) ; props . deleteImages ( props . selectedImages ) ; props . onClose ( ) ; } const noSelectedImages = selectedImages . length ; let title = noSelectedImages > 0 ? "Do you want to delete the " + noSelectedImages + " selected images?" : "Please select images before clicking on this button" ; let text = noSelectedImages > 0 ? "Please confirm that you want to delete the currently selected images" : null ; if ( noSelectedImages === 1 ) { title = "Do you want to delete the selected image" ; text = "Please confirm you want to delete this image" ; } const { t : translation } = useTranslation ( ) ; return ( < Dialog open = { open } onClose = { onClose } > < DialogTitle id = "form-dialog-title" > { title } < /DialogTitle> < DialogContent > < DialogContentText id = "alert-dialog-description" > { text } < /DialogContentText> < /DialogContent> < DialogActions > < Button onClick = { ( ) => props . onClose ( ) } color = "primary" > { translation ( "Cancel" ) } < /Button> { noSelectedImages > 0 ? ( < Button onClick = { ( ) => onClickDeleteButton ( ) } color = "primary" > { translation ( "Delete" ) } < /Button>) : null} < /DialogActions> < /Dialog>); } ;