"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7561/react/features/notifications/components/web/NotificationsContainer.tsx" (29 Sep 2023, 3080 Bytes) of package /linux/misc/jitsi-meet-7561.tar.gz:

    1 import React, { useCallback } from 'react';
    2 import { connect } from 'react-redux';
    3 import { makeStyles } from 'tss-react/mui';
    4 
    5 import { IReduxState, IStore } from '../../../app/types';
    6 import { hideNotification } from '../../actions';
    7 import { areThereNotifications } from '../../functions';
    8 import { INotificationProps } from '../../types';
    9 import NotificationsTransition from '../NotificationsTransition';
   10 
   11 import Notification from './Notification';
   12 interface IProps {
   13 
   14     /**
   15      * Whether we are a SIP gateway or not.
   16      */
   17     _iAmSipGateway: boolean;
   18 
   19     /**
   20      * Whether or not the chat is open.
   21      */
   22     _isChatOpen: boolean;
   23 
   24     /**
   25      * The notifications to be displayed, with the first index being the
   26      * notification at the top and the rest shown below it in order.
   27      */
   28     _notifications: Array<{
   29         props: INotificationProps;
   30         uid: string;
   31     }>;
   32 
   33     /**
   34      * Invoked to update the redux store in order to remove notifications.
   35      */
   36     dispatch: IStore['dispatch'];
   37 
   38     /**
   39      * Whether or not the notifications are displayed in a portal.
   40      */
   41     portal?: boolean;
   42 }
   43 
   44 const useStyles = makeStyles()(() => {
   45     return {
   46         container: {
   47             position: 'absolute',
   48             left: '16px',
   49             bottom: '84px',
   50             width: '320px',
   51             maxWidth: '100%',
   52             zIndex: 600
   53         },
   54 
   55         containerPortal: {
   56             width: '100%',
   57             maxWidth: 'calc(100% - 32px)'
   58         }
   59     };
   60 });
   61 
   62 const NotificationsContainer = ({
   63     _iAmSipGateway,
   64     _notifications,
   65     dispatch,
   66     portal
   67 }: IProps) => {
   68     const { classes, cx } = useStyles();
   69 
   70     const _onDismissed = useCallback((uid: string) => {
   71         dispatch(hideNotification(uid));
   72     }, []);
   73 
   74     if (_iAmSipGateway) {
   75         return null;
   76     }
   77 
   78     return (
   79         <div
   80             className = { cx(classes.container, {
   81                 [classes.containerPortal]: portal
   82             }) }
   83             id = 'notifications-container'>
   84             <NotificationsTransition>
   85                 {_notifications.map(({ props, uid }) => (
   86                     <Notification
   87                         { ...props }
   88                         key = { uid }
   89                         onDismissed = { _onDismissed }
   90                         uid = { uid } />
   91                 )) || null}
   92             </NotificationsTransition>
   93         </div>
   94     );
   95 };
   96 
   97 /**
   98  * Maps (parts of) the Redux state to the associated props for this component.
   99  *
  100  * @param {Object} state - The Redux state.
  101  * @private
  102  * @returns {IProps}
  103  */
  104 function _mapStateToProps(state: IReduxState) {
  105     const { notifications } = state['features/notifications'];
  106     const { iAmSipGateway } = state['features/base/config'];
  107     const { isOpen: isChatOpen } = state['features/chat'];
  108     const _visible = areThereNotifications(state);
  109 
  110     return {
  111         _iAmSipGateway: Boolean(iAmSipGateway),
  112         _isChatOpen: isChatOpen,
  113         _notifications: _visible ? notifications : []
  114     };
  115 }
  116 
  117 export default connect(_mapStateToProps)(NotificationsContainer);