From 1fc5d6e97eb8d4034bbd622d4a932fdaa329c2b3 Mon Sep 17 00:00:00 2001 From: Calinteodor Date: Tue, 14 Mar 2023 19:53:55 +0200 Subject: [PATCH] feat(notifications): NotificationsContainer native updates (#13047) feat(notifications): NotificationsContainer native updates --- .../filmstrip/components/native/Filmstrip.js | 7 +- ...ontainer.js => NotificationsContainer.tsx} | 75 ++++++++++--------- .../notifications/components/native/styles.js | 11 +++ 3 files changed, 53 insertions(+), 40 deletions(-) rename react/features/notifications/components/native/{NotificationsContainer.js => NotificationsContainer.tsx} (73%) diff --git a/react/features/filmstrip/components/native/Filmstrip.js b/react/features/filmstrip/components/native/Filmstrip.js index ef1ec71ca1..8243c35f40 100644 --- a/react/features/filmstrip/components/native/Filmstrip.js +++ b/react/features/filmstrip/components/native/Filmstrip.js @@ -9,7 +9,6 @@ import { Platform } from '../../../base/react'; import { connect } from '../../../base/redux'; import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants'; import { getHideSelfView } from '../../../base/settings/functions.any'; -import { areThereNotifications } from '../../../notifications/functions'; import { isToolboxVisible } from '../../../toolbox/functions'; import { setVisibleRemoteParticipants } from '../../actions'; import { @@ -53,8 +52,6 @@ type Props = { _localParticipantId: string, - _notificationsAvailable: boolean, - /** * The participants in the conference. */ @@ -252,7 +249,6 @@ class Filmstrip extends PureComponent { _disableSelfView, _toolboxVisible, _localParticipantId, - _notificationsAvailable, _participants, _visible } = this.props; @@ -261,7 +257,7 @@ class Filmstrip extends PureComponent { return null; } - const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible && !_notificationsAvailable; + const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible; const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW; const filmstripStyle = isNarrowAspectRatio ? styles.filmstripNarrow : styles.filmstripWide; const { height, width } = this._getDimensions(); @@ -335,7 +331,6 @@ function _mapStateToProps(state) { _clientWidth: responsiveUI.clientWidth, _disableSelfView: disableSelfView, _localParticipantId: getLocalParticipant(state)?.id, - _notificationsAvailable: areThereNotifications(state), _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS, _toolboxVisible: isToolboxVisible(state), _visible: enabled && isFilmstripVisible(state) diff --git a/react/features/notifications/components/native/NotificationsContainer.js b/react/features/notifications/components/native/NotificationsContainer.tsx similarity index 73% rename from react/features/notifications/components/native/NotificationsContainer.js rename to react/features/notifications/components/native/NotificationsContainer.tsx index e74f6aa423..a152562f46 100644 --- a/react/features/notifications/components/native/NotificationsContainer.js +++ b/react/features/notifications/components/native/NotificationsContainer.tsx @@ -1,32 +1,39 @@ -// @flow +/* eslint-disable lines-around-comment */ import React, { Component } from 'react'; +import { WithTranslation } from 'react-i18next'; import { Platform } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; +import { Edge, SafeAreaView } from 'react-native-safe-area-context'; -import { connect } from '../../../base/redux'; +import { IReduxState } from '../../../app/types'; +import { connect } from '../../../base/redux/functions'; import { hideNotification } from '../../actions'; import { areThereNotifications } from '../../functions'; import NotificationsTransition from '../NotificationsTransition'; import Notification from './Notification'; +// @ts-ignore +import styles from './styles'; -type Props = { +interface IProps extends WithTranslation { /** * The notifications to be displayed, with the first index being the * notification at the top and the rest shown below it in order. */ - _notifications: Array, + _notifications: Array; /** * Invoked to update the redux store in order to remove notifications. */ - dispatch: Function, + dispatch: Function; - toolboxVisible: boolean -}; + /** + * Checks toolbox visibility. + */ + toolboxVisible: boolean; +} /** * Implements a React {@link Component} which displays notifications and handles @@ -35,19 +42,19 @@ type Props = { * * @augments {Component} */ -class NotificationsContainer extends Component { +class NotificationsContainer extends Component { /** * A timeout id returned by setTimeout. */ - _notificationDismissTimeout: ?TimeoutID; + _notificationDismissTimeout: any; /** * Initializes a new {@code NotificationsContainer} instance. * * @inheritdoc */ - constructor(props: Props) { + constructor(props: IProps) { super(props); /** @@ -70,6 +77,7 @@ class NotificationsContainer extends Component { */ componentDidMount() { // Set the initial dismiss timeout (if any) + // @ts-ignore this._manageDismissTimeout(); } @@ -78,37 +86,36 @@ class NotificationsContainer extends Component { * * @inheritdoc */ - componentDidUpdate(prevProps: Props) { + componentDidUpdate(prevProps: IProps) { this._manageDismissTimeout(prevProps); } /** * Sets/clears the dismiss timeout for the top notification. * - * @param {P} [prevProps] - The previous properties (if called from + * @param {IProps} [prevProps] - The previous properties (if called from * {@code componentDidUpdate}). * @returns {void} * @private */ - _manageDismissTimeout(prevProps: ?Props) { + _manageDismissTimeout(prevProps: IProps) { const { _notifications } = this.props; if (_notifications.length) { const notification = _notifications[0]; - const previousNotification - = prevProps && prevProps._notifications.length - ? prevProps._notifications[0] - : undefined; + const previousNotification = prevProps?._notifications.length + ? prevProps._notifications[0] : undefined; if (notification !== previousNotification) { this._clearNotificationDismissTimeout(); - if (notification && notification.timeout) { - const { - timeout, - uid - } = notification; + // @ts-ignore + if (notification?.timeout) { + // @ts-ignore + const { timeout, uid } = notification; + + // @ts-ignore this._notificationDismissTimeout = setTimeout(() => { // Perform a no-op if a timeout is not specified. this._onDismissed(uid); @@ -142,21 +149,20 @@ class NotificationsContainer extends Component { this._notificationDismissTimeout = null; } - _onDismissed: number => void; - /** * Emits an action to remove the notification from the redux store so it * stops displaying. * - * @param {number} uid - The id of the notification to be removed. + * @param {Object} uid - The id of the notification to be removed. * @private * @returns {void} */ - _onDismissed(uid) { + _onDismissed(uid: any) { const { _notifications } = this.props; // Clear the timeout only if it's the top notification that's being // dismissed (the timeout is set only for the top one). + // @ts-ignore if (!_notifications.length || _notifications[0].uid === uid) { this._clearNotificationDismissTimeout(); } @@ -171,20 +177,23 @@ class NotificationsContainer extends Component { */ render() { const { _notifications, toolboxVisible } = this.props; - const bottomEdge = Platform.OS === 'ios' && !toolboxVisible; + const notificationsContainerStyle + = toolboxVisible ? styles.withToolbox : styles.withoutToolbox; return ( + edges = { [ Platform.OS === 'ios' && 'bottom', 'left', 'right' ].filter(Boolean) as Edge[] } + style = { notificationsContainerStyle as any }> { - _notifications.map((notification, index) => { + _notifications.map(notification => { + // @ts-ignore const { props, uid } = notification; return ( ); @@ -194,8 +203,6 @@ class NotificationsContainer extends Component { ); } - - _onDismissed: number => void; } /** @@ -206,7 +213,7 @@ class NotificationsContainer extends Component { * @private * @returns {Props} */ -export function mapStateToProps(state: Object) { +export function mapStateToProps(state: IReduxState) { const { notifications } = state['features/notifications']; const _visible = areThereNotifications(state); diff --git a/react/features/notifications/components/native/styles.js b/react/features/notifications/components/native/styles.js index 9f0e2b1dab..d3ae396219 100644 --- a/react/features/notifications/components/native/styles.js +++ b/react/features/notifications/components/native/styles.js @@ -105,5 +105,16 @@ export default { display: 'flex', flexDirection: 'row', marginLeft: BaseTheme.spacing[1] + }, + + withToolbox: { + bottom: 64, + position: 'absolute', + width: '100%' + }, + + withoutToolbox: { + position: 'absolute', + width: '100%' } };