Reorg notifications feature files

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

@@ -0,0 +1,93 @@
+// @flow
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { Icon } from '../../../base/font-icons';
+import { translate } from '../../../base/i18n';
+
+import AbstractNotification, {
+    type Props
+} from '../AbstractNotification';
+
+import styles from './styles';
+
+/**
+ * Implements a React {@link Component} to display a notification.
+ *
+ * @extends Component
+ */
+class Notification extends AbstractNotification<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            isDismissAllowed
+        } = this.props;
+
+        return (
+            <View
+                pointerEvents = 'box-none'
+                style = { styles.notification }>
+                <View style = { styles.contentColumn }>
+                    <View
+                        pointerEvents = 'box-none'
+                        style = { styles.notificationContent }>
+                        {
+                            this._renderContent()
+                        }
+                    </View>
+                </View>
+                {
+                    isDismissAllowed
+                    && <TouchableOpacity onPress = { this._onDismissed }>
+                        <Icon
+                            name = { 'close' }
+                            style = { styles.dismissIcon } />
+                    </TouchableOpacity>
+                }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the notification's content. If the title or title key is present
+     * it will be just the title. Otherwise it will fallback to description.
+     *
+     * @returns {Array<ReactElement>}
+     * @private
+     */
+    _renderContent() {
+        const { t, title, titleArguments, titleKey } = this.props;
+        const titleText = title || (titleKey && t(titleKey, titleArguments));
+
+        if (titleText) {
+            return (
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.contentText } >
+                    { titleText }
+                </Text>
+            );
+        }
+
+        return this._getDescription().map((line, index) => (
+            <Text
+                key = { index }
+                numberOfLines = { 1 }
+                style = { styles.contentText }>
+                { line }
+            </Text>
+        ));
+    }
+
+    _getDescription: () => Array<string>;
+
+    _onDismissed: () => void;
+}
+
+export default translate(Notification);

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

@@ -0,0 +1,68 @@
+// @flow
+
+import React from 'react';
+import { View } from 'react-native';
+
+import { connect } from '../../../base/redux';
+
+import AbstractNotificationsContainer, {
+    _abstractMapStateToProps,
+    type Props as AbstractProps
+} from '../AbstractNotificationsContainer';
+
+import Notification from './Notification';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * Any custom styling applied to the notifications container.
+     */
+    style: Object
+};
+
+/**
+ * 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
+     */
+    render() {
+        const { _notifications } = this.props;
+
+        // Currently the native container displays only the topmost notification
+        const theNotification
+            = _notifications && _notifications.length && _notifications[0];
+
+        if (!theNotification) {
+            return null;
+        }
+
+        return (
+            <View
+                pointerEvents = 'box-none'
+                style = { [
+                    styles.notificationContainer,
+                    this.props.style
+                ] } >
+                <Notification
+                    { ...theNotification.props }
+                    onDismissed = { this._onDismissed }
+                    uid = { theNotification.uid } />
+            </View>
+        );
+    }
+
+    _onDismissed: number => void;
+}
+
+export default connect(_abstractMapStateToProps)(NotificationsContainer);

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

@@ -0,0 +1,4 @@
+// @flow
+
+export { default as Notification } from './Notification';
+export { default as NotificationsContainer } from './NotificationsContainer';

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

@@ -0,0 +1,61 @@
+// @flow
+
+import { BoxModel, ColorPalette } from '../../../base/styles';
+
+/**
+ * The styles of the React {@code Components} of the feature notifications.
+ */
+export default {
+
+    /**
+     * The content (left) column of the notification.
+     */
+    contentColumn: {
+        justifyContent: 'center',
+        flex: 1,
+        flexDirection: 'column',
+        paddingLeft: 1.5 * BoxModel.padding
+    },
+
+    /**
+     * Test style of the notification.
+     */
+    contentText: {
+        alignSelf: 'flex-start',
+        color: ColorPalette.white
+    },
+
+    /**
+     * Dismiss icon style.
+     */
+    dismissIcon: {
+        color: ColorPalette.white,
+        fontSize: 20,
+        padding: 1.5 * BoxModel.padding
+    },
+
+    /**
+     * Outermost view of a single notification.
+     */
+    notification: {
+        backgroundColor: '#768898',
+        flexDirection: 'row',
+        height: 48,
+        marginTop: 0.5 * BoxModel.margin
+    },
+
+    /**
+     * Outermost container of a list of notifications.
+     */
+    notificationContainer: {
+        flexGrow: 0,
+        justifyContent: 'flex-end'
+    },
+
+    /**
+     * Wrapper for the message.
+     */
+    notificationContent: {
+        flexDirection: 'column'
+    }
+};