Commit eff5b066 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Merge branch 'fix/member-view' into 'master'

Simplify MemberView by fixing size instead of calculating it dynamically

See merge request thalia/ThaliApp-react!103
parents 976b5361 c5f60784
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Alert, Image, ScrollView, Text, View, RefreshControl, Button } from 'react-native';
import { FlatList, Alert, Image, ScrollView, Text, View, RefreshControl, Button } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
import styles from './style/event';
import styles, { memberSize } from './style/event';
import MemberView from './MemberView';
import LoadingScreen from './LoadingScreen';
import ErrorScreen from './ErrorScreen';
......@@ -216,44 +216,23 @@ class Event extends Component {
<View>
<View style={styles.divider} />
<Text style={styles.registrationsTitle}>Aanmeldingen</Text>
<View style={styles.registrationsView}>
{/*
Create a grid for the registrations:
First create chunks of max 3 and map those to a View
Then inside that View create 3 MemberViews (if is a real registration) or
a placeholder View (to make sure flex space is filled)
*/}
{ this.props.registrations.map((item, index) => {
if (index % 3 === 0) {
return this.props.registrations.slice(index, index + 3);
}
return null;
}).filter(item => item)
.map((list) => {
while (list.length < 3) {
list.push({ pk: null });
}
const key = list[0].pk.toString().concat(list[1].pk, list[2].pk);
return (
<View key={key} style={styles.registrationsRow}>
{list.map((reg, i) => {
const style = i === 1 ? styles.registrationsItemMargin :
styles.registrationsItem;
if (reg.name) {
return (
<MemberView key={key + i.toString()} member={reg} style={style} />
);
}
return (
<View key={key + i.toString()} style={style} />
);
})}
</View>
);
})
}
</View>
<FlatList
numColumns={3}
data={this.props.registrations}
renderItem={item => (
<MemberView
key={item.item.pk}
member={{
pk: item.item.member,
photo: item.item.photo,
name: item.item.name,
}}
style={styles.memberView}
size={memberSize}
/>
)}
keyExtractor={item => item.pk}
/>
</View>
);
}
......
......@@ -20,7 +20,7 @@ const MemberView = (props) => {
}
return (
<SquareView style={props.style}>
<SquareView style={props.style} size={props.size} >
<TouchableHighlight
style={styles.image}
onPress={() => props.loadProfile(props.token, props.member.member)}
......@@ -40,6 +40,7 @@ MemberView.propTypes = {
photo: PropTypes.string,
member: PropTypes.number,
}).isRequired,
size: PropTypes.number.isRequired,
style: ViewPropTypes.style,
token: PropTypes.string.isRequired,
loadProfile: PropTypes.func.isRequired,
......
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { View, ViewPropTypes, StyleSheet } from 'react-native';
class SquareView extends Component {
constructor(props) {
super(props);
this.state = {
width: 0,
height: 0,
direction: 'column', // 'column' and 'row'
};
}
render() {
const square = (
<View
{...this.props}
style={[this.props.style, { width: this.state.width, height: this.state.height }]}
onLayout={(event) => {
const { width, height } = event.nativeEvent.layout;
const sideLength = Math.max(width, height);
if (sideLength) {
this.setState({ width: sideLength, height: sideLength });
} else {
this.setState({ direction: 'column' });
}
}}
>
{this.props.children}
</View>
);
switch (this.state.direction) {
case 'column':
return square;
case 'row':
// eslint-disable-next-line react-native/no-inline-styles,react-native/no-color-literals
return (<View style={{ backgroundColor: 'transparent' }}>{square}</View>);
default:
return null;
}
}
}
const SquareView = props => (
<View
style={[props.style, { width: props.size, height: props.size }]}
>
{props.children}
</View>
);
SquareView.propTypes = {
children: PropTypes.node.isRequired,
size: PropTypes.number.isRequired,
style: ViewPropTypes.style,
};
......
import { Dimensions } from 'react-native';
import { create, colors } from '../../style';
const windowWidth = Dimensions.get('window').width;
export const memberSize = (windowWidth - 64) / 3;
const styles = create({
eventView: {
padding: 16,
......@@ -84,27 +88,6 @@ const styles = create({
color: colors.darkGrey,
marginBottom: 16,
},
registrationsView: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'space-between',
},
registrationsRow: {
flex: 1,
flexDirection: 'row',
alignSelf: 'stretch',
justifyContent: 'space-between',
marginBottom: 16,
},
registrationsItem: {
flex: 1,
},
registrationsItemMargin: {
flex: 1,
marginLeft: 16,
marginRight: 16,
},
divider: {
marginLeft: -16,
marginRight: -16,
......@@ -121,6 +104,10 @@ const styles = create({
flex: {
flex: 1,
},
memberView: {
marginBottom: 16,
marginRight: 16,
},
});
export default styles;
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