mirror of https://github.com/jitsi/jitsi-meet
Bettenbuk Zoltan
7 years ago
committed by
Saúl Ibarra Corretgé
parent
e5cc732b72
commit
60f7ba7301
@ -1,106 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
import { Text, TouchableOpacity, View } from 'react-native'; |
||||
|
||||
import { Icon } from '../../base/font-icons'; |
||||
import { translate } from '../../base/i18n'; |
||||
|
||||
import { NOTIFICATION_TYPE } from '../constants'; |
||||
|
||||
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 { |
||||
appearance, |
||||
isDismissAllowed, |
||||
t, |
||||
title, |
||||
titleArguments, |
||||
titleKey |
||||
} = this.props; |
||||
|
||||
let notificationStyle; |
||||
|
||||
switch (appearance) { |
||||
case NOTIFICATION_TYPE.ERROR: |
||||
notificationStyle = styles.notificationTypeError; |
||||
break; |
||||
case NOTIFICATION_TYPE.NORMAL: |
||||
notificationStyle = styles.notificationTypeNormal; |
||||
break; |
||||
case NOTIFICATION_TYPE.SUCCESS: |
||||
notificationStyle = styles.notificationTypeSuccess; |
||||
break; |
||||
case NOTIFICATION_TYPE.WARNING: |
||||
notificationStyle = styles.notificationTypeWarning; |
||||
break; |
||||
case NOTIFICATION_TYPE.INFO: |
||||
default: |
||||
notificationStyle = styles.notificationTypeInfo; |
||||
} |
||||
|
||||
return ( |
||||
<View |
||||
pointerEvents = 'box-none' |
||||
style = { [ |
||||
styles.notification, |
||||
notificationStyle |
||||
] }> |
||||
<View style = { styles.contentColumn }> |
||||
<View |
||||
pointerEvents = 'box-none' |
||||
style = { styles.notificationTitle }> |
||||
<Text style = { styles.titleText }> |
||||
{ |
||||
title || t(titleKey, titleArguments) |
||||
} |
||||
</Text> |
||||
</View> |
||||
<View |
||||
pointerEvents = 'box-none' |
||||
style = { styles.notificationContent }> |
||||
{ |
||||
this._getDescription().map((line, index) => ( |
||||
<Text |
||||
key = { index } |
||||
style = { styles.contentText }> |
||||
{ line } |
||||
</Text> |
||||
)) |
||||
} |
||||
</View> |
||||
</View> |
||||
{ |
||||
isDismissAllowed |
||||
&& <TouchableOpacity onPress = { this._onDismissed }> |
||||
<Icon |
||||
name = { 'close' } |
||||
style = { styles.dismissIcon } /> |
||||
</TouchableOpacity> |
||||
} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
_getDescription: () => Array<string>; |
||||
|
||||
_onDismissed: () => void; |
||||
} |
||||
|
||||
export default translate(Notification); |
||||
@ -1,68 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
import { View } from 'react-native'; |
||||
import { connect } from 'react-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 |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { _notifications } = this.props; |
||||
|
||||
if (!_notifications || !_notifications.length) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<View |
||||
pointerEvents = 'box-none' |
||||
style = { [ |
||||
styles.notificationContainer, |
||||
this.props.style |
||||
] } > |
||||
{ |
||||
_notifications.map( |
||||
({ props, uid }) => ( |
||||
<Notification |
||||
{ ...props } |
||||
key = { uid } |
||||
onDismissed = { this._onDismissed } |
||||
uid = { uid } />)) |
||||
} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
_onDismissed: number => void; |
||||
} |
||||
|
||||
export default connect(_abstractMapStateToProps)(NotificationsContainer); |
||||
@ -1,104 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import { BoxModel, createStyleSheet, ColorPalette } from '../../base/styles'; |
||||
|
||||
/** |
||||
* The styles of the React {@code Components} of the feature notifications. |
||||
*/ |
||||
export default createStyleSheet({ |
||||
|
||||
/** |
||||
* The content (left) column of the notification. |
||||
*/ |
||||
contentColumn: { |
||||
flex: 1, |
||||
flexDirection: 'column', |
||||
padding: BoxModel.padding |
||||
}, |
||||
|
||||
/** |
||||
* Test style of the notification. |
||||
*/ |
||||
contentText: { |
||||
color: ColorPalette.white |
||||
}, |
||||
|
||||
/** |
||||
* Dismiss icon style. |
||||
*/ |
||||
dismissIcon: { |
||||
alignSelf: 'center', |
||||
color: ColorPalette.white, |
||||
fontSize: 16, |
||||
padding: 1.5 * BoxModel.padding |
||||
}, |
||||
|
||||
/** |
||||
* Outermost view of a single notification. |
||||
*/ |
||||
notification: { |
||||
borderRadius: 5, |
||||
flexDirection: 'row', |
||||
marginTop: 0.5 * BoxModel.margin |
||||
}, |
||||
|
||||
/** |
||||
* Outermost container of a list of notifications. |
||||
*/ |
||||
notificationContainer: { |
||||
flexGrow: 0, |
||||
justifyContent: 'flex-end', |
||||
padding: 2 * BoxModel.padding, |
||||
paddingBottom: BoxModel.padding |
||||
}, |
||||
|
||||
/** |
||||
* Wrapper for the message (without title). |
||||
*/ |
||||
notificationContent: { |
||||
flexDirection: 'column', |
||||
paddingVertical: 0.5 * BoxModel.padding |
||||
}, |
||||
|
||||
/** |
||||
* The View containing the title. |
||||
*/ |
||||
notificationTitle: { |
||||
paddingVertical: 0.5 * BoxModel.padding |
||||
}, |
||||
|
||||
/** |
||||
* Background settings for different notification types. |
||||
*/ |
||||
|
||||
notificationTypeError: { |
||||
backgroundColor: ColorPalette.R400 |
||||
}, |
||||
|
||||
notificationTypeInfo: { |
||||
backgroundColor: ColorPalette.N500 |
||||
}, |
||||
|
||||
notificationTypeNormal: { |
||||
// NOTE: Mobile has black background when the large video doesn't render
|
||||
// a stream, so we avoid using black as the background of the normal
|
||||
// type notifications.
|
||||
backgroundColor: ColorPalette.N500 |
||||
}, |
||||
|
||||
notificationTypeSuccess: { |
||||
backgroundColor: ColorPalette.G400 |
||||
}, |
||||
|
||||
notificationTypeWarning: { |
||||
backgroundColor: ColorPalette.Y200 |
||||
}, |
||||
|
||||
/** |
||||
* Title text style. |
||||
*/ |
||||
titleText: { |
||||
color: ColorPalette.white, |
||||
fontWeight: 'bold' |
||||
} |
||||
}); |
||||
Loading…
Reference in new issue