react-native-nepali-picker 0.1.0

package/src/CalendarPicker.tsx

@@ -0,0 +1,460 @@
+import { useEffect, useState, type ReactNode } 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 } from './calendar/functions';
+import { ChevronIcon } from './assets/Icons';
+import DateSyncLogo from './assets/DateSync';
+import Triangle from './assets/Triangle';
+
+interface CalendarPickerPoros {
+  visible: boolean;
+  children?: ReactNode;
+  onClose: () => void;
+  theme?: 'dark' | 'light';
+  onDateSelect: (date: string) => void;
+  language?: 'en' | 'np';
+  brandColor?: string;
+}
+
+const CalendarPicker = ({
+  visible,
+  onClose,
+  theme = 'light',
+  onDateSelect,
+  language = 'np',
+  brandColor = '#2081b9',
+}: CalendarPickerPoros) => {
+  const TodayNepaliDate = NepaliToday();
+  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 [month, setMonth] = useState<number>(cMonth);
+  const [year, setYear] = useState<number>(cYear);
+  const [calendarDate, setCalendarDate] = useState<(number | null)[]>([]);
+
+  const [yearModal, setYearModal] = useState<boolean>(false);
+  const handleDateClick = (day: number) => {
+    const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+    onDateSelect(date);
+    onClose();
+  };
+
+  const handleNextClick = () => {
+    if (month === 12) {
+      if (year < 2099) {
+        setYear((prev) => prev + 1);
+        setMonth(1);
+      }
+    } else {
+      setMonth((prev) => prev + 1);
+    }
+  };
+  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]);
+
+  const syncToday = () => {
+    setMonth(cMonth);
+    setYear(cYear);
+  };
+
+  const handleYearClick = (year: number) => {
+    setYear(year);
+    closeYearView();
+  };
+  const dark = theme === 'dark';
+  const weekDays = language === 'en' ? daysInEnglish : daysInNepali;
+
+  return (
+    <Modal visible={visible} onRequestClose={onClose}>
+      <Pressable style={styles.outerPressable} onPress={onClose}>
+        <Pressable onPress={() => {}} style={styles.innerPressable}>
+          <View
+            style={{
+              ...styles.innerView,
+              backgroundColor: dark ? '#383838' : '#ffffff',
+            }}
+          >
+            <Text
+              style={{ color: dark ? 'white' : 'black', paddingHorizontal: 10 }}
+            >
+              {language === 'np' ? 'आजको मिति ' : "Today's Date"}
+            </Text>
+            {/* Today date in large fonts on click sync the calenar with today date */}
+            <View
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                paddingHorizontal: 10,
+                marginBottom: 20,
+                alignItems: 'center',
+              }}
+            >
+              <View>
+                <TouchableOpacity onPress={syncToday}>
+                  {language == 'np' ? (
+                    <Text
+                      style={{
+                        ...styles.TitleText,
+                        fontSize: 20,
+                        color: dark ? '#fff' : '#000',
+                      }}
+                    >
+                      {getNepaliNumber(cYear)} {monthsInNepali[cMonth - 1]}
+                      {'  '} {getNepaliNumber(cDay)}
+                    </Text>
+                  ) : (
+                    <Text
+                      style={{
+                        ...styles.TitleText,
+                        fontSize: 27,
+                        color: dark ? '#fff' : '#000',
+                      }}
+                    >
+                      {cYear} {monthsInEnglish[cMonth - 1]}
+                      {'  '} {cDay}
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              </View>
+              <TouchableOpacity onPress={syncToday}>
+                <DateSyncLogo day={cDay} color={dark ? '#ffff' : '#000'} />
+              </TouchableOpacity>
+            </View>
+
+            {/* for button container */}
+            <View style={styles.ButtonContainer}>
+              <TouchableOpacity
+                style={styles.CButton}
+                onPress={handlePreviousClick}
+              >
+                <ChevronIcon
+                  direction="right"
+                  color={dark ? 'white' : 'black'}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+                onPress={openYearView}
+              >
+                <Text
+                  style={{
+                    ...styles.TitleText,
+                    marginRight: 6,
+                    color: dark ? 'white' : 'black',
+                  }}
+                >
+                  {language == 'np'
+                    ? monthsInNepali[month - 1]
+                    : monthsInEnglish[month - 1]}
+                </Text>
+                <Text
+                  style={{
+                    ...styles.TitleText,
+                    marginRight: 10,
+                    color: dark ? 'white' : 'black',
+                  }}
+                >
+                  {language == 'np' ? getNepaliNumber(year) : year}
+                </Text>
+
+                <Triangle
+                  height={10}
+                  width={13}
+                  color={dark ? 'white' : 'black'}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.CButton}
+                onPress={handleNextClick}
+              >
+                <ChevronIcon
+                  direction="left"
+                  color={dark ? 'white' : 'black'}
+                />
+              </TouchableOpacity>
+            </View>
+
+            {/* Overall date container whith week days and day item */}
+            <View style={styles.outerDateConainer}>
+              {/* for header of calendar week days */}
+              <View style={styles.weekContainer}>
+                {weekDays.map((item, index) => {
+                  return (
+                    <View style={styles.WeekItem} key={index}>
+                      <Text
+                        style={{
+                          ...styles.WeekText,
+                          color: dark ? 'white' : 'black',
+                        }}
+                      >
+                        {item}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </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={{
+                              ...styles.DayText,
+                              color: isToday(
+                                TodayNepaliDate,
+                                index,
+                                year,
+                                month,
+                                firstDayOfMonth
+                              )
+                                ? '#fff'
+                                : dark
+                                  ? 'white'
+                                  : 'black',
+                            }}
+                          >
+                            {language === 'np'
+                              ? getNepaliNumber(dayItem)
+                              : dayItem}
+                          </Text>
+                        </View>
+                      ) : null}
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          </View>
+        </Pressable>
+      </Pressable>
+      <Modal visible={yearModal} onRequestClose={closeYearView}>
+        <Pressable
+          style={styles.outerPressable}
+          onPress={() => closeYearView()}
+        >
+          <Pressable style={styles.YearInnerPressable} onPress={() => {}}>
+            <View
+              style={{
+                ...styles.InnerYearView,
+                backgroundColor: dark ? '#383838' : '#f2f2f2',
+              }}
+            >
+              <ScrollView
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={{
+                  display: 'flex',
+                  paddingVertical: 10,
+                  flexDirection: 'row',
+                  justifyContent: 'center',
+                  flexWrap: 'wrap',
+                }}
+              >
+                {Array(100)
+                  .fill(0)
+                  .map((_, index) => {
+                    return (
+                      <TouchableOpacity
+                        key={index}
+                        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,
+                        }}
+                      >
+                        <Text
+                          style={{
+                            fontWeight: '500',
+                            color:
+                              index + 2000 === year
+                                ? 'white'
+                                : dark
+                                  ? 'white'
+                                  : 'black',
+                          }}
+                        >
+                          {language === 'np'
+                            ? getNepaliNumber(index + 2000)
+                            : index + 2000}
+                        </Text>
+                      </TouchableOpacity>
+                    );
+                  })}
+              </ScrollView>
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </Modal>
+  );
+};
+
+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/assets/DateSync.tsx

