github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React from "react";
    18  import { Box, Button, ModalBox } from "mds";
    19  
    20  interface ButtonProps {
    21    label?: string;
    22    variant?: "regular" | "callAction" | "secondary";
    23    icon?: React.ReactNode;
    24    iconLocation?: "start" | "end";
    25    fullWidth?: boolean;
    26    disabled?: boolean;
    27    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    28  }
    29  
    30  type ConfirmDialogProps = {
    31    isOpen?: boolean;
    32    onClose: () => void;
    33    onCancel?: () => void;
    34    onConfirm: () => void;
    35    title: string;
    36    isLoading?: boolean;
    37    confirmationContent: React.ReactNode | React.ReactNode[];
    38    cancelText?: string;
    39    confirmText?: string;
    40    confirmButtonProps?: ButtonProps &
    41      React.ButtonHTMLAttributes<HTMLButtonElement>;
    42    cancelButtonProps?: ButtonProps &
    43      React.ButtonHTMLAttributes<HTMLButtonElement>;
    44    titleIcon?: React.ReactNode;
    45    confirmationButtonSimple?: boolean;
    46  };
    47  
    48  const ConfirmDialog = ({
    49    isOpen = false,
    50    onClose,
    51    onCancel,
    52    onConfirm,
    53    title = "",
    54    isLoading,
    55    confirmationContent,
    56    cancelText = "Cancel",
    57    confirmText = "Confirm",
    58    confirmButtonProps = undefined,
    59    cancelButtonProps = undefined,
    60    titleIcon = null,
    61    confirmationButtonSimple = false,
    62  }: ConfirmDialogProps) => {
    63    return (
    64      <ModalBox
    65        title={title}
    66        titleIcon={titleIcon}
    67        onClose={onClose}
    68        open={isOpen}
    69        customMaxWidth={510}
    70      >
    71        <Box>{confirmationContent}</Box>
    72        <Box
    73          sx={{
    74            display: "flex",
    75            justifyContent: "flex-end",
    76            gap: 10,
    77            marginTop: 20,
    78          }}
    79        >
    80          <Button
    81            onClick={onCancel || onClose}
    82            disabled={isLoading}
    83            type="button"
    84            {...cancelButtonProps}
    85            variant="regular"
    86            id={"confirm-cancel"}
    87            label={cancelText}
    88          />
    89  
    90          <Button
    91            id={"confirm-ok"}
    92            onClick={onConfirm}
    93            label={confirmText}
    94            disabled={isLoading}
    95            variant={"secondary"}
    96            {...confirmButtonProps}
    97          />
    98        </Box>
    99      </ModalBox>
   100    );
   101  };
   102  
   103  export default ConfirmDialog;