12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- // @flow
-
- import * as React from 'react';
- import {StyleSheet, View} from 'react-native';
- import i18n from 'i18n-js';
- import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
- import {getTimeOnlyString, isDescriptionEmpty} from '../../utils/Planning';
- import CustomHTML from '../Overrides/CustomHTML';
- import type {PlanningEventType} from '../../utils/Planning';
-
- type PropsType = {
- event?: PlanningEventType | null,
- clickAction: () => void,
- };
-
- const styles = StyleSheet.create({
- card: {
- marginBottom: 10,
- },
- content: {
- maxHeight: 150,
- overflow: 'hidden',
- },
- actions: {
- marginLeft: 'auto',
- marginTop: 'auto',
- flexDirection: 'row',
- },
- avatar: {
- backgroundColor: 'transparent',
- },
- });
-
- /**
- * Component used to display an event preview if an event is available
- */
- // eslint-disable-next-line react/prefer-stateless-function
- class PreviewEventDashboardItem extends React.Component<PropsType> {
- static defaultProps = {
- event: null,
- };
-
- render(): React.Node {
- const {props} = this;
- const {event} = props;
- const isEmpty =
- event == null ? true : isDescriptionEmpty(event.description);
-
- if (event != null) {
- const hasImage = event.logo !== '' && event.logo != null;
- const getImage = (): React.Node => (
- <Avatar.Image
- source={{uri: event.logo}}
- size={50}
- style={styles.avatar}
- />
- );
- return (
- <Card style={styles.card} elevation={3}>
- <TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
- <View>
- {hasImage ? (
- <Card.Title
- title={event.title}
- subtitle={getTimeOnlyString(event.date_begin)}
- left={getImage}
- />
- ) : (
- <Card.Title
- title={event.title}
- subtitle={getTimeOnlyString(event.date_begin)}
- />
- )}
- {!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>
- </View>
- </TouchableRipple>
- </Card>
- );
- }
- return null;
- }
- }
-
- export default PreviewEventDashboardItem;
|