lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improved services list display and enabled paging for easier navigation

Browse source
This commit is contained in:
Arnaud Vergnet 2020-07-14 22:28:23 +02:00
parent 97072be390
commit 870cbfdadf
2 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Lists/CardList/CardList.js
View file

@ -1,13 +1,15 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from "react-native"; import {Animated, Dimensions} from "react-native";
import ImageListItem from "./ImageListItem"; import ImageListItem from "./ImageListItem";
import CardListItem from "./CardListItem"; import CardListItem from "./CardListItem";
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
type Props = { type Props = {
dataset: Array<cardItem>, dataset: Array<cardItem>,
isHorizontal: boolean, isHorizontal: boolean,
contentContainerStyle?: ViewStyle,
} }
export type cardItem = { export type cardItem = {
@ -26,9 +28,18 @@ export default class CardList extends React.Component<Props> {
isHorizontal: false, isHorizontal: false,
} }
windowWidth: number;
horizontalItemSize: number;
constructor(props: Props) {
super(props);
this.windowWidth = Dimensions.get('window').width;
this.horizontalItemSize = this.windowWidth/4; // So that we can fit 3 items and a part of the 4th => user knows he can scroll
}
renderItem = ({item}: { item: cardItem }) => { renderItem = ({item}: { item: cardItem }) => {
if (this.props.isHorizontal) if (this.props.isHorizontal)
return <ImageListItem item={item} key={item.title}/>; return <ImageListItem item={item} key={item.title} width={this.horizontalItemSize}/>;
else else
return <CardListItem item={item} key={item.title}/>; return <CardListItem item={item} key={item.title}/>;
}; };
@ -39,7 +50,7 @@ export default class CardList extends React.Component<Props> {
let containerStyle = {}; let containerStyle = {};
if (this.props.isHorizontal) { if (this.props.isHorizontal) {
containerStyle = { containerStyle = {
height: 150, height: this.horizontalItemSize + 50,
justifyContent: 'space-around', justifyContent: 'space-around',
}; };
} }
@ -51,7 +62,9 @@ export default class CardList extends React.Component<Props> {
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
numColumns={this.props.isHorizontal ? undefined : 2} numColumns={this.props.isHorizontal ? undefined : 2}
horizontal={this.props.isHorizontal} horizontal={this.props.isHorizontal}
contentContainerStyle={containerStyle} contentContainerStyle={this.props.isHorizontal ? containerStyle : this.props.contentContainerStyle}
pagingEnabled={this.props.isHorizontal}
snapToInterval={this.props.isHorizontal ? (this.horizontalItemSize+5)*3 : null}
/> />
); );
} }

16
src/components/Lists/CardList/ImageListItem.js
View file

@ -7,6 +7,7 @@ import type {cardItem} from "./CardList";
type Props = { type Props = {
item: cardItem, item: cardItem,
width: number,
} }
export default class ImageListItem extends React.Component<Props> { export default class ImageListItem extends React.Component<Props> {
@ -16,16 +17,15 @@ export default class ImageListItem extends React.Component<Props> {
} }
render() { render() {
const props = this.props; const item = this.props.item;
const item = props.item;
const source = typeof item.image === "number" const source = typeof item.image === "number"
? item.image ? item.image
: {uri: item.image}; : {uri: item.image};
return ( return (
<TouchableRipple <TouchableRipple
style={{ style={{
width: 100, width: this.props.width,
height: 150, height: this.props.width + 40,
margin: 5, margin: 5,
}} }}
onPress={item.onPress} onPress={item.onPress}
@ -33,8 +33,8 @@ export default class ImageListItem extends React.Component<Props> {
<View> <View>
<Image <Image
style={{ style={{
width: 80, width: this.props.width - 20,
height: 80, height: this.props.width - 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
@ -45,7 +45,9 @@ export default class ImageListItem extends React.Component<Props> {
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
textAlign: 'center' textAlign: 'center'
}}>{item.title}</Text> }}>
{item.title}
</Text>
</View> </View>
</TouchableRipple> </TouchableRipple>
); );