vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Improved planning display

Browse source
This commit is contained in:
keplyx 2020-03-08 12:05:22 +01:00
parent 2e579368a8
commit 2f3e171b08
2 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
screens/PlanningDisplayScreen.js
View file

@ -6,7 +6,7 @@ import ThemeManager from "../utils/ThemeManager";
import HTML from "react-native-render-html"; import HTML from "react-native-render-html";
import {Linking} from "expo"; import {Linking} from "expo";
import PlanningEventManager from '../utils/PlanningEventManager'; import PlanningEventManager from '../utils/PlanningEventManager';
import {Subheading, Title} from 'react-native-paper'; import {Card} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -28,14 +28,12 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
// console.log("rendering planningDisplayScreen"); // console.log("rendering planningDisplayScreen");
return ( return (
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}> <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
<Title> <Card.Title
{this.displayData.title} title={this.displayData.title}
</Title> subtitle={PlanningEventManager.getFormattedTime(this.displayData) + ' | ' + PlanningEventManager.getEventStartDate(this.displayData)}
<Subheading style={{marginTop: 10,}}> />
{PlanningEventManager.getFormattedTime(this.displayData)}
</Subheading>
{this.displayData.logo !== null ? {this.displayData.logo !== null ?
<View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}> <View style={{width: '100%', height: 300}}>
<Image style={{flex: 1, resizeMode: "contain"}} <Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.displayData.logo}}/> source={{uri: this.displayData.logo}}/>
</View> </View>
@ -43,14 +41,14 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
{this.displayData.description !== null ? {this.displayData.description !== null ?
// Surround description with div to allow text styling if the description is not html // Surround description with div to allow text styling if the description is not html
<Card.Content>
<HTML html={"<div>" + this.displayData.description + "</div>"} <HTML html={"<div>" + this.displayData.description + "</div>"}
tagsStyles={{ tagsStyles={{
p: { p: {color: ThemeManager.getCurrentThemeVariables().text,},
color: ThemeManager.getCurrentThemeVariables().text,
},
div: {color: ThemeManager.getCurrentThemeVariables().text} div: {color: ThemeManager.getCurrentThemeVariables().text}
}} }}
onLinkPress={openWebLink}/> onLinkPress={openWebLink}/>
</Card.Content>
: <View/>} : <View/>}
</ScrollView> </ScrollView>
); );

19
screens/PlanningScreen.js
View file

@ -1,13 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {BackHandler, Image, View} from 'react-native'; import {BackHandler, View} from 'react-native';
import i18n from "i18n-js"; import i18n from "i18n-js";
import ThemeManager from "../utils/ThemeManager";
import {LocaleConfig} from 'react-native-calendars'; import {LocaleConfig} from 'react-native-calendars';
import WebDataManager from "../utils/WebDataManager"; import WebDataManager from "../utils/WebDataManager";
import PlanningEventManager from '../utils/PlanningEventManager'; import PlanningEventManager from '../utils/PlanningEventManager';
import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; import {Avatar, Divider, List} from 'react-native-paper';
import CustomAgenda from "../components/CustomAgenda"; import CustomAgenda from "../components/CustomAgenda";
LocaleConfig.locales['fr'] = { LocaleConfig.locales['fr'] = {
@ -31,7 +30,7 @@ type State = {
const FETCH_URL = "https://amicale-insat.fr/event/json/list"; const FETCH_URL = "https://amicale-insat.fr/event/json/list";
const AGENDA_MONTH_SPAN = 6; const AGENDA_MONTH_SPAN = 3;
/** /**
* Class defining the app's planning screen * Class defining the app's planning screen
@ -138,7 +137,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
<List.Item <List.Item
title={item.title} title={item.title}
description={PlanningEventManager.getFormattedTime(item)} description={PlanningEventManager.getFormattedTime(item)}
left={props => <Avatar.Image source={{uri: item.logo}} />} left={props => <Avatar.Image
source={{uri: item.logo}}
style={{backgroundColor: 'transparent'}}
/>}
onPress={onPress} onPress={onPress}
/> />
</View> </View>
@ -164,9 +166,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
} }
rowHasChanged(r1: Object, r2: Object) { rowHasChanged(r1: Object, r2: Object) {
if (r1 !== undefined && r2 !== undefined) return false;
return r1.title !== r2.title; // if (r1 !== undefined && r2 !== undefined)
else return !(r1 === undefined && r2 === undefined); // return r1.title !== r2.title;
// else return !(r1 === undefined && r2 === undefined);
} }
/** /**