73 lines
3.2 KiB
JavaScript
73 lines
3.2 KiB
JavaScript
/**
|
|
* TournamentInfoViewController
|
|
*
|
|
* Yeah, I do it iOS style. Handles fetching and displaying tournament data.
|
|
*
|
|
* @copyright Ryan McGrath 2018.
|
|
*/
|
|
|
|
import moment from 'moment';
|
|
import React from 'react';
|
|
import {ScrollView, StyleSheet, Image, Text, View, TouchableOpacity, Dimensions} from 'react-native';
|
|
//import Markdown from 'react-native-simple-markdown'
|
|
import Markdown from 'react-native-markdown-renderer';
|
|
import SegmentedControlTab from 'react-native-segmented-control-tab';
|
|
import SettingsList, {Header, Item} from 'react-native-settings-list';
|
|
|
|
import styles from '../styles';
|
|
import MemeleeViewController from './MemeleeViewController';
|
|
|
|
const w = Dimensions.get('screen').width;
|
|
/* <View style={styles.tournamentInfoButtonsRow}>
|
|
<TouchableOpacity style={styles.tournamentRegistrationButton} onPress={this.registerForTournament}>
|
|
<Text style={styles.tournamentRegistrationButtonText}>Register</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.tournamentBookmarkButton} onPress={this.registerForTournament}>
|
|
<Text style={styles.tournamentRegistrationButtonText}>Bookmark</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
*/
|
|
|
|
|
|
export default class TournamentInfoViewController extends MemeleeViewController {
|
|
state = {
|
|
selectedIndex: 0
|
|
};
|
|
|
|
onEventTapped = (evt) => {
|
|
this.props.navigator.push({
|
|
screen: 'memelee.tournamentEventInfoScreen',
|
|
title: evt.name,
|
|
passProps: {tournament: this.props.tournament, evt: evt},
|
|
navigatorStyle: {tabBarHidden: true}
|
|
});
|
|
}
|
|
|
|
swapIndex = (index) => {
|
|
this.setState({
|
|
selectedIndex: index
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const s = StyleSheet.flatten(styles.tournamentDetailsEventWrapper);
|
|
|
|
return (<ScrollView>
|
|
<Image style={[styles.tournamentInfoHeader, {width: w}]} source={this.props.tournament.memeleePromoImage.msrc} />
|
|
|
|
<SegmentedControlTab values={['Overview', 'Events']} borderRadius={0} activeTabStyle={styles.tournamentInfoActiveTableStyle} tabStyle={styles.tournamentInfoTabsStyle} tabTextStyle={styles.tournamentInfoTabTextStyle} selectedIndex={this.state.selectedIndex} onTabPress={this.swapIndex} />
|
|
|
|
{this.state.selectedIndex === 0 ? (<View style={styles.tournamentDetailsTextWrapper}>
|
|
<Markdown style={styles.tournamentDetailsText}>
|
|
{this.props.tournament.details && this.props.tournament.details !== '' ? this.props.tournament.details : ''}
|
|
</Markdown>
|
|
</View>) : null}
|
|
|
|
{this.state.selectedIndex === 1 ? (<SettingsList style={styles.tournamentEventsWrapper} borderWidth={s.borderBottomWidth} borderColor={s.borderBottomColor}>
|
|
{this.props.tournament.memeleeEvents.map(evt => (
|
|
<Item key={evt.id} itemWidth={50} title={evt.name} backgroundColor={s.backgroundColor} style={styles.tournamentDetailsEventWrapper} titleStyle={styles.tournamentDetailsEventItem} />
|
|
))}
|
|
</SettingsList>) : null}
|
|
</ScrollView>);
|
|
}
|
|
}
|