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

Updated react native paper to latest major version and fixed error on card press

Browse source
This commit is contained in:
Arnaud Vergnet 2020-07-17 17:28:39 +02:00
parent 8004820c2a
commit d1fc8a9625
5 changed files with 116 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -43,7 +43,7 @@
"react-native-linear-gradient": "^2.5.6", "react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.4.0", "react-native-localize": "^1.4.0",
"react-native-modalize": "^2.0.4", "react-native-modalize": "^2.0.4",
"react-native-paper": "^3.10.1", "react-native-paper": "^4.0.1",
"react-native-permissions": "^2.1.5", "react-native-permissions": "^2.1.5",
"react-native-push-notification": "^4.0.0", "react-native-push-notification": "^4.0.0",
"react-native-reanimated": "^1.9.0", "react-native-reanimated": "^1.9.0",

44
src/components/Home/EventDashboardItem.js
View file

@ -1,8 +1,8 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Avatar, Card, Text, withTheme} from 'react-native-paper'; import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
import {StyleSheet} from "react-native"; import {StyleSheet, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
@ -47,24 +47,28 @@ class EventDashBoardItem extends React.Component<Props> {
} else } else
subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA'); subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
return ( return (
<Card <Card style={styles.card}>
style={styles.card} <TouchableRipple
onPress={props.clickAction}> style={{flex: 1}}
<Card.Title onPress={props.clickAction}>
title={i18n.t('screens.home.dashboard.todayEventsTitle')} <View>
titleStyle={{color: textColor}} <Card.Title
subtitle={subtitle} title={i18n.t('screens.home.dashboard.todayEventsTitle')}
subtitleStyle={{color: textColor}} titleStyle={{color: textColor}}
left={() => subtitle={subtitle}
<Avatar.Icon subtitleStyle={{color: textColor}}
icon={'calendar-range'} left={() =>
color={iconColor} <Avatar.Icon
size={60} icon={'calendar-range'}
style={styles.avatar}/>} color={iconColor}
/> size={60}
<Card.Content> style={styles.avatar}/>}
{props.children} />
</Card.Content> <Card.Content>
{props.children}
</Card.Content>
</View>
</TouchableRipple>
</Card> </Card>
); );
} }

83
src/components/Home/FeedItem.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Button, Card, Text} from 'react-native-paper'; import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from "react-native"; import {Image, View} from "react-native";
import Autolink from "react-native-autolink"; import Autolink from "react-native-autolink";
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -75,45 +75,50 @@ class FeedItem extends React.Component<Props> {
margin: cardMargin, margin: cardMargin,
height: cardHeight, height: cardHeight,
}} }}
onPress={this.onPress}
> >
<Card.Title <TouchableRipple
title={this.props.title} style={{flex: 1}}
subtitle={this.props.subtitle} onPress={this.onPress}>
left={this.getAvatar} <View>
style={{height: titleHeight}} <Card.Title
/> title={this.props.title}
{hasImage ? subtitle={this.props.subtitle}
<View style={{marginLeft: 'auto', marginRight: 'auto'}}> left={this.getAvatar}
<ImageModal style={{height: titleHeight}}
resizeMode="contain" />
imageBackgroundColor={"#000"} {hasImage ?
style={{ <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
width: imageSize, <ImageModal
height: imageSize, resizeMode="contain"
}} imageBackgroundColor={"#000"}
source={{ style={{
uri: item.full_picture, width: imageSize,
}} height: imageSize,
/></View> : null} }}
<Card.Content> source={{
{item.message !== undefined ? uri: item.full_picture,
<Autolink }}
text={item.message} /></View> : null}
hashtag="facebook" <Card.Content>
component={Text} {item.message !== undefined ?
style={{height: textHeight}} <Autolink
/> : null text={item.message}
} hashtag="facebook"
</Card.Content> component={Text}
<Card.Actions style={{height: actionsHeight}}> style={{height: textHeight}}
<Button /> : null
onPress={this.onPress} }
icon={'plus'} </Card.Content>
style={{marginLeft: 'auto'}}> <Card.Actions style={{height: actionsHeight}}>
{i18n.t('screens.home.dashboard.seeMore')} <Button
</Button> onPress={this.onPress}
</Card.Actions> icon={'plus'}
style={{marginLeft: 'auto'}}>
{i18n.t('screens.home.dashboard.seeMore')}
</Button>
</Card.Actions>
</View>
</TouchableRipple>
</Card> </Card>
); );
} }

53
src/components/Home/PreviewEventDashboardItem.js
View file

@ -1,9 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StyleSheet} from "react-native"; import {StyleSheet, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {Avatar, Button, Card} from 'react-native-paper'; import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning"; import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
import CustomHTML from "../Overrides/CustomHTML"; import CustomHTML from "../Overrides/CustomHTML";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
@ -36,31 +36,36 @@ class PreviewEventDashboardItem extends React.Component<Props> {
return ( return (
<Card <Card
style={styles.card} style={styles.card}
onPress={props.clickAction}
elevation={3} elevation={3}
> >
{hasImage ? <TouchableRipple
<Card.Title style={{flex: 1}}
title={event.title} onPress={props.clickAction}>
subtitle={getFormattedEventTime(event.date_begin, event.date_end)} <View>
left={getImage} {hasImage ?
/> : <Card.Title
<Card.Title title={event.title}
title={event.title} subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
subtitle={getFormattedEventTime(event.date_begin, event.date_end)} left={getImage}
/>} /> :
{!isEmpty ? <Card.Title
<Card.Content style={styles.content}> title={event.title}
<CustomHTML html={event.description}/> subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
</Card.Content> : null} />}
{!isEmpty ?
<Card.Content style={styles.content}>
<CustomHTML html={event.description}/>
</Card.Content> : null}
<Card.Actions style={styles.actions}> <Card.Actions style={styles.actions}>
<Button <Button
icon={'chevron-right'} icon={'chevron-right'}
> >
{i18n.t("screens.home.dashboard.seeMore")} {i18n.t("screens.home.dashboard.seeMore")}
</Button> </Button>
</Card.Actions> </Card.Actions>
</View>
</TouchableRipple>
</Card> </Card>
); );
} else } else

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

@ -1,7 +1,8 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Caption, Card, Paragraph} from 'react-native-paper'; import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
import {View} from "react-native";
import type {cardItem} from "./CardList"; import type {cardItem} from "./CardList";
type Props = { type Props = {
@ -28,17 +29,23 @@ export default class CardListItem extends React.Component<Props> {
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={item.onPress}
> >
<Card.Cover <TouchableRipple
style={{height: 80}} style={{flex: 1}}
source={source} onPress={item.onPress}>
/> <View>
<Card.Content> <Card.Cover
<Paragraph>{item.title}</Paragraph> style={{height: 80}}
<Caption>{item.subtitle}</Caption> source={source}
</Card.Content> />
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</View>
</TouchableRipple>
</Card> </Card>
); );
} }
} }