Merge pull request #37 from farhoudshapouran/refactor/utils

Refactor/utils
farhoudshapouran · Nov 10, 2023 · ef74482 · ef74482
2 parents 1359007 + b0c562c
commit ef74482
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 63 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -57,6 +57,7 @@ export default function App() {
                 },
               ]}
               onPress={() => setTheme(item)}
+              accessibilityRole="button"
             />
           ))}
         </View>
@@ -71,6 +72,7 @@ export default function App() {
                 },
               ]}
               onPress={() => setLocale(item)}
+              accessibilityRole="button"
             >
               <Text
                 style={[
@@ -117,6 +119,7 @@ export default function App() {
                 onPress={() => {
                   setValue(dayjs());
                 }}
+                accessibilityRole="button"
               >
                 <View
                   style={[
@@ -145,6 +148,7 @@ export default function App() {
                 'https://github.com/farhoudshapouran/react-native-ui-datepicker'
               )
             }
+            accessibilityRole="button"
           >
             <Image
               source={require('../assets/github-logo.png')}

diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
@@ -10,6 +10,7 @@ import {
   getWeekdaysMin,
   getToday,
   getFormatedDate,
+  dateFormat,
 } from '../utils';
 
 const DaySelector = () => {
@@ -71,15 +72,15 @@ const DaySelector = () => {
               : null;
 
           const activeItemStyle =
-            day && day.date === getFormatedDate(selectedDate, 'YYYY/MM/DD')
+            day && day.date === getFormatedDate(selectedDate, dateFormat)
               ? {
                   borderColor: theme?.selectedItemColor || '#0047FF',
                   backgroundColor: theme?.selectedItemColor || '#0047FF',
                 }
               : null;
 
           const textStyle =
-            day && day.date === getFormatedDate(selectedDate, 'YYYY/MM/DD')
+            day && day.date === getFormatedDate(selectedDate, dateFormat)
               ? { color: '#fff', ...theme?.selectedTextStyle }
               : day && day.date === getToday()
               ? {
@@ -103,6 +104,7 @@ const DaySelector = () => {
                     day.disabled && styles.disabledDay,
                   ]}
                   testID={day.date}
+                  accessibilityRole="button"
                 >
                   <View style={styles.dayTextContainer}>
                     <Text style={textStyle}>{day.text}</Text>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -32,6 +32,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
           : calendarView === CalendarViews.year && onChangeYear(-12)
       }
       testID="btn-prev"
+      accessibilityRole="button"
     >
       <View
         style={[styles.iconContainer, styles.prev, theme?.headerButtonStyle]}
@@ -61,6 +62,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
           : calendarView === CalendarViews.year && onChangeYear(12)
       }
       testID="btn-next"
+      accessibilityRole="button"
     >
       <View
         style={[styles.iconContainer, styles.next, theme?.headerButtonStyle]}
@@ -91,6 +93,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
             )
           }
           testID="btn-month"
+          accessibilityRole="button"
         >
           <View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
             <Text style={[styles.text, theme?.headerTextStyle]}>
@@ -108,6 +111,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
             )
           }
           testID="btn-year"
+          accessibilityRole="button"
         >
           <View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
             <Text style={[styles.text, theme?.headerTextStyle]}>
@@ -127,6 +131,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
                 : CalendarViews.time
             )
           }
+          accessibilityRole="button"
         >
           <View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
             <Text style={[styles.text, theme?.headerTextStyle]}>
