1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- // @flow
-
- import * as React from 'react';
- import {StyleSheet} from "react-native";
- import i18n from "i18n-js";
- import {Avatar, Button, Card} from 'react-native-paper';
- import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
- import CustomHTML from "../Overrides/CustomHTML";
- import type {CustomTheme} from "../../managers/ThemeManager";
- import type {event} from "../../screens/Home/HomeScreen";
-
- type Props = {
- event?: event,
- clickAction: () => void,
- theme?: CustomTheme,
- }
-
- /**
- * Component used to display an event preview if an event is available
- */
- class PreviewEventDashboardItem extends React.Component<Props> {
-
- render() {
- const props = this.props;
- const isEmpty = props.event == null
- ? true
- : isDescriptionEmpty(props.event.description);
-
- if (props.event != null) {
- const event = props.event;
- const hasImage = event.logo !== '' && event.logo != null;
- const getImage = () => <Avatar.Image
- source={{uri: event.logo}}
- size={50}
- style={styles.avatar}/>;
- return (
- <Card
- style={styles.card}
- onPress={props.clickAction}
- elevation={3}
- >
- {hasImage ?
- <Card.Title
- title={event.title}
- subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
- left={getImage}
- /> :
- <Card.Title
- title={event.title}
- subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
- />}
- {!isEmpty ?
- <Card.Content style={styles.content}>
- <CustomHTML html={event.description}/>
- </Card.Content> : null}
-
- <Card.Actions style={styles.actions}>
- <Button
- icon={'chevron-right'}
- >
- {i18n.t("screens.home.dashboard.seeMore")}
- </Button>
- </Card.Actions>
- </Card>
- );
- } else
- return null;
- }
- }
-
- const styles = StyleSheet.create({
- card: {
- marginBottom: 10
- },
- content: {
- maxHeight: 150,
- overflow: 'hidden',
- },
- actions: {
- marginLeft: 'auto',
- marginTop: 'auto',
- flexDirection: 'row'
- },
- avatar: {
- backgroundColor: 'transparent'
- }
- });
-
- export default PreviewEventDashboardItem;
|