calendarpopup
unknown
plain_text
a year ago
7.4 kB
6
Indexable
import React, { useState } from "react" import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from "react-native" import moment from "moment" import { Calendar } from "react-native-calendars" import ButtonComponent from "./ButtonComponent" import { SheetModal } from "./SheetModal" import CalendarIconTheme from '../../assets/Icons/track-activity/calendar-theme.svg' import DayBgGradientIcon from '../../assets/Icons/track-activity/gradient-btn-bg.svg' import { colors } from "../../theme" import fonts from "../../assets/fonts" import { height, width } from "../../constants/constants" import { useSelector } from "react-redux" import { fontSize } from "../../utils/fontUtils" interface CalendarPopupTypes { visible: boolean; setVisible: () => void; key: string; title: string; subTitle: string; style: ViewStyle; onSetDate: (val: any) => void; onCancel: (val: any) => void; } export const CalendarPopup: React.FC<CalendarPopupTypes> = ({ visible, setVisible, key, title, subTitle, style, onSetDate, onCancel }) => { const { selectedDate } = useSelector(store => store.userDetails) const [selectedDateVal, setSelectedDateVal] = useState(selectedDate); const [selectedDay, setSelectedDay] = useState(moment().format('YYYY-MM-DD')) return ( <SheetModal visible={visible} setVisible={setVisible} key={key && key} style={{ justifyContent: 'flex-end', margin: 0 }}> <View style={styles.modalView}> <View style={styles.modalContainer}> <CalendarIconTheme /> {title && <Text style={styles.title}>{title}</Text>} {subTitle && <Text style={styles.subTitle}>{subTitle}</Text>} <Calendar style={{ width: width * 0.95 }} markedDates={{ [selectedDay]: { selected: true }, }} theme={{ selectedDayBackgroundColor: '#00adf5', selectedDayTextColor: '#ffffff', }} initialDate={selectedDate} dayComponent={date => { let pressedDate = date?.date?.day let pressedMonth = date?.date?.month let pressedYear = date?.date?.year let pressedDateObj = moment(`${pressedYear}-${String(pressedMonth).padStart(2, '0')}-${String(pressedDate).padStart(2, '0')}`, "YYYY-MM-DD"); let today = moment(); return ( selectedDateVal === date?.date?.dateString ? <View style={styles.selectedDateContainer}> <DayBgGradientIcon style={styles.selectedDateIcon} /> <Text style={styles.selectedDateText}>{date?.date?.day}</Text> </View> : <TouchableOpacity style={selectedDateVal === date?.date?.dateString ? [ styles.dayContainerStyles, { backgroundColor: 'red' } ] : styles.dayContainerStyles} onPress={() => { setSelectedDay(date?.date?.dateString); setSelectedDateVal(date?.date?.dateString); }}> <Text style={styles.dayStyles}>{date?.date?.day}</Text> </TouchableOpacity> ) }} /> <View style={styles.bottomBtnsContainer}> <View style={{ flex: 1 }}> <TouchableOpacity onPress={onCancel} style={styles.buttonOutline}> <Text style={styles.cancelBtnTxt}>Cancel</Text> </TouchableOpacity> </View> <View style={{ flex: 1 }}> <ButtonComponent isActive title={'Set Date'} customHeight={width / 7.85} style={styles.gradientPopupButton} textStyle={styles.btnTxtWhite} onPress={() => onSetDate(selectedDateVal)} /> </View> </View> </View> </View> </SheetModal> ) } const styles = StyleSheet.create({ btnTxtWhite: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsSemiBold, color: colors.white }, bottomBtnsContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 20, gap: 8, }, buttonOutline: { backgroundColor: colors.white, borderWidth: 1, borderRadius: 40, padding: 14, width: '100%', borderColor: colors.green, alignItems: 'center', justifyContent: 'center', height: width / 7.85 }, dayContainerStyles: { width: 24, height: 24, alignItems: 'center', justifyContent: 'center', }, fs12ppMdMuted: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsMedium, color: '#BDBEBD', }, dayStyles: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsMedium, color: colors.LIGHT_BLACK, }, cancelBtnTxt: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsSemiBold, color: colors.green, }, gradientPopupButton: { borderRadius: 40, width: '100%' }, modalContainer: { padding: 16, paddingTop: 28, alignItems: 'center', justifyContent: 'center' }, modalView: { backgroundColor: colors.white, borderTopLeftRadius: 24, borderTopRightRadius: 24, height: height * .7 }, p16: { padding: 16, }, rowCenterApart: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, selectedDateContainer: { width: 24, height: 24, alignItems: 'center', justifyContent: 'center', }, selectedDateIcon: { position: 'absolute', alignSelf: 'center', }, selectedDateText: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsMedium, color: colors.white }, subTitle: { fontSize: fontSize.fs12, fontFamily: fonts.PoppinsMedium, color: colors.mutedGrey, textAlign: 'center' }, title: { fontSize: fontSize.fs18, fontFamily: fonts.PoppinsBold, color: colors.black, textAlign: 'center', } })
Editor is loading...
Leave a Comment