Compare commits
No commits in common. "376b5f665cca7ba65a584c34eb58523e9b359e97" and "9bbd3dd6b2ca9dbb1c635638fe9f0b8dd5ca7b29" have entirely different histories.
376b5f665c
...
9bbd3dd6b2
2 changed files with 80 additions and 37 deletions
|
|
@ -7,7 +7,7 @@ import ThemeManager from "../utils/ThemeManager";
|
|||
import HTML from "react-native-render-html";
|
||||
import {LinearGradient} from "expo-linear-gradient";
|
||||
import i18n from "i18n-js";
|
||||
import {Avatar, Card, Text} from 'react-native-paper';
|
||||
import {Avatar, Card, Text, Title} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
isAvailable: boolean,
|
||||
|
|
@ -28,13 +28,6 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
displayEvent: undefined,
|
||||
};
|
||||
|
||||
getIcon: Function;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getIcon = this.getIcon.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert the date string given by in the event list json to a date object
|
||||
* @param dateString
|
||||
|
|
@ -71,17 +64,18 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
getEventPreviewContainer() {
|
||||
if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
|
||||
const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null;
|
||||
const getImage = () => <Avatar.Image
|
||||
source={{uri: this.props.displayEvent['logo']}}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>;
|
||||
return (
|
||||
<Card style={{marginBottom: 10}}>
|
||||
{hasImage ?
|
||||
<Card.Title
|
||||
title={this.props.displayEvent['title']}
|
||||
subtitle={this.getFormattedEventTime(this.props.displayEvent)}
|
||||
left={getImage}
|
||||
left={() =>
|
||||
<Avatar.Image
|
||||
source={{uri: this.props.displayEvent['logo']}}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
}
|
||||
/> :
|
||||
<Card.Title
|
||||
title={this.props.displayEvent['title']}
|
||||
|
|
@ -143,14 +137,58 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
|
||||
getIcon() {
|
||||
return (
|
||||
<Avatar.Icon
|
||||
icon={this.props.icon}
|
||||
color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
<MaterialCommunityIcons
|
||||
name={this.props.icon}
|
||||
color={
|
||||
this.props.isAvailable ?
|
||||
this.props.color :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled
|
||||
}
|
||||
size={this.props.isSquare ? 50 : 40}/>
|
||||
);
|
||||
}
|
||||
|
||||
getText() {
|
||||
return (
|
||||
<View style={{
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
<Title style={{
|
||||
color: this.props.isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled,
|
||||
textAlign: this.props.isSquare ? 'center' : 'left',
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
{this.props.title}
|
||||
</Title>
|
||||
<Text style={{
|
||||
color: this.props.isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled,
|
||||
textAlign: this.props.isSquare ? 'center' : 'left',
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
{this.props.subtitle}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getContent() {
|
||||
if (this.props.isSquare) {
|
||||
return (
|
||||
<View>
|
||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
{this.getIcon()}
|
||||
</View>
|
||||
{this.getText()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
// console.log("rendering DashboardItem " + this.props.title);
|
||||
let marginRight = 10;
|
||||
|
|
@ -173,17 +211,28 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
overflow: 'hidden',
|
||||
}}
|
||||
onPress={this.props.clickAction}>
|
||||
|
||||
<Card.Title
|
||||
title={this.props.title}
|
||||
titleStyle={{color: color}}
|
||||
subtitle={this.props.subtitle}
|
||||
subtitleStyle={{color: color}}
|
||||
left={this.getIcon}
|
||||
/>
|
||||
<Card.Content>
|
||||
{this.getEventPreviewContainer()}
|
||||
</Card.Content>
|
||||
{this.props.isSquare ?
|
||||
<Card.Content>
|
||||
{this.getContent()}
|
||||
</Card.Content>
|
||||
:
|
||||
<View>
|
||||
<Card.Title
|
||||
title={this.props.title}
|
||||
titleStyle={{color: color}}
|
||||
subtitle={this.props.subtitle}
|
||||
subtitleStyle={{color: color}}
|
||||
left={(props) => <Avatar.Icon
|
||||
{...props}
|
||||
icon={this.props.icon}
|
||||
color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
{this.getEventPreviewContainer()}
|
||||
</Card.Content>
|
||||
</View>}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,6 @@ import i18n from "i18n-js";
|
|||
|
||||
const ICON_AMICALE = require('../assets/amicale.png');
|
||||
|
||||
function getAvatar() {
|
||||
return (
|
||||
<Avatar.Image size={48} source={ICON_AMICALE}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
);
|
||||
}
|
||||
|
||||
function FeedItem(props) {
|
||||
const {colors} = props.theme;
|
||||
return (
|
||||
|
|
@ -20,7 +13,8 @@ function FeedItem(props) {
|
|||
<Card.Title
|
||||
title={props.title}
|
||||
subtitle={props.subtitle}
|
||||
left={getAvatar}
|
||||
left={props => <Avatar.Image size={48} source={ICON_AMICALE}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
/>
|
||||
{props.full_picture !== '' && props.full_picture !== undefined ?
|
||||
<TouchableOpacity onPress={props.onImagePress}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue