[RN] Implement Notifications on mobile

react/features/notifications/components/NotificationsContainer.native.js

@@ -0,0 +1,145 @@
+// @flow
+
+import React from 'react';
+import { View } from 'react-native';
+import { connect } from 'react-redux';
+
+import {
+    isNarrowAspectRatio,
+    makeAspectRatioAware
+} from '../../base/responsive-ui';
+import { FILMSTRIP_SIZE, isFilmstripVisible } from '../../filmstrip';
+import { HANGUP_BUTTON_SIZE } from '../../toolbox';
+
+import AbstractNotificationsContainer, {
+    _abstractMapStateToProps,
+    type Props as AbstractProps
+} from './AbstractNotificationsContainer';
+import Notification from './Notification';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * True if the {@code Filmstrip} is visible, false otherwise.
+     */
+    _filmstripVisible: boolean,
+
+    /**
+     * True if the {@ćode Toolbox} is visible, false otherwise.
+     */
+    _toolboxVisible: boolean
+};
+
+/**
+ * The margin of the container to be kept from other components.
+ */
+const CONTAINER_MARGIN = 10;
+
+/**
+ * Implements a React {@link Component} which displays notifications and handles
+ * automatic dismissmal after a notification is shown for a defined timeout
+ * period.
+ *
+ * @extends {Component}
+ */
+class NotificationsContainer extends AbstractNotificationsContainer<Props> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { _notifications } = this.props;
+
+        if (!_notifications || !_notifications.length) {
+            return null;
+        }
+
+        return (
+            <View
+                pointerEvents = 'box-none'
+                style = { styles.notificationOverlay }>
+                <View
+                    pointerEvents = 'box-none'
+                    style = { [
+                        styles.notificationContainer,
+                        this._getContainerStyle()
+                    ] }>
+                    {
+                        _notifications.map(notification => {
+                            const { props, uid } = notification;
+
+                            return (
+                                <Notification
+                                    { ...props }
+                                    key = { uid }
+                                    onDismissed = { this._onDismissed }
+                                    uid = { uid } />
+
+                            );
+                        })
+                    }
+                </View>
+            </View>
+        );
+    }
+
+    /**
+     * Generates a style object that is to be used for the notification
+     * container.
+     *
+     * @private
+     * @returns {?Object}
+     */
+    _getContainerStyle() {
+        const { _filmstripVisible, _toolboxVisible } = this.props;
+
+        // The filmstrip only affects the position if we're on a narrow view.
+        const _narrow = isNarrowAspectRatio(this);
+
+        let bottom = 0;
+        let right = 0;
+
+        // The container needs additional distance from bottom when the
+        // filmstrip or the toolbox is visible.
+        _filmstripVisible && !_narrow && (right += FILMSTRIP_SIZE);
+        _filmstripVisible && _narrow && (bottom += FILMSTRIP_SIZE);
+        _toolboxVisible && (bottom += HANGUP_BUTTON_SIZE);
+
+        bottom += CONTAINER_MARGIN;
+
+        return {
+            bottom,
+            right
+        };
+    }
+
+    _onDismissed: number => void;
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated NotificationsContainer's
+ * props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _filmstripVisible: boolean,
+ *     _notifications: Array,
+ *     _showNotifications: boolean,
+ *     _toolboxVisible: boolean
+ * }}
+ */
+export function _mapStateToProps(state: Object) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _filmstripVisible: isFilmstripVisible(state),
+        _toolboxVisible: state['features/toolbox'].visible
+    };
+}
+
+export default connect(_mapStateToProps)(
+    makeAspectRatioAware(NotificationsContainer));