Merge pull request #33 from farhoudshapouran/change-utils-usage

Change utils usage

example/src/App.tsx

@@ -68,6 +68,7 @@ export default function App() {
               fontWeight: 'bold',
               color: theme?.activeTextColor,
             }}
+            // eslint-disable-next-line react-native/no-inline-styles
             todayContainerStyle={{
               borderWidth: 1,
             }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-datepicker",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Customizable datetime picker for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/CalendarContext.tsx

@@ -1,14 +1,16 @@
 import { createContext, useContext } from 'react';
-import calendarUtils from './utils';
 import { CalendarViews } from './enums';
 import type { DateType, CalendarTheme, CalendarModes } from './types';
 
 export interface CalendarContextType {
-  utils: calendarUtils;
   calendarView: CalendarViews;
   selectedDate: DateType;
   currentDate: DateType;
   mode: CalendarModes;
+  locale: string | ILocale;
+  displayFullDays: boolean;
+  minimumDate: DateType;
+  maximumDate: DateType;
   theme?: CalendarTheme;
   setCalendarView: (value: CalendarViews) => void;
   onSelectDate: (date: DateType) => void;
@@ -19,17 +21,14 @@ export interface CalendarContextType {
 }
 
 const CalendarContext = createContext<CalendarContextType>({
-  utils: new calendarUtils({
-    mode: 'datetime',
-    locale: 'en',
-    minimumDate: null,
-    maximumDate: null,
-    displayFullDays: false,
-  }),
   calendarView: CalendarViews.day,
   selectedDate: Date.now(),
   currentDate: Date.now(),
   mode: 'datetime',
+  locale: 'en',
+  minimumDate: null,
+  maximumDate: null,
+  displayFullDays: false,
   setCalendarView: () => {},
   onSelectDate: () => {},
   onSelectMonth: () => {},

src/DateTimePicker.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer } from 'react';
-import calendarUtils from './utils';
+import utils from './utils';
 import CalendarContext from './CalendarContext';
 import { CalendarViews, CalendarActionKind } from './enums';
 import type {
@@ -11,6 +11,12 @@ import type {
   HeaderProps,
 } from './types';
 import Calendar from './components/Calendar';
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(localeData);
+dayjs.extend(relativeTime);
 
 interface PropTypes extends CalendarTheme, HeaderProps {
   value: DateType;
@@ -52,13 +58,8 @@ const DateTimePicker = ({
   buttonPrevIcon,
   buttonNextIcon,
 }: PropTypes) => {
-  const utils = new calendarUtils({
-    mode,
-    locale,
-    minimumDate,
-    maximumDate,
-    displayFullDays,
-  });
+  dayjs.locale(locale);
+
   const theme = {
     headerButtonsPosition,
     headerContainerStyle,
@@ -103,9 +104,8 @@ const DateTimePicker = ({
     },
     {
       calendarView: mode === 'time' ? CalendarViews.time : CalendarViews.day,
-      selectedDate: value ? utils.getFormatedValue(value) : utils.getNow(),
-      currentDate: value ? utils.getFormatedValue(value) : utils.getNow(),
-      mode: mode,
+      selectedDate: value ? utils.getFormated(value) : utils.getNow(),
+      currentDate: value ? utils.getFormated(value) : utils.getNow(),
     }
   );
 
@@ -120,6 +120,13 @@ const DateTimePicker = ({
     });
   }, [value]);
 
+  useEffect(() => {
+    dispatch({
+      type: CalendarActionKind.SET_CALENDAR_VIEW,
+      payload: mode === 'time' ? CalendarViews.time : CalendarViews.day,
+    });
+  }, [mode]);
+
   const actions = {
     setCalendarView: (view: CalendarViews) =>
       dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view }),
@@ -173,7 +180,18 @@ const DateTimePicker = ({
   };
 
   return (
-    <CalendarContext.Provider value={{ ...state, ...actions, utils, theme }}>
+    <CalendarContext.Provider
+      value={{
+        ...state,
+        ...actions,
+        locale,
+        mode,
+        displayFullDays,
+        minimumDate,
+        maximumDate,
+        theme,
+      }}
+    >
       <Calendar
         buttonPrevIcon={buttonPrevIcon}
         buttonNextIcon={buttonNextIcon}

src/components/DaySelector.tsx

@@ -2,18 +2,31 @@ import React, { memo, useMemo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import { CALENDAR_HEIGHT } from '../enums';
+import utils from '../utils';
 
 const DaySelector = () => {
-  const { utils, currentDate, selectedDate, onSelectDate, theme } =
-    useCalendarContext();
+  const {
+    currentDate,
+    selectedDate,
+    onSelectDate,
+    displayFullDays,
+    minimumDate,
+    maximumDate,
+    theme,
+  } = useCalendarContext();
   const month = utils.getDateMonth(currentDate);
   const year = utils.getDateYear(currentDate);
   const days = useMemo(
     () => {
-      return utils.getMonthDays(currentDate);
+      return utils.getMonthDays(
+        currentDate,
+        displayFullDays,
+        minimumDate,
+        maximumDate
+      );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [month, year, utils.displayFullDays, utils.minimumDate, utils.maximumDate]
+    [month, year, displayFullDays, minimumDate, maximumDate]
   );
 
   const handleSelectDate = (date: string) => {

src/components/MonthSelector.tsx

@@ -1,9 +1,10 @@
 import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
+import utils from '../utils';
 
 const MonthSelector = () => {
-  const { utils, currentDate, onSelectMonth, theme } = useCalendarContext();
+  const { currentDate, onSelectMonth, theme } = useCalendarContext();
   const month = utils.getDateMonth(currentDate);
 
   return (

src/components/TimeSelector.tsx

@@ -3,13 +3,14 @@ import { Text, View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import Wheel from './TimePicker/Wheel';
 import { CALENDAR_HEIGHT } from '../enums';
+import utils from '../utils';
 
 function createNumberList(num: number) {
   return new Array(num).fill(0).map((_, index) => index);
 }
 
 const TimeSelector = () => {
-  const { utils, selectedDate, currentDate, onSelectDate, theme } =
+  const { selectedDate, currentDate, onSelectDate, theme } =
     useCalendarContext();
   const [time, setTime] = useState({
     minute: utils.getDateMinute(selectedDate),
@@ -21,7 +22,7 @@ const TimeSelector = () => {
       minute: utils.getDateMinute(selectedDate),
       hour: utils.getDateHour(selectedDate),
     });
-  }, [selectedDate, utils]);
+  }, [selectedDate]);
 
   return (
     <View style={styles.container}>

src/components/YearSelector.tsx

@@ -1,9 +1,10 @@
 import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
+import utils from '../utils';
 
 const YearSelector = () => {
-  const { utils, currentDate, selectedDate, onSelectYear, theme } =
+  const { currentDate, selectedDate, onSelectYear, theme } =
     useCalendarContext();
   const currentYear = utils.getDateYear(currentDate);
   const selectedYear = utils.getDateYear(selectedDate);

src/types.ts

@@ -13,7 +13,6 @@ export type CalendarState = {
   calendarView: CalendarViews;
   selectedDate: DateType;
   currentDate: DateType;
-  mode: CalendarModes;
 };
 
 export type CalendarAction = {