src/components/confirmation-dialog/confirmation-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, DialogContentText } from "@material-ui/core";
   7 import { WithDialogProps } from "~/store/dialog/with-dialog";
   8 import { WarningIcon } from '~/components/icon/icon';
   9
  10 export interface ConfirmationDialogDataProps {
  11     title: string;
  12     text: string;
  13     info?: string;
  14     cancelButtonLabel?: string;
  15     confirmButtonLabel?: string;
  16 }
  17
  18 export interface ConfirmationDialogProps {
  19     onConfirm: () => void;
  20 }
  21
  22 export const ConfirmationDialog = (props: ConfirmationDialogProps & WithDialogProps<ConfirmationDialogDataProps>) =>
  23     <Dialog open={props.open}>
  24         <DialogTitle>{props.data.title}</DialogTitle>
  25         <DialogContent style={{ display: 'flex', alignItems: 'center' }}>
  26             <WarningIcon />
  27             <DialogContentText style={{ paddingLeft: '8px' }}>
  28                 <div>{props.data.text}</div>
  29                 <div>{props.data.info}</div>
  30             </DialogContentText>
  31         </DialogContent>
  32         <DialogActions style={{ margin: '0px 24px 24px' }}>
  33             <Button
  34                 variant='text'
  35                 color='primary'
  36                 onClick={props.closeDialog}>
  37                 {props.data.cancelButtonLabel || 'Cancel'}
  38             </Button>
  39             <Button
  40                 variant='contained'
  41                 color='primary'
  42                 type='submit'
  43                 onClick={props.onConfirm}>
  44                 {props.data.confirmButtonLabel || 'Ok'}
  45             </Button>
  46         </DialogActions>
  47     </Dialog>;