2020-02-04 14:42:19 +01:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2020-04-02 15:33:12 +02:00
|
|
|
import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
|
2020-02-04 14:42:19 +01:00
|
|
|
import HTML from "react-native-render-html";
|
|
|
|
|
import {Linking} from "expo";
|
2020-03-30 15:28:08 +02:00
|
|
|
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
|
2020-04-02 15:33:12 +02:00
|
|
|
import {Card, Portal, withTheme} from 'react-native-paper';
|
2020-03-30 15:28:08 +02:00
|
|
|
import DateManager from "../../managers/DateManager";
|
2020-04-02 15:33:12 +02:00
|
|
|
import ImageView from "react-native-image-viewing";
|
2020-02-04 14:42:19 +01:00
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
navigation: Object,
|
2020-03-06 09:12:56 +01:00
|
|
|
route: Object
|
2020-02-04 14:42:19 +01:00
|
|
|
};
|
|
|
|
|
|
2020-04-02 15:33:12 +02:00
|
|
|
type State = {
|
|
|
|
|
imageModalVisible: boolean,
|
|
|
|
|
};
|
|
|
|
|
|
2020-02-11 01:05:24 +01:00
|
|
|
function openWebLink(event, link) {
|
2020-02-04 14:42:19 +01:00
|
|
|
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
2020-03-29 15:59:25 +02:00
|
|
|
* Class defining a planning event information page.
|
2020-02-04 14:42:19 +01:00
|
|
|
*/
|
2020-04-02 15:33:12 +02:00
|
|
|
class PlanningDisplayScreen extends React.Component<Props, State> {
|
2020-03-06 09:12:56 +01:00
|
|
|
|
|
|
|
|
displayData = this.props.route.params['data'];
|
|
|
|
|
|
2020-03-09 23:15:13 +01:00
|
|
|
colors: Object;
|
|
|
|
|
|
2020-04-02 15:33:12 +02:00
|
|
|
state = {
|
|
|
|
|
imageModalVisible: false,
|
|
|
|
|
};
|
|
|
|
|
|
2020-03-09 23:15:13 +01:00
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.colors = props.theme.colors;
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-02 15:33:12 +02:00
|
|
|
showImageModal = () => {
|
|
|
|
|
this.setState({imageModalVisible: true});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
hideImageModal = () => {
|
|
|
|
|
this.setState({imageModalVisible: false});
|
|
|
|
|
};
|
|
|
|
|
|
2020-02-04 14:42:19 +01:00
|
|
|
render() {
|
2020-02-11 01:05:24 +01:00
|
|
|
// console.log("rendering planningDisplayScreen");
|
2020-03-30 15:28:08 +02:00
|
|
|
let subtitle = getFormattedEventTime(
|
2020-03-22 17:02:00 +01:00
|
|
|
this.displayData["date_begin"], this.displayData["date_end"]);
|
2020-03-30 15:28:08 +02:00
|
|
|
let dateString = getDateOnlyString(this.displayData["date_begin"]);
|
2020-03-22 17:02:00 +01:00
|
|
|
if (dateString !== null)
|
|
|
|
|
subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
|
2020-02-04 14:42:19 +01:00
|
|
|
return (
|
2020-03-07 11:49:32 +01:00
|
|
|
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
|
2020-03-08 12:05:22 +01:00
|
|
|
<Card.Title
|
|
|
|
|
title={this.displayData.title}
|
2020-03-22 17:02:00 +01:00
|
|
|
subtitle={subtitle}
|
2020-03-08 12:05:22 +01:00
|
|
|
/>
|
2020-03-06 23:15:01 +01:00
|
|
|
{this.displayData.logo !== null ?
|
2020-04-02 15:33:12 +02:00
|
|
|
<TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
|
2020-03-06 23:15:01 +01:00
|
|
|
<Image style={{flex: 1, resizeMode: "contain"}}
|
|
|
|
|
source={{uri: this.displayData.logo}}/>
|
2020-04-02 15:33:12 +02:00
|
|
|
</TouchableOpacity>
|
2020-03-06 23:15:01 +01:00
|
|
|
: <View/>}
|
2020-02-04 14:42:19 +01:00
|
|
|
|
2020-03-06 23:15:01 +01:00
|
|
|
{this.displayData.description !== null ?
|
|
|
|
|
// Surround description with div to allow text styling if the description is not html
|
2020-03-08 12:05:22 +01:00
|
|
|
<Card.Content>
|
|
|
|
|
<HTML html={"<div>" + this.displayData.description + "</div>"}
|
|
|
|
|
tagsStyles={{
|
2020-03-09 23:15:13 +01:00
|
|
|
p: {color: this.colors.text,},
|
|
|
|
|
div: {color: this.colors.text}
|
2020-03-08 12:05:22 +01:00
|
|
|
}}
|
|
|
|
|
onLinkPress={openWebLink}/>
|
|
|
|
|
</Card.Content>
|
2020-03-06 23:15:01 +01:00
|
|
|
: <View/>}
|
2020-04-02 15:33:12 +02:00
|
|
|
<Portal>
|
|
|
|
|
<ImageView
|
|
|
|
|
images={[{uri: this.displayData.logo}]}
|
|
|
|
|
imageIndex={0}
|
|
|
|
|
presentationStyle={"fullScreen"}
|
|
|
|
|
visible={this.state.imageModalVisible}
|
|
|
|
|
onRequestClose={this.hideImageModal}
|
|
|
|
|
/>
|
|
|
|
|
</Portal>
|
2020-03-06 23:15:01 +01:00
|
|
|
</ScrollView>
|
2020-02-04 14:42:19 +01:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-09 23:15:13 +01:00
|
|
|
|
|
|
|
|
export default withTheme(PlanningDisplayScreen);
|
