Commit d0999bc8 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Wietse Kuipers
Browse files

Added pull to refresh, fixed list height

parent 739a3e42
import React from 'react';
import React, { Component } from 'react';
import { Text, View, SectionList } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/calendar';
......@@ -67,32 +67,52 @@ const renderItem = (item) => {
);
};
const Calendar = (props) => {
if (!props.calendarFetched) {
props.retrieveCalendar(props.token);
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}
componentDidMount() {
this.handleRefresh();
}
handleRefresh = () => {
this.setState({ refreshing: true });
this.props.retrieveCalendar(this.props.token)
.then(() => this.setState({ refreshing: false }));
};
render() {
if (!this.props.calendarFetched) {
return (
<View>
<Text>
No calendar retrieved!
</Text>
</View>
);
}
return (
<View>
<Text>
No calendar retrieved!
</Text>
<SectionList
style={styles.sectionList}
renderItem={renderItem}
renderSectionHeader={
itemHeader => <Text style={styles.sectionHeader}>{itemHeader.section.key}</Text>
}
sections={eventListToSections(this.props.eventList)}
keyExtractor={item => item.dayNumber}
stickySectionHeadersEnabled
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
/>
</View>
);
}
return (
<View>
<SectionList
style={styles.sectionList}
renderItem={renderItem}
renderSectionHeader={
itemHeader => <Text style={styles.sectionHeader}>{itemHeader.section.key}</Text>
}
sections={eventListToSections(props.eventList)}
keyExtractor={item => item.dayNumber}
stickySectionHeadersEnabled
/>
</View>
);
};
}
Calendar.propTypes = {
eventList: React.PropTypes.arrayOf(React.PropTypes.shape({
......
import { StyleSheet } from 'react-native';
import { StyleSheet, Dimensions } from 'react-native';
import { TOTAL_BAR_HEIGHT } from './navigator';
import { colors } from '../../style';
const styles = StyleSheet.create({
......@@ -23,14 +24,15 @@ const styles = StyleSheet.create({
flex: 7,
},
sectionList: {
backgroundColor: colors.white,
backgroundColor: colors.background,
height: Dimensions.get('window').height - TOTAL_BAR_HEIGHT,
},
sectionHeader: {
backgroundColor: colors.white,
backgroundColor: colors.background,
fontSize: 22,
padding: 10,
paddingLeft: 20,
color: colors.black,
color: colors.textColour,
},
});
......
......@@ -5,6 +5,8 @@ import { colors } from '../../style';
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
export const TOTAL_BAR_HEIGHT = APPBAR_HEIGHT + 20;
const styles = StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT,
......
......@@ -4,9 +4,10 @@ export const colors = {
magenta: '#E62272',
darkMagenta: '#C2185B',
white: '#FFFFFF',
background: '#FAFAFA',
black: '#000000',
lightGray: '#BBBBBB',
gray: '#6A6869',
gray: '#616161',
textColour: '#313131',
darkGrey: '#373737',
dividerGrey: 'rgba(0, 0, 0, 0.12)',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment