react-native-nepali-picker
Version:
Minimalist and modern Nepali-date picker with customization.🌟
284 lines (283 loc) • 15.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { View, Text, Modal, Pressable, StyleSheet, TouchableOpacity, ScrollView, } from 'react-native';
import { bs, daysInEnglish, daysInNepali, getNepaliNumber, monthsInEnglish, monthsInNepali, } from './calendar/config';
import { calcFirstDay, isToday } from './calendar/settings';
import { NepaliToday, validateDate } from './calendar/functions';
import { ChevronIcon } from './assets/Icons';
import DateSyncLogo from './assets/DateSync';
import Triangle from './assets/Triangle';
const CalendarPicker = ({ visible, onClose, theme = 'light', onDateSelect, language = 'np', initialDate = NepaliToday(), brandColor = '#2081b9', titleTextStyle = {
fontSize: 20,
fontWeight: 'bold',
}, weekTextStyle = {
fontSize: 15,
fontWeight: 'bold',
}, dayTextStyle = {
fontSize: 15,
fontWeight: '600',
}, }) => {
const value = validateDate(initialDate);
console.log('the initial date is ', initialDate);
const [TodayNepaliDate, setTodayNepaliDate] = useState(initialDate);
const cYear = parseInt(TodayNepaliDate.split('-')[0], 10);
const cMonth = parseInt(TodayNepaliDate.split('-')[1], 10);
const cDay = parseInt(TodayNepaliDate.split('-')[2], 10);
const [firstDayOfMonth, setFirstDayOfMonth] = useState(0);
const [month, setMonth] = useState(cMonth);
const [year, setYear] = useState(cYear);
const [calendarDate, setCalendarDate] = useState([]);
const [yearModal, setYearModal] = useState(false);
const syncToday = () => {
setMonth(cMonth);
setYear(cYear);
};
const handleDateClick = (day) => {
const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
setTodayNepaliDate(date);
onDateSelect(date);
onClose();
};
useEffect(() => {
setTodayNepaliDate(initialDate);
}, [initialDate]);
//Handle Next Month Click
const handleNextClick = () => {
if (month === 12) {
if (year < 2099) {
setYear((prev) => prev + 1);
setMonth(1);
}
}
else {
setMonth((prev) => prev + 1);
}
};
//Handle Previous Month Click
const handlePreviousClick = () => {
if (month === 1) {
if (year > 2000) {
setYear((prev) => prev - 1);
setMonth(12);
}
}
else {
setMonth((prev) => prev - 1);
}
};
const openYearView = () => {
setYearModal(true);
};
const closeYearView = () => {
setYearModal(false);
};
useEffect(() => {
// calculate First Day Of Month (FDOM) and Days In Month(DIM)
const FDOM = calcFirstDay(year, month);
const DIM = bs[year][month];
setFirstDayOfMonth(FDOM);
// array which contain 42 cells and it only fill the date with number if the date is present otherwise it fill cells with null.
const calendarCells = Array.from({ length: 42 }, (_, index) => {
const dayNumber = index - FDOM + 1;
if (dayNumber > 0 && dayNumber <= DIM) {
return dayNumber;
}
else {
return null;
}
});
setCalendarDate(calendarCells);
}, [year, month, initialDate]);
const handleYearClick = (y) => {
setYear(y);
closeYearView();
};
const dark = theme === 'dark';
const weekDays = language === 'en' ? daysInEnglish : daysInNepali;
if (value !== true) {
return (_jsx(Modal, { visible: visible, onRequestClose: onClose, transparent: true, children: _jsx(Pressable, { style: styles.outerPressable, onPress: onClose, children: _jsx(Pressable, { onPress: () => { }, style: styles.innerPressable, children: _jsxs(View, { style: {
...styles.innerView,
minHeight: '40%',
minWidth: '90%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: dark ? '#383838' : '#ffffff',
}, children: [_jsx(Text, { style: {
color: dark ? 'white' : 'black',
fontWeight: '600',
paddingHorizontal: 10,
paddingVertical: 10,
}, children: "Unsupported date range on initialDate" }), _jsx(Text, { style: {
color: dark ? 'white' : 'black',
paddingHorizontal: 10,
}, children: value })] }) }) }) }));
}
return (_jsxs(Modal, { visible: visible, onRequestClose: onClose, transparent: true, children: [_jsx(Pressable, { style: styles.outerPressable, onPress: onClose, children: _jsx(Pressable, { onPress: () => { }, style: styles.innerPressable, children: _jsxs(View, { style: {
...styles.innerView,
backgroundColor: dark ? '#383838' : '#ffffff',
}, children: [_jsx(Text, { style: {
color: dark ? 'white' : 'black',
paddingHorizontal: 10,
}, children: language === 'np' ? 'आजको मिति ' : "Today's Date" }), _jsxs(View, { style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
marginBottom: 20,
alignItems: 'center',
}, children: [_jsx(View, { children: _jsx(TouchableOpacity, { onPress: syncToday, children: language == 'np' ? (_jsxs(Text, { style: {
...titleTextStyle,
color: dark ? '#fff' : '#000',
}, children: [getNepaliNumber(cYear), " ", monthsInNepali[cMonth - 1], ' ', " ", getNepaliNumber(cDay)] })) : (_jsxs(Text, { style: {
...titleTextStyle,
color: dark ? '#fff' : '#000',
}, children: [cYear, " ", monthsInEnglish[cMonth - 1], ' ', " ", cDay] })) }) }), _jsx(TouchableOpacity, { onPress: syncToday, children: _jsx(DateSyncLogo, { day: cDay, color: dark ? '#ffff' : '#000' }) })] }), _jsxs(View, { style: styles.ButtonContainer, children: [_jsx(TouchableOpacity, { style: styles.CButton, onPress: handlePreviousClick, children: _jsx(ChevronIcon, { direction: "right", color: dark ? 'white' : 'black' }) }), _jsxs(TouchableOpacity, { style: { flexDirection: 'row', alignItems: 'center' }, onPress: openYearView, children: [_jsx(Text, { style: {
...titleTextStyle,
marginRight: 6,
color: dark ? 'white' : 'black',
}, children: language === 'np'
? monthsInNepali[month - 1]
: monthsInEnglish[month - 1] }), _jsx(Text, { style: {
...titleTextStyle,
marginRight: 10,
color: dark ? 'white' : 'black',
}, children: language === 'np' ? getNepaliNumber(year) : year }), _jsx(Triangle, { height: 10, width: 13, color: dark ? 'white' : 'black' })] }), _jsx(TouchableOpacity, { style: styles.CButton, onPress: handleNextClick, children: _jsx(ChevronIcon, { direction: "left", color: dark ? 'white' : 'black' }) })] }), _jsxs(View, { style: styles.outerDateConainer, children: [_jsx(View, { style: styles.weekContainer, children: weekDays.map((item, index) => {
return (_jsx(View, { style: styles.WeekItem, children: _jsx(Text, { style: {
...weekTextStyle,
color: dark ? 'white' : 'black',
}, children: item }) }, index));
}) }), _jsx(View, { style: styles.datesContainer, children: calendarDate.map((dayItem, index) => {
return (_jsx(TouchableOpacity, { style: styles.dateItem, onPress:
//execute on day item press, Only execute when dayItem is not null
dayItem ? () => handleDateClick(dayItem) : () => { }, children: dayItem ? (_jsx(View, { style: {
paddingHorizontal: 6,
paddingVertical: 3,
borderRadius: 999,
//check if the date is today or not and apply conditional styling.
backgroundColor: isToday(TodayNepaliDate, index, year, month, firstDayOfMonth)
? brandColor
: dark
? '#383838'
: '#fff',
}, children: _jsx(Text, { style: {
...dayTextStyle,
color: isToday(TodayNepaliDate, index, year, month, firstDayOfMonth)
? '#fff'
: dark
? 'white'
: 'black',
}, children: language === 'np'
? getNepaliNumber(dayItem)
: dayItem }) })) : null }, index));
}) })] })] }) }) }), _jsx(Modal, { visible: yearModal, onRequestClose: closeYearView, transparent: true, children: _jsx(Pressable, { style: styles.outerPressable, onPress: () => closeYearView(), children: _jsx(Pressable, { style: styles.YearInnerPressable, onPress: () => { }, children: _jsx(View, { style: {
...styles.InnerYearView,
backgroundColor: dark ? '#383838' : '#f2f2f2',
}, children: _jsx(ScrollView, { showsVerticalScrollIndicator: false, contentContainerStyle: {
display: 'flex',
paddingVertical: 10,
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
}, children: Array(100)
.fill(0)
.map((_, index) => {
return (_jsx(TouchableOpacity, { onPress: () => handleYearClick(index + 2000), style: {
paddingHorizontal: 20,
paddingVertical: 6,
marginHorizontal: 4,
marginVertical: 4,
borderColor: dark ? 'white' : 'black',
borderRadius: 20,
backgroundColor: index + 2000 === year ? brandColor : '',
borderWidth: 0.4,
}, children: _jsx(Text, { style: {
fontWeight: '500',
color: index + 2000 === year
? 'white'
: dark
? 'white'
: 'black',
}, children: language === 'np'
? getNepaliNumber(index + 2000)
: index + 2000 }) }, index));
}) }) }) }) }) })] }));
};
const styles = StyleSheet.create({
outerPressable: {
height: '100%',
justifyContent: 'center',
width: '100%',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.54)',
},
innerPressable: {
minHeight: '20%',
maxWidth: 500,
marginHorizontal: 30,
},
innerView: {
borderRadius: 20,
backgroundColor: '#f2f2f2',
padding: 10,
},
weekContainer: {
flexDirection: 'row',
width: '100%',
},
WeekItem: {
width: '14.28%',
alignItems: 'center',
paddingVertical: 18,
},
//WeekText: {
// fontWeight: 'bold',
// fontSize: 14,
// color: 'black',
//},
datesContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
},
dateItem: {
overflow: 'hidden',
width: '14.28%',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 10,
},
//DayText: {
// fontSize: 14,
// fontWeight: '600',
//},
CButton: {
paddingHorizontal: 20,
paddingVertical: 10,
},
ButtonContainer: {
alignItems: 'center',
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between',
},
outerDateConainer: {
paddingHorizontal: 3,
},
//TitleText: {
// fontSize: 20,
// fontWeight: 'bold',
//},
// for year view modal
YearInnerPressable: {
justifyContent: 'center',
maxWidth: 500,
maxHeight: '70%',
marginHorizontal: 30,
},
InnerYearView: {
borderRadius: 20,
backgroundColor: '#f2f2f2',
minHeight: 50,
maxHeight: '100%',
},
});
export default CalendarPicker;