react-native-nepali-picker 1.0.8 → 1.1.0-alpha.0

package/src/CalendarPicker.tsx

@@ -1,13 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import {
-  View,
-  Text,
   Modal,
   Pressable,
+  ScrollView,
   StyleSheet,
+  Text,
   TouchableOpacity,
-  ScrollView,
+  View,
 } from 'react-native';
+import DateSyncLogo from './assets/DateSync';
+import { ChevronIcon } from './assets/Icons';
+import Triangle from './assets/Triangle';
 import {
   bs,
   daysInEnglish,
@@ -16,12 +19,11 @@ import {
   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';
+import { NepaliToday } from './calendar/functions';
+import { calcFirstDay, NEPALI_MAX_YEAR, NEPALI_MIN_YEAR } from './calendar/settings';
+import DayCell from './DayCell'
 import type { CalendarPickerProps } from './types';
+import { validateCalendarDates } from './calendar/validate';
 
 const CalendarPicker = ({
   visible,
@@ -29,7 +31,9 @@ const CalendarPicker = ({
   theme = 'light',
   onDateSelect,
   language = 'np',
-  initialDate = NepaliToday(),
+  date = NepaliToday(),
+  minDate = '2000-01-01',
+  maxDate = '2099-12-30',
   brandColor = '#2081b9',
   titleTextStyle = {
     fontSize: 20,
@@ -44,17 +48,17 @@ const CalendarPicker = ({
     fontWeight: '600',
   },
 }: CalendarPickerProps) => {
-  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<number>(0);
+  const yearModelScrollRef = useRef<ScrollView>(null)
+
+  const value = validateCalendarDates(date, minDate, maxDate);
+
+  const [userSelectedDate, setUserSelectedDate] = useState(date);
+  const cYear = parseInt(userSelectedDate.split('-')[0], 10);
+  const cMonth = parseInt(userSelectedDate.split('-')[1], 10);
+  const cDay = parseInt(userSelectedDate.split('-')[2], 10);
+
   const [month, setMonth] = useState<number>(cMonth);
   const [year, setYear] = useState<number>(cYear);
-  const [calendarDate, setCalendarDate] = useState<(number | null)[]>([]);
 
   const [yearModal, setYearModal] = useState<boolean>(false);
 
@@ -63,21 +67,42 @@ const CalendarPicker = ({
     setYear(cYear);
   };
 
-  const handleDateClick = (day: number) => {
+  const handleDateClick = useCallback((day: number) => {
     const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
-    setTodayNepaliDate(date);
+    setUserSelectedDate(date);
     onDateSelect(date);
     onClose();
-  };
+  }, [year, month, onDateSelect, onClose]);
 
+  //check weather the date is disabled or not?(with maximum and minimum date provided)
+  const isDateDisabled = useCallback((day: number) => {
+    const date = `${year}-${month
+      .toString()
+      .padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+
+    return false;
+
+  }, [year, month, minDate, maxDate])
+
+  // Set the user selected date is as NepaliDate (initially it will be always
+  // current Nepali Date)
   useEffect(() => {
-    setTodayNepaliDate(initialDate);
-  }, [initialDate]);
+    setUserSelectedDate(date);
+  }, [date]);
+
+  // It will calculate the current date number
+  const selectedDay = useMemo(() => {
+    const [y, m, d] = userSelectedDate.split('-').map(Number);
+    return y === year && m === month ? d : null;
+  }, [userSelectedDate, year, month]);
 
-  //Handle Next Month Click
+  //Handle Next Month button Click
   const handleNextClick = () => {
     if (month === 12) {
-      if (year < 2099) {
+      if (year < NEPALI_MAX_YEAR) {
         setYear((prev) => prev + 1);
         setMonth(1);
       }
@@ -86,10 +111,10 @@ const CalendarPicker = ({
     }
   };
 
-  //Handle Previous Month Click
+  //Handle Previous Month button Click
   const handlePreviousClick = () => {
     if (month === 1) {
-      if (year > 2000) {
+      if (year > NEPALI_MIN_YEAR) {
         setYear((prev) => prev - 1);
         setMonth(12);
       }
@@ -98,39 +123,54 @@ const CalendarPicker = ({
     }
   };
 
-  const openYearView = () => {
+  //open the model which shows the list of years(2000-2099)BS
+  const openYearView = async () => {
     setYearModal(true);
+
+    //wait for model to open completely before to scroll down
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    // After model is opened, need ot scrolldown to that year
+    // Here we need to calculate (roughly) how much to scroll to keep the seelcted year in
+    // focus
+    // - For that  we take the height of the year button and one row contain around 3-5(
+    // we will take 4) column of buttons so,
+    // approx Height = (year number(82 for 2082) * button height)/cloumn number
+    // NOTE: This is approx just to make the  button  visible when model is opened.
+    const vHeight = (year - NEPALI_MIN_YEAR) * 36 / 4
+    yearModelScrollRef.current?.scrollTo({
+      y: vHeight,
+      animated: true
+    })
+
   };
 
+  //close the year view model
   const closeYearView = () => {
     setYearModal(false);
   };
 
-  useEffect(() => {
-    // calculate First Day Of Month (FDOM) and Days In Month(DIM)
+
+  // Calculating the number of cells on that month and year(Max it can have 42 cells)
+  // If the cells don't have the date, it will be null otherwise it will contain the actual
+  // date number (1,2,3...upto 32)
+  const calendarDate = useMemo(() => {
     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]);
+    return Array.from({ length: 42 }, (_, index) => {
+      const dayNum = index - FDOM + 1
+      return dayNum > 0 && dayNum <= DIM ? dayNum : null
+    })
+  }, [year, month])
 
   const handleYearClick = (y: number) => {
     setYear(y);
     closeYearView();
   };
+
   const dark = theme === 'dark';
   const weekDays = language === 'en' ? daysInEnglish : daysInNepali;
 
+  // If the user prvided (initial value ) is not in correct format i.e (YYYY-MM-DD)
   if (value !== true) {
     return (
       <Modal visible={visible} onRequestClose={onClose} transparent={true}>
@@ -154,7 +194,7 @@ const CalendarPicker = ({
                   paddingVertical: 10,
                 }}
               >
-                Unsupported date range on initialDate
+                Unsupported date range on Provided Date
               </Text>
               <Text
                 style={{
@@ -187,7 +227,7 @@ const CalendarPicker = ({
                 paddingHorizontal: 10,
               }}
             >
-              {language === 'np' ? 'आजको मिति ' : "Today's Date"}
+              {language === 'np' ? 'तपाईंको मिति ' : "Selected Date"}
             </Text>
             {/* Today date in large fonts on click sync the calenar with today date */}
             <View
@@ -304,67 +344,30 @@ const CalendarPicker = ({
               </View>
 
               {/* for actual data fo calenadr which has the day in them */}
+
               <View style={styles.datesContainer}>
-                {calendarDate.map((dayItem, index) => {
-                  return (
-                    <TouchableOpacity
-                      style={styles.dateItem}
-                      key={index}
-                      onPress={
-                        //execute on day item press, Only execute when dayItem is not null
-                        dayItem ? () => handleDateClick(dayItem) : () => { }
-                      }
-                    >
-                      {dayItem ? (
-                        <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',
-                          }}
-                        >
-                          <Text
-                            style={{
-                              ...dayTextStyle,
-                              color: isToday(
-                                TodayNepaliDate,
-                                index,
-                                year,
-                                month,
-                                firstDayOfMonth
-                              )
-                                ? '#fff'
-                                : dark
-                                  ? 'white'
-                                  : 'black',
-                            }}
-                          >
-                            {language === 'np'
-                              ? getNepaliNumber(dayItem)
-                              : dayItem}
-                          </Text>
-                        </View>
-                      ) : null}
-                    </TouchableOpacity>
-                  );
-                })}
+                {calendarDate.map((day, index) => (
+                  <DayCell
+                    key={index}
+                    day={day}
+                    isSelectedDay={day !== null && day === selectedDay}
+                    disabled={day !== null && isDateDisabled(day)}
+                    onPress={handleDateClick}
+                    dark={dark}
+                    brandColor={brandColor}
+                    language={language}
+                    dayTextStyle={dayTextStyle}
+                  />
+                ))}
               </View>
+
             </View>
           </View>
         </Pressable>
       </Pressable>
+
+      {/* the year modal which will show the list of year (in scrollview) */}
+      {/* NOTE: Need to change in flatlist for performance but need to fix the responsive  */}
       <Modal
         visible={yearModal}
         onRequestClose={closeYearView}
@@ -383,6 +386,7 @@ const CalendarPicker = ({
             >
               <ScrollView
                 showsVerticalScrollIndicator={false}
+                ref={yearModelScrollRef}
                 contentContainerStyle={{
                   display: 'flex',
                   paddingVertical: 10,
@@ -397,7 +401,7 @@ const CalendarPicker = ({
                     return (
                       <TouchableOpacity
                         key={index}
-                        onPress={() => handleYearClick(index + 2000)}
+                        onPress={() => handleYearClick(index + NEPALI_MIN_YEAR)}
                         style={{
                           paddingHorizontal: 20,
                           paddingVertical: 6,
@@ -407,7 +411,7 @@ const CalendarPicker = ({
                           borderRadius: 20,
 
                           backgroundColor:
-                            index + 2000 === year ? brandColor : '',
+                            index + NEPALI_MIN_YEAR === year ? brandColor : '',
                           borderWidth: 0.4,
                         }}
                       >
@@ -415,7 +419,7 @@ const CalendarPicker = ({
                           style={{
                             fontWeight: '500',
                             color:
-                              index + 2000 === year
+                              index + NEPALI_MIN_YEAR === year
                                 ? 'white'
                                 : dark
                                   ? 'white'
@@ -423,8 +427,8 @@ const CalendarPicker = ({
                           }}
                         >
                           {language === 'np'
-                            ? getNepaliNumber(index + 2000)
-                            : index + 2000}
+                            ? getNepaliNumber(index + NEPALI_MIN_YEAR)
+                            : index + NEPALI_MIN_YEAR}
                         </Text>
                       </TouchableOpacity>
                     );
@@ -466,11 +470,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 18,
   },
-  //WeekText: {
-  //  fontWeight: 'bold',
-  //  fontSize: 14,
-  //  color: 'black',
-  //},
   datesContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -482,10 +481,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 10,
   },
-  //DayText: {
-  //  fontSize: 14,
-  //  fontWeight: '600',
-  //},
   CButton: {
     paddingHorizontal: 20,
     paddingVertical: 10,
@@ -499,10 +494,7 @@ const styles = StyleSheet.create({
   outerDateConainer: {
     paddingHorizontal: 3,
   },
-  //TitleText: {
-  //  fontSize: 20,
-  //  fontWeight: 'bold',
-  //},
+
   // for year view modal
   YearInnerPressable: {
     justifyContent: 'center',

package/src/DayCell.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { getNepaliNumber } from './calendar/config';
+
+type DayCellProps = {
+  day: number | null;
+  isSelectedDay: boolean;
+  onPress: (day: number) => void;
+  dark: boolean;
+  brandColor: string;
+  language: 'np' | 'en';
+  dayTextStyle?: any;
+  disabled: boolean;
+};
+
+const DayCell = React.memo(
+  ({
+    day,
+    isSelectedDay,
+    onPress,
+    dark,
+    brandColor,
+    language,
+    dayTextStyle,
+    disabled,
+  }: DayCellProps) => {
+    if (!day) {
+      return <View style={{ width: '14.28%', paddingVertical: 10 }} />;
+    }
+
+    return (
+      <TouchableOpacity
+        onPress={() => !disabled && onPress(day)}
+        style={[{
+          width: '14.28%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingVertical: 10,
+        },
+        disabled && { opacity: 0.35 }]}
+      >
+        <View
+          style={{
+            paddingHorizontal: 6,
+            paddingVertical: 3,
+            borderRadius: 999,
+            backgroundColor: isSelectedDay
+              ? brandColor
+              : dark
+                ? '#383838'
+                : '#fff',
+          }}
+        >
+          <Text
+            style={[
+              dayTextStyle,
+              {
+                color: isSelectedDay ? '#fff' : dark ? '#fff' : '#000',
+              },
+            ]}
+          >
+            {language === 'np' ? getNepaliNumber(day) : day}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+export default DayCell;

package/src/calendar/config.ts

@@ -163,7 +163,7 @@ bs[2080] = [2080, 31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30];
 
 bs[2081] = [2081, 31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31];
 
-bs[2082] = [2082, 31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30];
+bs[2082] = [2082, 31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30];
 
 bs[2083] = [2083, 31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30];
 

package/src/calendar/functions.ts

@@ -1,5 +1,6 @@
 import { bs } from './config';
 import type { DateString } from '../types';
+import { NEPALI_MAX_YEAR, NEPALI_MIN_YEAR } from './settings';
 
 const formatDate = (date: Date) => {
   const year = date.getFullYear();
@@ -8,18 +9,59 @@ const formatDate = (date: Date) => {
   return `${year}-${month}-${day}`;
 };
 
-export const validateDate = (date: string): string | boolean => {
-  const dateArray = date.split('-');
-  const [userYear, userMonth, _] = dateArray.map(Number);
-  if (dateArray.length !== 3) {
-    return 'Invalid date format';
-  } else if (userYear < 2000 || userYear >= 2100) {
-    return 'Year Range is 2000 to 2099';
-  } else if (userMonth < 1 || userMonth > 12) {
-    return 'Month Range is 1 to 12';
-  } else {
-    return true;
+
+// Add padart 0 if the date is day or months are denoted by single number
+const normalizeNepaliDate = (date: string): string | null => {
+  const parts = date.split('-');
+  if (parts.length !== 3) return null;
+
+  const [y, m, d] = parts;
+
+  if (!/^\d{4}$/.test(y)) return null;
+  if (!/^\d{1,2}$/.test(m)) return null;
+  if (!/^\d{1,2}$/.test(d)) return null;
+
+  return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
+};
+
+
+export const validateDate = (uDate: string): true | string => {
+
+  const normalized = normalizeNepaliDate(uDate)
+
+  if (!normalized) {
+    return 'Date format must be YYYY-MM-DD';
   }
+
+  // format check
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(normalized)) {
+    return 'Date format must be YYYY-MM-DD';
+  }
+  const [yearStr, monthStr, dayStr] = normalized.split('-');
+  const year = Number(yearStr);
+  const month = Number(monthStr);
+  const day = Number(dayStr);
+
+  //  Year range
+  if (year < NEPALI_MIN_YEAR || year > NEPALI_MAX_YEAR) {
+    return 'Year range must be between 2000 and 2099 (BS)';
+  }
+  // Month range
+  if (month < 1 || month > 12) {
+    return 'Month range must be between 01 and 12';
+  }
+  //Day range using BS data
+  const daysInMonth = bs?.[year]?.[month];
+
+  if (!daysInMonth) {
+    return 'Invalid Nepali calendar data';
+  }
+
+  if (day < 1 || day > daysInMonth) {
+    return `Day range for ${year}-${monthStr} is 01 to ${daysInMonth}`;
+  }
+
+  return true;
 };
 
 const FindDateDifference = (date1: number, date2: number) => {
@@ -41,14 +83,14 @@ const AdToBs = (UserDate: DateString): DateString => {
 
   // number of days from that reference date
   const DateDifference = FindDateDifference(ReferenceDate, UserTimeDate);
-  let nepaliYear: number = 2000;
+  let nepaliYear: number = NEPALI_MIN_YEAR;
   let nepaliMonth: number = 1;
   let nepaliDay: number = 1;
   //difference can calculate upto previous day so add 1 to get current day(Today)
 
   let DD = DateDifference + 1;
 
-  outerLoop: for (let year = 2000; year < 2100; year++) {
+  outerLoop: for (let year = NEPALI_MIN_YEAR; year <= NEPALI_MAX_YEAR; year++) {
     for (let month = 1; month <= 12; month++) {
       if (DD <= bs[year][month]) {
         nepaliYear = year;
@@ -76,12 +118,12 @@ const NepaliToday = (): DateString => {
     new Date(formatDate(date)).getTime()
   );
 
-  let nepaliYear: number = 2000;
+  let nepaliYear: number = NEPALI_MIN_YEAR;
   let nepaliMonth: number = 1;
   let nepaliDay: number = 1;
   //difference can calculate upto previous day so add 1 to get current day(Today)
   let DD = DateDifference + 1;
-  outerLoop: for (let year = 2000; year < 2100; year++) {
+  outerLoop: for (let year = NEPALI_MIN_YEAR; year <= NEPALI_MAX_YEAR; year++) {
     for (let month = 1; month <= 12; month++) {
       if (DD <= bs[year][month]) {
         nepaliYear = year;
@@ -108,7 +150,7 @@ const BsToAd = (userDate: DateString): DateString => {
       throw new Error('Invalid date format');
     }
     const [userYear, userMonth, userDay] = dateArray.map(Number);
-    if (userYear < 2000 || userYear >= 2100) {
+    if (userYear < NEPALI_MIN_YEAR || userYear > NEPALI_MAX_YEAR) {
       throw new Error('Year Range is 2000 to 2099');
     }
     if (userMonth < 1 || userMonth > 12) {
@@ -119,7 +161,7 @@ const BsToAd = (userDate: DateString): DateString => {
     //   throw new Error('Month out of supported range');
     // }
 
-    for (let year = 2000; year < userYear; year++) {
+    for (let year = NEPALI_MIN_YEAR; year < userYear; year++) {
       for (let month = 1; month <= 12; month++) {
         dateDifference += bs[year][month];
       }

package/src/calendar/settings.ts

@@ -1,5 +1,7 @@
 import { bs, leapYears } from './config';
 
+export const NEPALI_MIN_YEAR = 2000;
+export const NEPALI_MAX_YEAR = 2099;
 const calcFirstDay = (currentYear: number, currentMonth: number) => {
   let month = currentMonth;
   let year = currentYear;

package/src/calendar/validate.tsx

@@ -0,0 +1,37 @@
+import { validateDate } from "./functions";
+
+export const validateCalendarDates = (
+  date: string,
+  minDate: string,
+  maxDate: string
+): true | string => {
+  // 1. Validate minDate
+  const minCheck = validateDate(minDate);
+  if (minCheck !== true) {
+    return `Invalid minDate: ${minCheck}`;
+  }
+
+  // 2. Validate maxDate
+  const maxCheck = validateDate(maxDate);
+  if (maxCheck !== true) {
+    return `Invalid maxDate: ${maxCheck}`;
+  }
+
+  // 3. Validate user provided date
+  const initialCheck = validateDate(date);
+  if (initialCheck !== true) {
+    return `Invalid provided date: ${initialCheck}`;
+  }
+
+  // 4. Logical range validation
+  if (minDate > maxDate) {
+    return 'minDate must be less than or equal to maxDate';
+  }
+
+  // 5. Initial date within range
+  if (date < minDate || date > maxDate) {
+    return 'Provided date must be between minDate and maxDate';
+  }
+
+  return true;
+};

package/src/index.tsx

@@ -1,3 +1,4 @@
+export { NEPALI_MIN_YEAR, NEPALI_MAX_YEAR } from './calendar/settings'
 export { AdToBs, BsToAd, NepaliToday } from './calendar/functions';
 export { default as CalendarPicker } from './CalendarPicker';
 export type { CalendarPickerProps, DateString } from './types.ts';

package/src/types.ts

@@ -12,6 +12,8 @@ export interface CalendarPickerProps {
   dayTextStyle?: TextStyle;
   weekTextStyle?: TextStyle;
   titleTextStyle?: TextStyle;
-  initialDate?: DateString;
+  date?: DateString;
+  minDate?: DateString;
+  maxDate?: DateString;
 }
 export type DateString = string;