// @flow import * as React from 'react'; import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; 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 PlatformTouchable from "react-native-platform-touchable"; import i18n from "i18n-js"; const CARD_BORDER_RADIUS = 10; 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) { return ( {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ? : } {this.props.displayEvent['title']} {this.getFormattedEventTime(this.props.displayEvent)} 50 ? 70 : 20, overflow: 'hidden', }}> " + this.props.displayEvent['description'] + ""} tagsStyles={{ p: { color: ThemeManager.getCurrentThemeVariables().textColor, fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase, }, div: {color: ThemeManager.getCurrentThemeVariables().textColor}, }}/> {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()} ); } else { 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 } return ( {this.getContent()} {this.getEventPreviewContainer()} ); } }