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

Changed cards to basic view

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-22 10:42:02 +02:00
parent 8eaa46b900
commit 443f179f1d
3 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ export default class CardList extends React.Component<Props> {
renderItem = ({item}: { item: cardItem }) => { renderItem = ({item}: { item: cardItem }) => {
return ( return (
<CardListItem width={150} item={item} key={item.title}/> <CardListItem item={item} key={item.title}/>
); );
}; };
@ -36,7 +36,7 @@ export default class CardList extends React.Component<Props> {
render() { render() {
let containerStyle = { let containerStyle = {
...this.props.contentContainerStyle, ...this.props.contentContainerStyle,
height: 200, height: 150,
justifyContent: 'space-around', justifyContent: 'space-around',
}; };
if (!this.props.isHorizontal) { if (!this.props.isHorizontal) {
@ -53,7 +53,7 @@ export default class CardList extends React.Component<Props> {
data={this.props.dataset} data={this.props.dataset}
renderItem={this.renderItem} renderItem={this.renderItem}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
numColumns={this.props.isHorizontal ? undefined : 2} numColumns={this.props.isHorizontal ? undefined : 3}
horizontal={this.props.isHorizontal} horizontal={this.props.isHorizontal}
contentContainerStyle={containerStyle} contentContainerStyle={containerStyle}
/> />

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

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

3
src/screens/Services/ServicesScreen.js
View file

@ -8,7 +8,7 @@ import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible"; import {Collapsible} from "react-navigation-collapsible";
import {CommonActions} from "@react-navigation/native"; import {CommonActions} from "@react-navigation/native";
import {Animated, View} from "react-native"; import {Animated, View} from "react-native";
import {Avatar, Card, List, TouchableRipple} from "react-native-paper"; import {Avatar, Card, Divider, List, TouchableRipple} from "react-native-paper";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -229,6 +229,7 @@ class ServicesScreen extends React.Component<Props> {
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20 paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}} }}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}} scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
ItemSeparatorComponent={() => <Divider/>}
/> />
} }
} }