@@ -141,7 +146,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
   return (
     <View
       style={[styles.headerContainer, theme?.headerContainerStyle]}
-      testID="header"
+      accessibilityRole="header"
     >
       {theme?.headerButtonsPosition === 'left' ? (
         <View style={styles.container}>

diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
@@ -29,6 +29,7 @@ const MonthSelector = () => {
               key={index}
               style={styles.monthCell}
               onPress={() => onSelectMonth(index)}
+              accessibilityRole="button"
             >
               <View
                 style={[

diff --git a/src/components/YearSelector.tsx b/src/components/YearSelector.tsx
@@ -35,6 +35,7 @@ const YearSelector = () => {
           key={cellYear}
           onPress={() => onSelectYear(cellYear)}
           style={styles.yearCell}
+          accessibilityRole="button"
         >
           <View
             style={[styles.year, theme?.yearContainerStyle, activeItemStyle]}

diff --git a/src/utils.ts b/src/utils.ts
@@ -9,8 +9,8 @@ export interface IDayObject {
   isCurrentMonth: boolean;
 }
 
-const calendarFormat = 'YYYY/MM/DD HH:mm';
-const dateFormat = 'YYYY/MM/DD';
+export const calendarFormat = 'YYYY-MM-DD HH:mm';
+export const dateFormat = 'YYYY-MM-DD';
 
 export const getMonths = () => dayjs.months();
 
@@ -68,78 +68,70 @@ export const getMonthDays = (
   maximumDate: DateType
 ): IDayObject[] => {
   const date = getDate(datetime);
-  const currentMonthDays = date.daysInMonth();
+  const daysInMonth = date.daysInMonth();
   const prevMonthDays = date.add(-1, 'month').daysInMonth();
   const firstDay = date.date(1);
   const dayOfMonth = firstDay.day() % 7;
 
-  const prevDaysArray = Array.from(
-    { length: dayOfMonth },
-    (_, i) => i + (prevMonthDays - dayOfMonth + 1)
-  );
-  const monthDaysOffset = dayOfMonth + currentMonthDays;
+  const prevDays = displayFullDays
+    ? Array.from({ length: dayOfMonth }, (_, i) => {
+        const day = i + (prevMonthDays - dayOfMonth + 1);
+        const thisDay = date.add(-1, 'month').date(day);
+        return generateDayObject(day, thisDay, minimumDate, maximumDate, false);
+      })
+    : Array(dayOfMonth).fill(null);
+
+  const monthDaysOffset = dayOfMonth + daysInMonth;
   const nextMonthDays = displayFullDays
     ? monthDaysOffset > 35
       ? 42 - monthDaysOffset
       : 35 - monthDaysOffset
     : 0;
 
-  const prevDays =
-    displayFullDays && prevDaysArray && prevDaysArray.length > 0
-      ? prevDaysArray?.map((day) => {
-          const thisDay = date.add(-1, 'month').date(day);
-          let disabled = false;
-          if (minimumDate) {
-            disabled = thisDay < getDate(minimumDate);
-          }
-          if (maximumDate && !disabled) {
-            disabled = thisDay > getDate(maximumDate);
-          }
-          return {
-            text: day.toString(),
-            day,
-            date: getFormatedDate(thisDay, 'YYYY/MM/DD'),
-            disabled,
-            isCurrentMonth: false,
-          };
-        })
-      : new Array(dayOfMonth);
-
-  const currentDays = Array.from({ length: currentMonthDays }, (_, i) => {
-    const thisDay = date.date(i + 1);
-    let disabled = false;
-    if (minimumDate) {
-      disabled = thisDay < getDate(minimumDate);
-    }
-    if (maximumDate && !disabled) {
-      disabled = thisDay > getDate(maximumDate);
-    }
-    return {
-      text: (i + 1).toString(),
-      day: i + 1,
-      date: getFormatedDate(thisDay, 'YYYY/MM/DD'),
-      disabled,
-      isCurrentMonth: true,
-    };
+  const currentDays = Array.from({ length: daysInMonth }, (_, i) => {
+    const day = i + 1;
+    const thisDay = date.date(day);
+    return generateDayObject(day, thisDay, minimumDate, maximumDate, true);
   });
 
   const nextDays = Array.from({ length: nextMonthDays }, (_, i) => {
-    const thisDay = date.add(1, 'month').date(i + 1);
-    let disabled = false;
-    if (minimumDate) {
-      disabled = thisDay < getDate(minimumDate);
-    }
-    if (maximumDate && !disabled) {
-      disabled = thisDay > getDate(maximumDate);
-    }
-    return {
-      text: (i + 1).toString(),
-      day: i + 1,
-      date: getFormatedDate(thisDay, 'YYYY/MM/DD'),
-      disabled,
-      isCurrentMonth: false,
-    };
+    const day = i + 1;
+    const thisDay = date.add(1, 'month').date(day);
+    return generateDayObject(day, thisDay, minimumDate, maximumDate, false);
   });
 
   return [...prevDays, ...currentDays, ...nextDays];
 };
+
+/**
+ * Generate day object for displaying inside day cell
+ *
+ * @param {number} day - number of day
+ * @param {dayjs.Dayjs} date - calculated date based on day, month, and year
+ * @param {DateType} minDate - min selectable date
+ * @param {DateType} maxDate - max selectable date
+ * @param {boolean} isCurrentMonth - define the day is in the current month
+ * @returns {IDayObject} days object based on current date
+ */
+const generateDayObject = (
+  day: number,
+  date: dayjs.Dayjs,
+  minDate: DateType,
+  maxDate: DateType,
+  isCurrentMonth: boolean
+) => {
+  let disabled = false;
+  if (minDate) {
+    disabled = date < getDate(minDate);
+  }
+  if (maxDate && !disabled) {
+    disabled = date > getDate(maxDate);
+  }
+  return {
+    text: day.toString(),
+    day: day,
+    date: getFormatedDate(date, dateFormat),
+    disabled,
+    isCurrentMonth,
+  };
+};