react-native-nepali-picker 1.0.5 → 1.0.7

package/src/CalendarPicker.js

@@ -0,0 +1,283 @@
+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;

package/src/CalendarPicker.tsx

@@ -45,7 +45,7 @@ const CalendarPicker = ({
   },
 }: CalendarPickerProps) => {
   const value = validateDate(initialDate);
-  console.log('validate value is ', value);
+  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);
@@ -57,6 +57,12 @@ const CalendarPicker = ({
   const [calendarDate, setCalendarDate] = useState<(number | null)[]>([]);
 
   const [yearModal, setYearModal] = useState<boolean>(false);
+
+  const syncToday = () => {
+    setMonth(cMonth);
+    setYear(cYear);
+  };
+
   const handleDateClick = (day: number) => {
     const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
     setTodayNepaliDate(date);
@@ -64,6 +70,11 @@ const CalendarPicker = ({
     onClose();
   };
 
+  useEffect(() => {
+    setTodayNepaliDate(initialDate);
+  }, [initialDate]);
+
+  //Handle Next Month Click
   const handleNextClick = () => {
     if (month === 12) {
       if (year < 2099) {
@@ -74,6 +85,8 @@ const CalendarPicker = ({
       setMonth((prev) => prev + 1);
     }
   };
+
+  //Handle Previous Month Click
   const handlePreviousClick = () => {
     if (month === 1) {
       if (year > 2000) {
@@ -109,12 +122,7 @@ const CalendarPicker = ({
       }
     });
     setCalendarDate(calendarCells);
-  }, [year, month]);
-
-  const syncToday = () => {
-    setMonth(cMonth);
-    setYear(cYear);
-  };
+  }, [year, month, initialDate]);
 
   const handleYearClick = (y: number) => {
     setYear(y);

package/src/assets/DateSync.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+const DateSyncLogo = ({ size = 28, color = '#003a05', day = 0 }) => {
+    const scale = size / 24;
+    // Format the date as DD
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(View, { style: [styles.calendarBase, { borderColor: color }], children: _jsx(Text, { style: [styles.dateText, { color: color, fontSize: 9 * scale }], children: day }) }), _jsx(View, { style: [styles.calendarTop, { borderColor: color, top: 2 * scale }] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        aspectRatio: 1,
+        position: 'relative',
+    },
+    calendarBase: {
+        position: 'absolute',
+        left: '12.5%',
+        top: '12.5%',
+        width: '75%',
+        height: '75%',
+        borderWidth: 2,
+        borderRadius: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    dateText: {
+        fontWeight: '800',
+    },
+    calendarTop: {
+        position: 'absolute',
+        left: '12.5%',
+        width: '75%',
+        height: '20%',
+        borderTopWidth: 4,
+        borderLeftWidth: 2,
+        borderRightWidth: 2,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 0,
+    },
+    syncCircle: {
+        position: 'absolute',
+        width: '50%',
+        height: '50%',
+        borderWidth: 2,
+        borderRadius: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    syncArrow: {
+        position: 'absolute',
+        width: '40%',
+        height: '40%',
+        borderWidth: 2,
+        borderTopWidth: 0,
+        borderRightWidth: 0,
+        transform: [{ rotate: '45deg' }],
+    },
+    syncArrowLeft: {
+        left: '15%',
+        top: '10%',
+    },
+    syncArrowRight: {
+        right: '15%',
+        bottom: '10%',
+        transform: [{ rotate: '225deg' }],
+    },
+});
+export default DateSyncLogo;

package/src/assets/Icons.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from 'react-native';
+const ChevronIcon = ({ direction = 'right', size = 15, color = '#000' }) => {
+    const isLeft = direction === 'left';
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(View, { style: [
+                    styles.line,
+                    isLeft ? styles.leftTop : styles.rightTop,
+                    { backgroundColor: color },
+                ] }), _jsx(View, { style: [
+                    styles.line,
+                    isLeft ? styles.leftBottom : styles.rightBottom,
+                    { backgroundColor: color },
+                ] })] }));
+};
+const EditPencilIcon = ({ size = 24, color = '#000' }) => {
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(View, { style: [styles.pencilBody, { backgroundColor: color }] }), _jsx(View, { style: [styles.pencilTip, { borderBottomColor: color }] }), _jsx(View, { style: [styles.pencilEraser, { backgroundColor: '#FFA07A' }] })] }));
+};
+const Triangle = ({ width = 10, height = 20, color = 'white' }) => {
+    return (_jsx(View, { style: [
+            styles.triangle,
+            {
+                borderLeftWidth: width / 2,
+                borderRightWidth: width / 2,
+                borderBottomWidth: height,
+                borderBottomColor: color,
+            },
+        ] }));
+};
+const ChevronDown = ({ size = 10, color = '#000' }) => {
+    return (_jsxs(View, { style: [
+            styles.container,
+            { width: size, height: size, transform: [{ rotate: '-90deg' }] },
+        ], children: [_jsx(View, { style: [styles.line, styles.rightTop, { backgroundColor: color }] }), _jsx(View, { style: [styles.line, styles.rightBottom, { backgroundColor: color }] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    line: {
+        position: 'absolute',
+        width: '90%',
+        height: 2,
+    },
+    leftTop: {
+        top: '15%',
+        left: '20%',
+        transform: [{ rotate: '45deg' }],
+    },
+    leftBottom: {
+        bottom: '15%',
+        left: '20%',
+        transform: [{ rotate: '-45deg' }],
+    },
+    rightTop: {
+        top: '15%',
+        right: '20%',
+        transform: [{ rotate: '-45deg' }],
+    },
+    rightBottom: {
+        bottom: '15%',
+        right: '20%',
+        transform: [{ rotate: '45deg' }],
+    },
+    triangle: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderLeftWidth: 6,
+        borderRightWidth: 6,
+        borderBottomWidth: 0,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopWidth: 8,
+    },
+    pencilBody: {
+        width: '60%',
+        height: '75%',
+        position: 'absolute',
+        bottom: '12.5%',
+        left: '20%',
+        transform: [{ skewX: '5deg' }],
+    },
+    pencilTip: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderLeftWidth: 7,
+        borderRightWidth: 7,
+        borderTopWidth: 0,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderBottomWidth: 10,
+        position: 'absolute',
+        bottom: '12.5%',
+        left: '20%',
+    },
+    pencilEraser: {
+        width: '60%',
+        height: '10%',
+        position: 'absolute',
+        top: '12.5%',
+        left: '20%',
+        transform: [{ skewX: '5deg' }],
+    },
+});
+export { ChevronIcon, ChevronDown, EditPencilIcon, Triangle };

package/src/assets/Triangle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet } from 'react-native';
+const Triangle = ({ width = 10, height = 20, color = 'black' }) => {
+    return (_jsx(View, { style: [
+            styles.triangle,
+            {
+                borderLeftWidth: width / 2,
+                borderRightWidth: width / 2,
+                borderBottomWidth: height,
+                borderBottomColor: color,
+            },
+        ] }));
+};
+const styles = StyleSheet.create({
+    triangle: {
+        width: 0,
+        height: 0,
+        transform: [{ rotate: '180deg' }],
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+    },
+});
+export default Triangle;

package/src/assets/cIcon.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from 'react-native';
+const PencilIcon = ({ height = 20, width = 10 }) => {
+    return (_jsxs(View, { style: { ...styles.container, height: height, width: width }, children: [_jsx(View, { style: {
+                    height: '40%',
+                    width: '100%',
+                    borderTopStartRadius: 3,
+                    borderTopEndRadius: 3,
+                    borderWidth: 0.7,
+                }, children: _jsx(View, { style: {
+                        top: '50%',
+                        width: '100%',
+                        borderWidth: 0.7,
+                    } }) }), _jsx(View, { style: {
+                    height: '90%',
+                    width: '100%',
+                    borderWidth: 0.7,
+                }, children: _jsx(View, { style: {
+                        left: '50%',
+                        height: '100%',
+                        width: 0,
+                        borderWidth: 0.2,
+                    } }) }), _jsx(View, { style: {
+                    width: 0,
+                    height: 0,
+                    borderLeftWidth: 4,
+                    borderRightWidth: 4,
+                    borderBottomWidth: 0,
+                    borderStyle: 'solid',
+                    backgroundColor: 'transparent',
+                    borderLeftColor: 'transparent',
+                    borderRightColor: 'transparent',
+                    borderBottomColor: 'transparent',
+                    borderTopWidth: 8,
+                } })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        transform: [{ rotate: '45deg' }],
+        alignItems: 'center',
+        marginHorizontal: 'auto',
+        justifyContent: 'center',
+    },
+});
+export default PencilIcon;