103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
|
|
import dayjs from 'dayjs';
|
|
import LottieView from 'lottie-react-native';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface MoodCardProps {
|
|
moodCheckin: MoodCheckin | null;
|
|
onPress: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
|
|
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
|
|
const animationRef = useRef<LottieView>(null);
|
|
|
|
useEffect(() => {
|
|
if (animationRef.current) {
|
|
animationRef.current.play();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
|
|
<View style={styles.moodCardHeader}>
|
|
<Text style={styles.cardTitle}>心情</Text>
|
|
<LottieView
|
|
ref={animationRef}
|
|
source={require('@/assets/lottie/mood/mood_demo.json')}
|
|
autoPlay
|
|
loop
|
|
style={styles.lottieAnimation}
|
|
/>
|
|
</View>
|
|
{isLoading ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodLoadingText}>加载中...</Text>
|
|
</View>
|
|
) : moodCheckin ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodPreviewText}>
|
|
{moodConfig?.label || moodCheckin.moodType}
|
|
</Text>
|
|
<Text style={styles.moodPreviewTime}>
|
|
{dayjs(moodCheckin.createdAt).format('HH:mm')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.moodEmptyText}>点击记录心情</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
moodCardContent: {
|
|
width: '100%',
|
|
},
|
|
|
|
moodCardHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
cardTitle: {
|
|
fontSize: 14,
|
|
color: '#192126',
|
|
},
|
|
|
|
lottieAnimation: {
|
|
width: 40,
|
|
height: 40,
|
|
},
|
|
|
|
moodPreview: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginTop: 12,
|
|
},
|
|
moodPreviewText: {
|
|
fontSize: 14,
|
|
color: '#059669',
|
|
fontWeight: '600',
|
|
},
|
|
moodPreviewTime: {
|
|
fontSize: 12,
|
|
color: '#6B7280',
|
|
},
|
|
moodEmptyText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
moodLoadingText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
}); |