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

Use card items when viewing the section

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-22 12:08:23 +02:00
parent fc7754588f
commit b31269586b
3 changed files with 81 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import * as React from 'react';
import {Animated} from "react-native";
import ImageListItem from "./ImageListItem";
import CardListItem from "./CardListItem";
type Props = {
@ -26,25 +27,25 @@ export default class CardList extends React.Component<Props> {
}
renderItem = ({item}: { item: cardItem }) => {
return (
<CardListItem item={item} key={item.title}/>
);
if (this.props.isHorizontal)
return <ImageListItem item={item} key={item.title}/>;
else
return <CardListItem item={item} key={item.title}/>;
};
keyExtractor = (item: cardItem) => item.title;
render() {
let containerStyle = {
...this.props.contentContainerStyle,
height: 150,
justifyContent: 'space-around',
};
if (!this.props.isHorizontal) {
let containerStyle;
if (this.props.isHorizontal) {
containerStyle = {
...containerStyle,
marginLeft: 'auto',
marginRight: 'auto',
height: 'auto',
...this.props.contentContainerStyle,
height: 150,
justifyContent: 'space-around',
};
} else {
containerStyle = {
...this.props.contentContainerStyle,
}
}
return (
@ -53,7 +54,7 @@ export default class CardList extends React.Component<Props> {
data={this.props.dataset}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
numColumns={this.props.isHorizontal ? undefined : 3}
numColumns={this.props.isHorizontal ? undefined : 2}
horizontal={this.props.isHorizontal}
contentContainerStyle={containerStyle}
/>

36
src/components/Lists/CardList/CardListItem.js
View file

@ -1,8 +1,7 @@
// @flow
import * as React from 'react';
import {Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from 'react-native';
import {Caption, Card, Paragraph} from 'react-native-paper';
import type {cardItem} from "./CardList";
type Props = {
@ -22,31 +21,24 @@ export default class CardListItem extends React.Component<Props> {
? item.image
: {uri: item.image};
return (
<TouchableRipple
<Card
style={{
width: 100,
height: 150,
width: '40%',
margin: 5,
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={item.onPress}
>
<View>
<Image
style={{
width: 100,
height: 100,
marginLeft: 'auto',
marginRight: 'auto',
}}
source={source}
/>
<Text style={{
marginTop: 5,
marginLeft: 'auto',
marginRight: 'auto',
}}>{item.title}</Text>
</View>
</TouchableRipple>
<Card.Cover
style={{height: 80}}
source={source}
/>
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</Card>
);
}
}

52
src/components/Lists/CardList/ImageListItem.js Normal file
View file

@ -0,0 +1,52 @@
// @flow
import * as React from 'react';
import {Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from 'react-native';
import type {cardItem} from "./CardList";
type Props = {
item: cardItem,
}
export default class ImageListItem extends React.Component<Props> {
shouldComponentUpdate() {
return false;
}
render() {
const props = this.props;
const item = props.item;
const source = typeof item.image === "number"
? item.image
: {uri: item.image};
return (
<TouchableRipple
style={{
width: 100,
height: 150,
margin: 5,
}}
onPress={item.onPress}
>
<View>
<Image
style={{
width: 100,
height: 100,
marginLeft: 'auto',
marginRight: 'auto',
}}
source={source}
/>
<Text style={{
marginTop: 5,
marginLeft: 'auto',
marginRight: 'auto',
}}>{item.title}</Text>
</View>
</TouchableRipple>
);
}
}