application-amicale/src/components/Lists/Clubs/ClubListItem.js

81 lines
2.6 KiB
JavaScript

// @flow
import * as React from 'react';
import {Avatar, Chip, List, withTheme} from 'react-native-paper';
import {View} from "react-native";
import type {category, club} from "../../../screens/Amicale/Clubs/ClubListScreen";
import type {CustomTheme} from "../../../managers/ThemeManager";
type Props = {
onPress: () => void,
categoryTranslator: (id: number) => category,
item: club,
height: number,
theme: CustomTheme,
}
class ClubListItem extends React.Component<Props> {
hasManagers: boolean;
constructor(props) {
super(props);
this.hasManagers = props.item.responsibles.length > 0;
}
shouldComponentUpdate() {
return false;
}
getCategoriesRender(categories: Array<number | null>) {
let final = [];
for (let i = 0; i < categories.length; i++) {
if (categories[i] !== null) {
const category: category = this.props.categoryTranslator(categories[i]);
final.push(
<Chip
style={{marginRight: 5, marginBottom: 5}}
key={this.props.item.id + ':' + category.id}
>
{category.name}
</Chip>
);
}
}
return <View style={{flexDirection: 'row'}}>{final}</View>;
}
render() {
const categoriesRender = this.getCategoriesRender.bind(this, this.props.item.category);
const colors = this.props.theme.colors;
return (
<List.Item
title={this.props.item.name}
description={categoriesRender}
onPress={this.props.onPress}
left={(props) => <Avatar.Image
{...props}
style={{backgroundColor: 'transparent'}}
size={64}
source={{uri: this.props.item.logo}}/>}
right={(props) => <Avatar.Icon
{...props}
style={{
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: 'transparent',
}}
size={48}
icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"}
color={this.hasManagers ? colors.success : colors.primary}
/>}
style={{
height: this.props.height,
justifyContent: 'center',
}}
/>
);
}
}
export default withTheme(ClubListItem);