12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- // @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";
-
- type Props = {
- event: Object,
- clickAction: Function,
- }
-
- /**
- * 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 === undefined
- ? true
- : isDescriptionEmpty(props.event['description']);
-
- if (props.event !== undefined && props.event !== null) {
- const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null;
- const getImage = () => <Avatar.Image
- source={{uri: props.event['logo']}}
- size={50}
- style={styles.avatar}/>;
- return (
- <Card
- style={styles.card}
- onPress={props.clickAction}
- elevation={3}
- >
- {hasImage ?
- <Card.Title
- title={props.event['title']}
- subtitle={getFormattedEventTime(props.event['date_begin'], props.event['date_end'])}
- left={getImage}
- /> :
- <Card.Title
- title={props.event['title']}
- subtitle={getFormattedEventTime(props.event['date_begin'], props.event['date_end'])}
- />}
- {!isEmpty ?
- <Card.Content style={styles.content}>
- <CustomHTML html={props.event['description']}/>
- </Card.Content> : null}
-
- <Card.Actions style={styles.actions}>
- <Button
- icon={'chevron-right'}
- >
- {i18n.t("homeScreen.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;
|