Untitled
plain_text
2 months ago
7.4 kB
2
Indexable
Never
import AppIcon from '@components/common/icon'; import {NAVIGATION_CONSTANTS} from '@constants'; import {useNavigation} from '@react-navigation/native'; import {Colors, Typography} from '@themes'; import Dimension from '@utils/Dimension'; import _ from 'lodash'; import moment from 'moment'; import * as React from 'react'; import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import SkeletonPlaceholder from 'react-native-skeleton-placeholder'; import {useSelector} from 'react-redux'; let widthDate = (Dimension.widthScreen - 26) / 5; const InsightMonthItem = ({offset, data, title}) => { console.log('offset', offset); let now = moment(); const user = useSelector(state => state.auth.user); const createdDate = moment(user?.created_date).clone().startOf('day'); const {navigate} = useNavigation(); let start_date = moment().clone().subtract(offset, 'month').startOf('month'); const contentCompleted = useSelector(state => state.temp.contentCompleted) || {}; let end_date = moment() .clone() .subtract(offset, 'month') .endOf('month') .format('DD'); let totalDays = Number(end_date) - Number(start_date.format('DD')) + 1; let startDateName = start_date.format('ddd'); let emptyNumber = DateFullName[startDateName]; return ( <View style={[styles.container]}> <View style={styles.monthTitleView}> <Text style={styles.monthTitle}>{title}</Text> </View> <View style={styles.calendar}> {Array.from({length: 5}).map((e, index) => ( <View style={styles.calendarHeader}> <Text style={styles.text}>{DateName[index]}</Text> </View> ))} {Array.from({length: emptyNumber}).map(e => ( <View style={styles.emptyDate} /> ))} {Array.from({length: totalDays}).map((e, index) => { let weekDay = start_date.clone().add(index, 'day'); if ( weekDay.format('ddd') === 'Sat' || weekDay.format('ddd') === 'Sun' ) return null; if (!data) { return ( <View style={styles.dateCell}> <SkeletonPlaceholder speed={2000} backgroundColor={'#151518'} highlightColor={'#2F2F36'}> <View style={styles.dateCircle} /> </SkeletonPlaceholder> </View> ); } let dateData = (!!data && data[weekDay.format('YYYY-MM-DD')]) || null; const isCompleted = !!contentCompleted[dateData?.uuid]; const timeDiff = moment(now).diff(weekDay, 'hour'); const available = !!dateData; let imageURL = _.get(dateData, 'thoughtLeaders.0.images.0.url_optimised', null) || _.get(dateData, 'thoughtLeaders.0.images.0.url', null); let icon = 'insight-error'; if (available) { if (isCompleted) { icon = 'insight-check'; } else { } if (timeDiff < 0) { icon = 'insight-lock'; } } const onPressInsight = (uuid, start_at) => () => { if (uuid) { navigate(NAVIGATION_CONSTANTS.DAILY_INSIGHT_DETAIL, { slug: uuid, start_at: start_at, }); } }; return ( <View style={styles.dateCell}> <Text style={styles.text}>{weekDay.format('DD')}</Text> <TouchableOpacity disabled={!dateData || timeDiff < 0} onPress={onPressInsight(dateData?.uuid, dateData?.start_at)}> <LinearGradient style={[styles.dateCircle]} start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}} colors={ !isCompleted && timeDiff >= 0 && dateData ? [Colors.ivyYellow, Colors.ivyRed] : dateData ? [Colors.body.x300, Colors.greyScale2] : [Colors.greyScale2, Colors.greyScale2] }> <View style={{ width: widthDate - 18, height: widthDate - 18, borderRadius: (widthDate - 18) / 2, borderColor: Colors.transparent, backgroundColor: Colors.tabBar, justifyContent: 'center', alignItems: 'center', }}> {timeDiff < 0 ? ( <View style={dayStyles.flex1}> <AppIcon name={'insight-lock'} color={Colors.white} /> </View> ) : ( <Image source={{uri: imageURL}} style={dayStyles.flex1} /> )} </View> </LinearGradient> {isCompleted && ( <AppIcon name={'check'} size={8} color={Colors.tabBar} containerStyle={styles.checkIcon} /> )} </TouchableOpacity> </View> ); })} </View> </View> ); }; export default InsightMonthItem; const styles = StyleSheet.create({ container: { marginBottom: 20, transform: [{scaleY: -1}], }, monthTitleView: { marginBottom: 18, borderBottomColor: '#313134', borderBottomWidth: 1, paddingBottom: 12, paddingTop: 12, }, monthTitle: { ...Typography.avenir.regular, fontWeight: '700', fontSize: 16, textAlign: 'left', textTransform: 'uppercase', color: '#6A6A6A', marginHorizontal: 20, letterSpacing: 1, }, calendar: { flexDirection: 'row', paddingHorizontal: 13, flexWrap: 'wrap', }, calendarHeader: { width: widthDate, borderRadius: widthDate / 2, marginBottom: 12, }, text: { ...Typography.lato.regular, fontSize: 12, textAlign: 'center', letterSpacing: 1.54, color: Colors.white, marginBottom: 4, }, dateCell: { width: widthDate, height: widthDate, paddingHorizontal: 7, alignItems: 'center', marginBottom: 24, }, dateCircle: { width: widthDate - 14, height: widthDate - 14, borderRadius: (widthDate - 14) / 2, justifyContent: 'center', alignItems: 'center', }, emptyDate: { width: widthDate, height: 0, borderRadius: widthDate / 2, backgroundColor: Colors.transparent, }, checkIcon: { width: 18, height: 18, borderRadius: 18 / 2, backgroundColor: Colors.aquamarine, justifyContent: 'center', alignItems: 'center', alignSelf: 'center', marginTop: -10, borderWidth: 2, borderColor: Colors.tabBar, }, }); const dayStyles = StyleSheet.create({ flex1: { width: widthDate - 22, height: widthDate - 22, borderRadius: (widthDate - 22) / 2, justifyContent: 'center', alignItems: 'center', backgroundColor: Colors.greyScale1, }, }); const DateName = { 0: 'M', 1: 'T', 2: 'W', 3: 'T', 4: 'F', }; const DateFullName = { Mon: 0, Tue: 1, Wed: 2, Thu: 3, Fri: 4, Sat: 5, Sun: 6, };