github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/snackbar/snackbar.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import React, { useCallback, useEffect } from 'react';
    17  import { Button } from '../button';
    18  import { Close } from '../../../images';
    19  import { SnackbarStatus, UpdateSnackbar, useSnackbar } from '../../utils/store';
    20  import { PlainDialog } from '../dialog/ConfirmationDialog';
    21  
    22  const showSnackbarDurationMillis: number = 15 * 1000;
    23  
    24  export const Snackbar = (): JSX.Element => {
    25      const [show, status, content] = useSnackbar(({ show, status, content }) => [show, status, content]);
    26      useEffect(() => {
    27          if (!show) {
    28              return;
    29          }
    30          const timer1 = setTimeout(() => {
    31              UpdateSnackbar.set({ show: false });
    32          }, showSnackbarDurationMillis);
    33  
    34          return () => {
    35              clearTimeout(timer1);
    36          };
    37      }, [show]);
    38  
    39      const cssColor: string =
    40          status === SnackbarStatus.SUCCESS
    41              ? 'success'
    42              : status === SnackbarStatus.WARN
    43                ? 'warn'
    44                : status === SnackbarStatus.ERROR
    45                  ? 'error'
    46                  : 'invalid-color';
    47  
    48      const onClickClose = useCallback(() => {
    49          UpdateSnackbar.set({ show: false });
    50      }, []);
    51  
    52      return (
    53          <PlainDialog
    54              open={show}
    55              onClose={onClickClose}
    56              classNames={`k-snackbar snackbar-color-${cssColor}`}
    57              disableBackground={false}
    58              center={false}>
    59              <div className={''}>
    60                  <div className={'k-snackbar-content'}>
    61                      <div className={'k-snackbar-text'}>
    62                          <span>{content}</span>
    63                      </div>
    64                      <div className={'k-snackbar-button'}>
    65                          <span>
    66                              <Button onClick={onClickClose} icon={<Close width="18px" height="18px" />} />
    67                          </span>
    68                      </div>
    69                  </div>
    70              </div>
    71          </PlainDialog>
    72      );
    73  };