feat: isYearDisabled, isMonthDisabled

farhoudshapouran · Feb 6, 2025 · 31c4d0a · 31c4d0a
1 parent e6b839e
commit 31c4d0a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
 import { Text, View, Pressable, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import { getParsedDate, getMonths } from '../utils';
+import { getParsedDate, getMonths, isMonthDisabled } from '../utils';
 
 const MonthSelector = () => {
-  const { currentDate, onSelectMonth, theme } = useCalendarContext();
+  const { currentDate, onSelectMonth, theme, minDate, maxDate } = useCalendarContext();
   const { month } = getParsedDate(currentDate);
 
   return (
     <View style={styles.container} testID="month-selector">
       <View style={styles.monthsContainer}>
         {getMonths()?.map((item, index) => {
+          const disabled = isMonthDisabled(index, currentDate, {
+            minDate,
+            maxDate,
+          });
           const activeItemStyle =
             index === month
               ? {
@@ -28,15 +32,17 @@ const MonthSelector = () => {
             <Pressable
               key={index}
               style={styles.monthCell}
-              onPress={() => onSelectMonth(index)}
+              onPress={() => (disabled ? null : onSelectMonth(index))}
               accessibilityRole="button"
               accessibilityLabel={item}
+              disabled={disabled}
             >
               <View
                 style={[
                   styles.month,
                   theme?.monthContainerStyle,
                   activeItemStyle,
+                  disabled && styles.disabledMonth,
                 ]}
               >
                 <Text key={index} style={textStyle}>
@@ -73,6 +79,9 @@ const styles = StyleSheet.create({
     borderColor: '#E5E5E5',
     backgroundColor: '#FFFFFF',
   },
+  disabledMonth: {
+    opacity: 0.3,
+  },
 });
 
 export default MonthSelector;
diff --git a/src/components/YearSelector.tsx b/src/components/YearSelector.tsx
@@ -8,17 +8,17 @@ import {
   ViewStyle,
 } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import { getDateYear, getYearRange } from '../utils';
+import { getDateYear, getYearRange, isYearDisabled } from '../utils';
 
 const YearSelector = () => {
-  const { currentDate, currentYear, date, onSelectYear, theme } =
-    useCalendarContext();
+  const { currentDate, currentYear, date, onSelectYear, theme, minDate, maxDate } = useCalendarContext();
   const selectedYear = getDateYear(date);
 
   const generateCells = useCallback(() => {
     const years = getYearRange(currentYear);
     const activeYear = getDateYear(currentDate);
     const column = years.map((year) => {
+      const disabled = isYearDisabled(year, { minDate, maxDate });
       const activeItemStyle: ViewStyle =
         year === selectedYear
           ? {
@@ -44,13 +44,19 @@ const YearSelector = () => {
       return (
         <Pressable
           key={year}
-          onPress={() => onSelectYear(year)}
+          disabled={disabled}
+          onPress={() => (disabled ? null : onSelectYear(year))}
           style={styles.yearCell}
           accessibilityRole="button"
           accessibilityLabel={year.toString()}
         >
           <View
-            style={[styles.year, theme?.yearContainerStyle, activeItemStyle]}
+            style={[
+              styles.year,
+              theme?.yearContainerStyle,
+              activeItemStyle,
+              disabled && styles.disabledYear,
+            ]}
           >
             <Text key={year} style={textStyle}>
               {year}
@@ -94,6 +100,9 @@ const styles = StyleSheet.create({
     borderColor: '#E5E5E5',
     backgroundColor: '#FFFFFF',
   },
+  disabledYear: {
+    opacity: 0.3,
+  },
 });
 
 export default YearSelector;
diff --git a/src/utils.ts b/src/utils.ts
@@ -90,6 +90,39 @@ export function isDateDisabled(
   return false;
 }
 
+export function isYearDisabled(
+  year: number,
+  {
+    minDate,
+    maxDate,
+  }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+  }
+): boolean {
+  if (minDate && year < getDateYear(minDate)) return true;
+  if (maxDate && year > getDateYear(maxDate)) return true;
+
+  return false;
+}
+
+export function isMonthDisabled(
+  month: number,
+  date: DateType,
+  {
+    minDate,
+    maxDate,
+  }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+  }
+): boolean {
+  if (minDate && month < getDateMonth(minDate) && getDateYear(date) === getDateYear(minDate)) return true;
+  if (maxDate && month > getDateMonth(maxDate) && getDateYear(date) === getDateYear(maxDate)) return true;
+
+  return false;
+}
+
 export const getFormatedDate = (date: DateType, format: string) =>
   dayjs(date).format(format);