Files
cally/components/pages/calendar/EventCell.tsx
Milan Paunovic 70db8bdc0b New calendar
2024-12-15 16:29:34 +01:00

117 lines
3.5 KiB
TypeScript

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {Text} from 'react-native-ui-lib';
import CachedImage from 'expo-cached-image';
import {format} from 'date-fns';
import {colorMap} from '@/constants/colorMap';
interface EventCellProps {
event: any;
onPress: (event: any) => void;
attendees: any[];
}
export const EventCell: React.FC<EventCellProps> = React.memo((
{
event,
onPress,
attendees
}) => {
return (
<TouchableOpacity
onPress={() => onPress(event)}
style={[styles.eventCell, {backgroundColor: event.eventColor}]}
>
<Text style={styles.eventTitle} numberOfLines={1}>
{event.title}
</Text>
<Text style={[styles.eventTitle, {fontSize: 10, opacity: 0.8}]}>
{format(new Date(event.start.dateTime), 'h:mm a')} - {format(new Date(event.end.dateTime), 'h:mm a')}
</Text>
{attendees.length > 0 && (
<View style={styles.attendeesContainer}>
{attendees.slice(0, 3).map((attendee, index) => (
<View
key={attendee?.uid}
style={[styles.attendeeIcon, {left: index * 19}]}
>
{attendee.pfp ? (
<CachedImage
source={{uri: attendee.pfp}}
style={styles.attendeeImage}
cacheKey={attendee.pfp}
/>
) : (
<Text style={styles.attendeeInitials}>
{attendee?.firstName?.at(0)}
{attendee?.lastName?.at(0)}
</Text>
)}
</View>
))}
{attendees.length > 3 && (
<View style={[styles.attendeeCount, {left: 3 * 19}]}>
<Text style={styles.attendeeCountText}>
+{attendees.length - 3}
</Text>
</View>
)}
</View>
)}
</TouchableOpacity>
);
});
const styles = StyleSheet.create({
eventCell: {
flex: 1,
borderRadius: 4,
padding: 8,
height: '100%',
},
eventTitle: {
color: 'white',
fontSize: 12,
fontFamily: "PlusJakartaSans_500Medium",
},
attendeesContainer: {
flexDirection: 'row',
marginTop: 8,
height: 27.32,
},
attendeeIcon: {
position: 'absolute',
width: 20,
height: 20,
borderRadius: 50,
borderWidth: 2,
borderColor: '#f2f2f2',
overflow: 'hidden',
},
attendeeImage: {
width: '100%',
height: '100%',
},
attendeeInitials: {
color: 'white',
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
attendeeCount: {
position: 'absolute',
width: 27.32,
height: 27.32,
borderRadius: 50,
borderWidth: 2,
borderColor: '#f2f2f2',
backgroundColor: colorMap.pink,
justifyContent: 'center',
alignItems: 'center',
},
attendeeCountText: {
color: 'white',
fontFamily: "Manrope_600SemiBold",
fontSize: 12,
},
});