{"size": 2565, "ext": "js", "max_stars_repo_path": "src/components/Notifications/Discussion.js", "max_stars_repo_name": "txstate-etc/mobile-tracs-react", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Notifications/Discussion.js", "max_issues_repo_name": "txstate-etc/mobile-tracs-react", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Notifications/Discussion.js", "max_forks_repo_name": "txstate-etc/mobile-tracs-react", "max_forks_repo_forks_event_min_datetime": "2019-08-09T10:03:14.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-19T16:52:26.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 27.5806451613, "max_line_length": 91, "alphanum_fraction": 0.6432748538}
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import TabIcon from '../TabBar/TabIcon';

import {notification} from '../../constants/colors';
import Icon from 'react-native-vector-icons/Ionicons';
import Ripple from 'react-native-material-ripple';
import Swipeout from 'react-native-swipeout';

const circleSize = 50;

class Discussion extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const styles = StyleSheet.create({
			container: {
				flexDirection: 'row',
				alignItems: 'center',
				padding: 5,
				width: this.props.deviceWidth,
				backgroundColor: notification.background,
				borderRadius: 0,
				height: this.props.height
			},
			circle: {
				width: circleSize,
				height: circleSize,
				marginLeft: 5,
				marginRight: 5,
				backgroundColor: this.props.read ? notification.readCircle : notification.unreadCircle,
				borderRadius: circleSize / 2,
				flexDirection: 'row',
				justifyContent: 'center',
				alignItems: 'center'
			},
			content: {
				backgroundColor: notification.background,
				flex: 1,
				padding: 5
			},
			topicText: {
				fontSize: 20,
				fontWeight: 'bold',
				paddingRight: 10
			},
			threadText: {
				fontSize: 16,
				fontWeight: '400',
				paddingRight: 5
			},
			authorText: {
				fontWeight: '300',
				paddingRight: 5
			},
			forwardArrow: {
				paddingRight: 5
			}
		});
		Ripple.defaultProps.rippleContainerBorderRadius = styles.container.borderRadius;
		return (
			<Swipeout right={[{text: "Delete"}]}>
				<Ripple onPress={this.props.onPress} rippleDuration={600}>
					<View style={styles.container}>
						<View style={styles.circle}>
							<TabIcon name="comments" size={circleSize / 2}
											 color={this.props.read ? notification.readIcon : notification.unreadIcon}/>
						</View>
						<View style={styles.content}>
							<Text style={styles.topicText}
										numberOfLines={1}
										ellipsizeMode="tail">{this.props.topic || "Topic title not found"}</Text>
							<Text style={styles.threadText}
										numberOfLines={1}
										ellipsizeMode="tail">{this.props.thread || "Conversation title not found"}</Text>
							<Text style={styles.authorText}
										numberOfLines={1}
										ellipsizeMode="tail">{`Posted By: ${this.props.author || 'Anonymous' }`}</Text>
						</View>
						<Icon name="ios-arrow-forward"
									size={24}
									color={notification.forwardArrow}
									style={styles.forwardArrow}/>
					</View>
				</Ripple>
			</Swipeout>
		);
	}
}

export default Discussion;