// @flow import * as React from 'react'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {View} from "react-native"; 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, Title} from 'react-native-paper'; type Props = { isAvailable: boolean, icon: string, color: string, title: string, subtitle: React.Node, clickAction: Function, isSquare: boolean, isSquareLeft: boolean, displayEvent: ?Object, } export default class DashboardItem extends React.Component { static defaultProps = { isSquare: false, isSquareLeft: true, displayEvent: undefined, }; shouldComponentUpdate(nextProps: Props): boolean { return nextProps.isAvailable !== this.props.isAvailable || nextProps.subtitle !== this.props.subtitle; } /** * Convert the date string given by in the event list json to a date object * @param dateString * @return {Date} */ stringToDate(dateString: ?string): ?Date { let date = new Date(); if (dateString === undefined || dateString === null) date = undefined; else if (dateString.split(' ').length > 1) { let timeStr = dateString.split(' ')[1]; date.setHours(parseInt(timeStr.split(':')[0]), parseInt(timeStr.split(':')[1]), 0); } else date = undefined; return date; } padStr(i: number) { return (i < 10) ? "0" + i : "" + i; } getFormattedEventTime(event: Object): string { let formattedStr = ''; let startDate = this.stringToDate(event['date_begin']); let endDate = this.stringToDate(event['date_end']); if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) + ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes()); else if (startDate !== undefined && startDate !== null) formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()); return formattedStr } getEventPreviewContainer() { if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; return ( {hasImage ? } /> : } 70 ? 100 : 50, overflow: 'hidden', }}> " + this.props.displayEvent['description'] + ""} tagsStyles={{ p: { color: ThemeManager.getCurrentThemeVariables().text, }, div: {color: ThemeManager.getCurrentThemeVariables().text}, }}/> {i18n.t("homeScreen.dashboard.seeMore")} ); } else return } getIcon() { return ( ); } getText() { return ( {this.props.title} {this.props.subtitle} ); } getContent() { if (this.props.isSquare) { return ( {this.getIcon()} {this.getText()} ); } } render() { // console.log("rendering DashboardItem " + this.props.title); let marginRight = 10; if (this.props.isSquare) { if (this.props.isSquareLeft) marginRight = '4%'; else marginRight = 0 } const color = this.props.isAvailable ? ThemeManager.getCurrentThemeVariables().text : ThemeManager.getCurrentThemeVariables().textDisabled; return ( {this.props.isSquare ? {this.getContent()} : } /> {this.getEventPreviewContainer()} } ); } }