react-native-ethiopian-calendar/lib/module/calendar/components/EthiopianCalendar.js

A react native calendar component which is mainly intended for applications which require Ethiopian calendar.

import React, { useCallback, useMemo, useState } from 'react';
import { View } from 'react-native';
import { ethiopicCalendar, toEthiopic, toGregorian } from '../../utils/Calendar/Convertor';
import { Header } from './header';
import { Day } from './day';
import { iterator } from '../../utils/generics';
import { makeStyle } from './styles';
export const EthiopianCalender = props => {
  const {
    date = {
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear()
    },
    locale,
    onDatePress,
    onModeChange,
    onLanguageChange,
    theme,
    hideHeaderButtons,
    selectedDate,
    setSelectedDate
  } = props;
  const styles = makeStyle(theme);
  const [_day, _setDay] = useState(selectedDate ? selectedDate.ethiopian.date : toEthiopic(date.year, date.month, date.day).day);
  const [month, setMonth] = useState(selectedDate ? selectedDate.ethiopian.month : toEthiopic(date.year, date.month, date.day).month);
  const [year, setYear] = useState(selectedDate ? selectedDate.ethiopian.year : toEthiopic(date.year, date.month, date.day).year);
  const firstDayOfTheMonthIndex = useMemo(() => {
    const {
      year: gregorianYear,
      month: gregorianMonth,
      day: gregorianDay
    } = toGregorian(year, month, 1);
    return new Date(gregorianYear, gregorianMonth - 1, gregorianDay).getDay();
  }, [month, year]);
  const lastDayOfTheMonthIndex = useMemo(() => {
    let lastDay = 30;
    if (month === 13) {
      if (ethiopicCalendar.isLeap(year)) {
        lastDay = 6;
      } else {
        lastDay = 5;
      }
    }
    const {
      year: gregorianYear,
      month: gregorianMonth,
      day: gregorianDay
    } = toGregorian(year, month, lastDay);
    return new Date(gregorianYear, gregorianMonth - 1, gregorianDay).getDay();
  }, [month, year]);
  const nextDays = useMemo(() => {
    return 7 - lastDayOfTheMonthIndex - 1;
  }, [lastDayOfTheMonthIndex]);
  const currentDay = useMemo(() => {
    return toEthiopic(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()).day;
  }, []);
  const currentMonthIndex = useMemo(() => {
    return toEthiopic(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()).month;
  }, []);
  const currentYear = useMemo(() => {
    return toEthiopic(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()).year;
  }, []);
  const gotoToday = useCallback(() => {
    setMonth(currentMonthIndex);
    setYear(currentYear);
  }, [currentYear, currentMonthIndex]);
  const next = useCallback(() => {
    const newMonth = month + 1;
    if (newMonth > 13) {
      setMonth(() => 1);
      setYear(previous => previous + 1);
    } else {
      setMonth(() => newMonth);
    }
  }, [month]);
  const prev = useCallback(() => {
    const newMonth = month - 1;
    if (newMonth < 1) {
      setMonth(() => 13);
      setYear(previous => previous - 1);
    } else {
      setMonth(() => newMonth);
    }
  }, [month]);
  const today = iDate => {
    return iDate === currentDay && month === currentMonthIndex && year === currentYear;
  };
  const selected = iDate => {
    if (selectedDate) {
      return selectedDate.ethiopian.date === iDate && selectedDate.ethiopian.month === month && selectedDate.ethiopian.year === year;
    }
    return false;
  };
  const handleDayPress = pressedDay => {
    const toGregorianDate = toGregorian(year, month, pressedDay);
    setSelectedDate({
      ethiopian: {
        date: pressedDay,
        month: month,
        year: year
      },
      gregorian: {
        date: toGregorianDate.day,
        month: toGregorianDate.month,
        year: toGregorianDate.year
      }
    });
    onDatePress({
      ethiopian: {
        date: pressedDay,
        month: month,
        year: year
      },
      gregorian: {
        date: toGregorianDate.day,
        month: toGregorianDate.month,
        year: toGregorianDate.year
      }
    });
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Header, {
    currentDay: currentDay,
    today: gotoToday,
    next: next,
    prev: prev,
    month: month,
    year: year,
    locals: locale,
    mode: 'EC',
    theme: theme,
    onModeChange: onModeChange,
    onLanguageChange: onLanguageChange,
    hideHeaderButtons: hideHeaderButtons
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.daysWrapper]
  }, iterator(firstDayOfTheMonthIndex).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: 30 - firstDayOfTheMonthIndex + i + 1,
    extraDays: true,
    theme: theme
  })), month !== 13 ? iterator(30).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: i + 1,
    today: today(i + 1),
    selected: selected(i + 1),
    onPress: () => handleDayPress(i + 1),
    theme: theme
  })) :
  // IF THE MONTH IS ጳጉሜ(13TH MONTH)
  // IF IT'S ETHIOPIAN LEAP YEAR, THE MONTH WILL 6 DAYS
  // ELSE IT WILL HAVE % DAYS
  iterator(ethiopicCalendar.isLeap(year) ? 6 : 5).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: i + 1,
    today: today(i + 1),
    selected: selected(i + 1),
    onPress: () => handleDayPress(i + 1),
    theme: theme
  })), iterator(nextDays).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: i + 1,
    extraDays: true,
    theme: theme
  }))));
};
//# sourceMappingURL=EthiopianCalendar.js.map