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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 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  import React, { useEffect, useState } from "react";
    17  import { useSelector } from "react-redux";
    18  import { ModalBox, Snackbar } from "mds";
    19  import { CSSObject } from "styled-components";
    20  import { AppState, useAppDispatch } from "../../../../store";
    21  import { setModalSnackMessage } from "../../../../systemSlice";
    22  import MainError from "../MainError/MainError";
    23  
    24  interface IModalProps {
    25    onClose: () => void;
    26    modalOpen: boolean;
    27    title: string | React.ReactNode;
    28    children: any;
    29    wideLimit?: boolean;
    30    titleIcon?: React.ReactNode;
    31    iconColor?: "default" | "delete" | "accept";
    32    sx?: CSSObject;
    33  }
    34  
    35  const ModalWrapper = ({
    36    onClose,
    37    modalOpen,
    38    title,
    39    children,
    40    wideLimit = true,
    41    titleIcon = null,
    42    iconColor = "default",
    43    sx,
    44  }: IModalProps) => {
    45    const dispatch = useAppDispatch();
    46    const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
    47  
    48    const modalSnackMessage = useSelector(
    49      (state: AppState) => state.system.modalSnackBar,
    50    );
    51  
    52    useEffect(() => {
    53      dispatch(setModalSnackMessage(""));
    54    }, [dispatch]);
    55  
    56    useEffect(() => {
    57      if (modalSnackMessage) {
    58        if (modalSnackMessage.message === "") {
    59          setOpenSnackbar(false);
    60          return;
    61        }
    62        // Open SnackBar
    63        if (modalSnackMessage.type !== "error") {
    64          setOpenSnackbar(true);
    65        }
    66      }
    67    }, [modalSnackMessage]);
    68  
    69    const closeSnackBar = () => {
    70      setOpenSnackbar(false);
    71      dispatch(setModalSnackMessage(""));
    72    };
    73  
    74    let message = "";
    75  
    76    if (modalSnackMessage) {
    77      message = modalSnackMessage.detailedErrorMsg;
    78      if (message === "" || (message && message.length < 5)) {
    79        message = modalSnackMessage.message;
    80      }
    81    }
    82  
    83    return (
    84      <ModalBox
    85        onClose={onClose}
    86        open={modalOpen}
    87        title={title}
    88        titleIcon={titleIcon}
    89        widthLimit={wideLimit}
    90        sx={sx}
    91        iconColor={iconColor}
    92      >
    93        <MainError isModal={true} />
    94        <Snackbar
    95          onClose={closeSnackBar}
    96          open={openSnackbar}
    97          message={message}
    98          mode={"inline"}
    99          variant={modalSnackMessage.type === "error" ? "error" : "default"}
   100          autoHideDuration={modalSnackMessage.type === "error" ? 10 : 5}
   101          condensed
   102        />
   103        {children}
   104      </ModalBox>
   105    );
   106  };
   107  
   108  export default ModalWrapper;