@@ -0,0 +1,84 @@
+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 (
+    <View style={[styles.container, { width: size, height: size }]}>
+      {/* Calendar base */}
+      <View style={[styles.calendarBase, { borderColor: color }]}>
+        {/* Date text */}
+        <Text style={[styles.dateText, { color: color, fontSize: 9 * scale }]}>
+          {day}
+        </Text>
+      </View>
+
+      {/* Calendar top */}
+      <View
+        style={[styles.calendarTop, { borderColor: color, top: 2 * scale }]}
+      />
+    </View>
+  );
+};
+
+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.tsx

@@ -0,0 +1,143 @@
+import { View, StyleSheet } from 'react-native';
+
+const ChevronIcon = ({ direction = 'right', size = 15, color = '#000' }) => {
+  const isLeft = direction === 'left';
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <View
+        style={[
+          styles.line,
+          isLeft ? styles.leftTop : styles.rightTop,
+          { backgroundColor: color },
+        ]}
+      />
+      <View
+        style={[
+          styles.line,
+          isLeft ? styles.leftBottom : styles.rightBottom,
+          { backgroundColor: color },
+        ]}
+      />
+    </View>
+  );
+};
+
+const EditPencilIcon = ({ size = 24, color = '#000' }) => {
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <View style={[styles.pencilBody, { backgroundColor: color }]} />
+      <View style={[styles.pencilTip, { borderBottomColor: color }]} />
+      <View style={[styles.pencilEraser, { backgroundColor: '#FFA07A' }]} />
+    </View>
+  );
+};
+const Triangle = ({ width = 10, height = 20, color = 'white' }) => {
+  return (
+    <View
+      style={[
+        styles.triangle,
+        {
+          borderLeftWidth: width / 2,
+          borderRightWidth: width / 2,
+          borderBottomWidth: height,
+          borderBottomColor: color,
+        },
+      ]}
+    />
+  );
+};
+const ChevronDown = ({ size = 10, color = '#000' }) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: size, height: size, transform: [{ rotate: '-90deg' }] },
+      ]}
+    >
+      <View
+        style={[styles.line, styles.rightTop, { backgroundColor: color }]}
+      />
+      <View
+        style={[styles.line, styles.rightBottom, { backgroundColor: color }]}
+      />
+    </View>
+  );
+};
+
+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 };