Merge branch 'main' into dependabot/npm_and_yarn/example/expo-and-exp…

…o/webpack-config-49.0.16

src/DateTimePicker.tsx

@@ -8,10 +8,11 @@ import type {
   CalendarAction,
   CalendarState,
   CalendarTheme,
+  HeaderProps,
 } from './types';
 import Calendar from './components/Calendar';
 
-interface PropTypes extends CalendarTheme {
+interface PropTypes extends CalendarTheme, HeaderProps {
   value: DateType;
   mode?: CalendarModes;
   locale?: string | ILocale;
@@ -46,6 +47,8 @@ const DateTimePicker = ({
   selectedItemColor,
   timePickerContainerStyle,
   timePickerTextStyle,
+  buttonLeftIcon,
+  buttonRightIcon,
 }: PropTypes) => {
   const utils = new calendarUtils({
     mode,
@@ -173,7 +176,10 @@ const DateTimePicker = ({
 
   return (
     <CalendarContext.Provider value={{ ...state, ...actions, utils, theme }}>
-      <Calendar />
+      <Calendar
+        buttonLeftIcon={buttonLeftIcon}
+        buttonRightIcon={buttonRightIcon}
+      />
     </CalendarContext.Provider>
   );
 };

src/components/Calendar.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import { CalendarViews } from '../enums';
+import type { CalendarViews } from '../enums';
+import type { HeaderProps } from '../types';
 import Header from './Header';
 import YearSelector from './YearSelector';
 import MonthSelector from './MonthSelector';
 import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
 
-const Calendar = () => {
-  const { utils, currentDate, selectedDate, calendarView, mode } =
-    useCalendarContext();
-  const days = utils.getMonthDays(currentDate);
-  const currentMonth = utils.getDateMonth(currentDate);
-  const currentYear = utils.getDateYear(currentDate);
-  const selectedYear = utils.getDateYear(selectedDate);
+const CalendarView: Record<CalendarViews, ReactNode> = {
+  year: <YearSelector />,
+  month: <MonthSelector />,
+  day: <DaySelector />,
+  time: <TimeSelector />,
+};
+
+interface PropTypes extends HeaderProps {}
+
+const Calendar = ({ buttonLeftIcon, buttonRightIcon }: PropTypes) => {
+  const { calendarView, mode } = useCalendarContext();
 
   return (
     <View style={styles.container}>
-      {mode !== 'time' ? <Header /> : null}
-      <View style={styles.calendarContainer}>
-        {calendarView === CalendarViews.year ? (
-          <YearSelector currentYear={currentYear} selectedYear={selectedYear} />
-        ) : calendarView === CalendarViews.month ? (
-          <MonthSelector month={currentMonth} />
-        ) : calendarView === CalendarViews.day ? (
-          <DaySelector days={days} />
-        ) : (
-          <TimeSelector />
-        )}
-      </View>
+      {mode !== 'time' ? (
+        <Header
+          buttonLeftIcon={buttonLeftIcon}
+          buttonRightIcon={buttonRightIcon}
+        />
+      ) : null}
+      <View style={styles.calendarContainer}>{CalendarView[calendarView]}</View>
     </View>
   );
 };

src/components/DaySelector.tsx

@@ -1,11 +1,17 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import type { IDayObject } from '../utils';
 
-const DaySelector = ({ days }: { days: IDayObject[] }) => {
+const DaySelector = () => {
   const { utils, currentDate, selectedDate, onSelectDate, theme } =
     useCalendarContext();
+  const month = utils.getDateMonth(currentDate);
+  const year = utils.getDateYear(currentDate);
+  const days = useMemo(
+    () => utils.getMonthDays(currentDate),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [month, year]
+  );
 
   const handleSelectDate = (date: string) => {
     const newDate = utils