Merge pull request #38 from farhoudshapouran/dev

Dev

example/app.json

@@ -2,7 +2,9 @@
   "expo": {
     "name": "React Native UI DatePicker",
     "slug": "react-native-ui-datepicker-example",
+    "description": "Customizable React Native DateTime Picker component for Android, iOS, and Web. It includes date, time, and datetime modes and supports different locales.",
     "version": "1.0.0",
+    "githubUrl": "https://github.com/farhoudshapouran/react-native-ui-datepicker",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -22,7 +24,9 @@
       }
     },
     "web": {
-      "favicon": "./assets/calendar.png"
+      "favicon": "./assets/calendar.png",
+      "themeColor": "#FFFFFF",
+      "display": "fullscreen"
     }
   }
 }

example/src/App.tsx

@@ -58,6 +58,7 @@ export default function App() {
               ]}
               onPress={() => setTheme(item)}
               accessibilityRole="button"
+              accessibilityLabel="Set Active Theme"
             />
           ))}
         </View>
@@ -73,6 +74,7 @@ export default function App() {
               ]}
               onPress={() => setLocale(item)}
               accessibilityRole="button"
+              accessibilityLabel={item.toUpperCase()}
             >
               <Text
                 style={[
@@ -120,6 +122,7 @@ export default function App() {
                   setValue(dayjs());
                 }}
                 accessibilityRole="button"
+                accessibilityLabel="Today"
               >
                 <View
                   style={[
@@ -149,6 +152,7 @@ export default function App() {
               )
             }
             accessibilityRole="button"
+            accessibilityLabel="Check repository on GitHub"
           >
             <Image
               source={require('../assets/github-logo.png')}

package.json

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

src/CalendarContext.tsx

@@ -1,11 +1,13 @@
 import { createContext, useContext } from 'react';
 import { CalendarViews } from './enums';
-import type { DateType, CalendarTheme, CalendarModes } from './types';
+import type {
+  DateType,
+  CalendarTheme,
+  CalendarModes,
+  CalendarState,
+} from './types';
 
-export interface CalendarContextType {
-  calendarView: CalendarViews;
-  selectedDate: DateType;
-  currentDate: DateType;
+export interface CalendarContextType extends CalendarState {
   mode: CalendarModes;
   locale: string | ILocale;
   displayFullDays: boolean;
@@ -22,8 +24,9 @@ export interface CalendarContextType {
 
 const CalendarContext = createContext<CalendarContextType>({
   calendarView: CalendarViews.day,
-  selectedDate: Date.now(),
-  currentDate: Date.now(),
+  selectedDate: new Date(),
+  currentDate: new Date(),
+  currentYear: new Date().getFullYear(),
   mode: 'datetime',
   locale: 'en',
   minimumDate: null,

src/DateTimePicker.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer } from 'react';
-import { getNow, getFormated, getDate } from './utils';
+import { getFormated, getDate, getDateYear } from './utils';
 import CalendarContext from './CalendarContext';
 import { CalendarViews, CalendarActionKind } from './enums';
 import type {
@@ -31,7 +31,7 @@ interface PropTypes extends CalendarTheme, HeaderProps {
 }
 
 const DateTimePicker = ({
-  value = getNow(),
+  value,
   mode = 'datetime',
   locale = 'en',
   minimumDate = null,
@@ -97,6 +97,11 @@ const DateTimePicker = ({
             ...prevState,
             currentDate: action.payload,
           };
+        case CalendarActionKind.CHANGE_CURRENT_YEAR:
+          return {
+            ...prevState,
+            currentYear: action.payload,
+          };
         case CalendarActionKind.CHANGE_SELECTED_DATE:
           return {
             ...prevState,
@@ -106,8 +111,9 @@ const DateTimePicker = ({
     },
     {
       calendarView: mode === 'time' ? CalendarViews.time : CalendarViews.day,
-      selectedDate: value ? getFormated(value) : getNow(),
-      currentDate: value ? getFormated(value) : getNow(),
+      selectedDate: value ? getFormated(value) : new Date(),
+      currentDate: value ? getFormated(value) : new Date(),
+      currentYear: value ? getDateYear(value) : new Date().getFullYear(),
     }
   );
 
@@ -120,6 +126,10 @@ const DateTimePicker = ({
       type: CalendarActionKind.CHANGE_CURRENT_DATE,
       payload: value,
     });
+    dispatch({
+      type: CalendarActionKind.CHANGE_CURRENT_YEAR,
+      payload: getDateYear(value),
+    });
   }, [value]);
 
   useEffect(() => {
@@ -173,10 +183,9 @@ const DateTimePicker = ({
       });
     },
     onChangeYear: (year: number) => {
-      const newDate = getDate(state.currentDate).add(year, 'year');
       dispatch({
-        type: CalendarActionKind.CHANGE_CURRENT_DATE,
-        payload: getFormated(newDate),
+        type: CalendarActionKind.CHANGE_CURRENT_YEAR,
+        payload: year,
       });
     },
   };

src/components/Day.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { CalendarTheme, IDayObject } from '../types';
+import { CALENDAR_HEIGHT } from '../enums';
+
+type Props = {
+  day?: IDayObject;
+  theme?: CalendarTheme;
+  isToday: boolean;
+  selected: boolean;
+  onSelectDate: (date: string) => void;
+};
+
+const Day = ({ day, theme, isToday, selected, onSelectDate }: Props) => {
+  const dayContainerStyle =
+    day && day.isCurrentMonth ? theme?.dayContainerStyle : { opacity: 0.3 };
+
+  const todayItemStyle = isToday
+    ? {
+        borderWidth: 2,
+        borderColor: theme?.selectedItemColor || '#0047FF',
+        ...theme?.todayContainerStyle,
+      }
+    : null;
+
+  const activeItemStyle = selected
+    ? {
+        borderColor: theme?.selectedItemColor || '#0047FF',
+        backgroundColor: theme?.selectedItemColor || '#0047FF',
+      }
+    : null;
+
+  const textStyle = selected
+    ? { color: '#fff', ...theme?.selectedTextStyle }
+    : isToday
+    ? {
+        ...theme?.calendarTextStyle,
+        color: theme?.selectedItemColor || '#0047FF',
+        ...theme?.todayTextStyle,
+      }
+    : theme?.calendarTextStyle;
+
+  return (
+    <View style={styles.dayCell}>
+      {day ? (
+        <Pressable
+          disabled={day.disabled}
+          onPress={() => onSelectDate(day.date)}
+          style={[
+            styles.dayContainer,
+            dayContainerStyle,
+            todayItemStyle,
+            activeItemStyle,
+            day.disabled && styles.disabledDay,
+          ]}
+          testID={day.date}
+          accessibilityRole="button"
+          accessibilityLabel={day.date}
+        >
+          <View style={styles.dayTextContainer}>
+            <Text style={textStyle}>{day.text}</Text>
+          </View>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dayCell: {
+    width: '14.2%',
+    height: CALENDAR_HEIGHT / 7 - 1,
+  },
+  dayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 1.5,
+    borderRadius: 100,
+  },
+  dayTextContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabledDay: {
+    opacity: 0.3,
+  },
+});
+
+export default React.memo(Day);