@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/useDatePicker.ts

@@ -1,11 +1,15 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { DatePickerViewMode, DatePickerSelectionMode, DateRange } from '../../components/DatePicker/types';
-import { 
-  getMonthName, 
-  getDaysInMonth, 
-  getFirstDayOfMonth, 
-  formatDate, 
-  isDateInRange
+import {
+  DatePickerViewMode,
+  DatePickerSelectionMode,
+  DateRange,
+} from '../../components/DatePicker/types';
+import {
+  getMonthName,
+  getDaysInMonth,
+  getFirstDayOfMonth,
+  formatDate,
+  isDateInRange,
 } from '../../components/DatePicker/utils';
 
 interface UseDatePickerProps {
@@ -13,47 +17,47 @@ interface UseDatePickerProps {
    * The currently selected date value
    */
   value?: Date | null;
-  
+
   /**
    * Callback function when date is changed
    */
   onChange?: (date: Date | null) => void;
-  
+
   /**
    * Selection mode - single date or date range
    */
   selectionMode?: DatePickerSelectionMode;
-  
+
   /**
    * The start date of the range
    */
   startDate?: Date | null;
-  
+
   /**
    * The end date of the range
    */
   endDate?: Date | null;
-  
+
   /**
    * Callback function when date range is changed
    */
   onRangeChange?: (range: DateRange) => void;
-  
+
   /**
    * Format for the date display
    */
   format?: string;
-  
+
   /**
    * Minimum selectable date
    */
   minDate?: Date;
-  
+
   /**
    * Maximum selectable date
    */
   maxDate?: Date;
-  
+
   /**
    * Whether the datepicker is in inline mode
    */
@@ -82,15 +86,15 @@ export function useDatePicker({
   format = 'MM/dd/yyyy',
   minDate,
   maxDate,
-  inline = false
+  inline = false,
 }: UseDatePickerProps = {}) {
   const [isOpen, setIsOpen] = useState(inline);
   const [inputValue, setInputValue] = useState(value ? formatDate(value, format) : '');
   const [rangeInputValue, setRangeInputValue] = useState(
-    startDate && endDate 
+    startDate && endDate
       ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
-      : startDate 
-        ? `${formatDate(startDate, format)} - Select end date` 
+      : startDate
+        ? `${formatDate(startDate, format)} - Select end date`
         : ''
   );
   const [viewDate, setViewDate] = useState(value || startDate || new Date());
@@ -98,144 +102,157 @@ export function useDatePicker({
   const [rangeSelectionState, setRangeSelectionState] = useState<'start' | 'end'>(
     !startDate || (startDate && endDate) ? 'start' : 'end'
   );
-  
+
   const datePickerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  
+
   const today = new Date();
   const currentMonth = viewDate.getMonth();
   const currentYear = viewDate.getFullYear();
   const daysInMonth = getDaysInMonth(currentYear, currentMonth);
   const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
-  
+
   // Update input value when value or range dates change externally
   useEffect(() => {
     if (selectionMode === 'single') {
       setInputValue(value ? formatDate(value, format) : '');
     } else {
       setRangeInputValue(
-        startDate && endDate 
+        startDate && endDate
           ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
-          : startDate 
-            ? `${formatDate(startDate, format)} - Select end date` 
+          : startDate
+            ? `${formatDate(startDate, format)} - Select end date`
             : ''
       );
       setRangeSelectionState(!startDate || (startDate && endDate) ? 'start' : 'end');
     }
   }, [value, startDate, endDate, format, selectionMode]);
-  
+
   // Handle date selection
-  const handleDateSelect = useCallback((day: number) => {
-    const selectedDate = new Date(currentYear, currentMonth, day);
-    
-    if (minDate && selectedDate < minDate) return;
-    if (maxDate && selectedDate > maxDate) return;
-    
-    if (selectionMode === 'single') {
-      if (onChange) {
-        onChange(selectedDate);
-      }
-      
-      setInputValue(formatDate(selectedDate, format));
-      if (!inline) {
-        setIsOpen(false);
-      }
-    } else {
-      // Range selection mode
-      if (rangeSelectionState === 'start') {
-        // Selecting start date
-        if (onRangeChange) {
-          onRangeChange({
-            startDate: selectedDate,
-            endDate: null
-          });
+  const handleDateSelect = useCallback(
+    (day: number) => {
+      const selectedDate = new Date(currentYear, currentMonth, day);
+
+      if (minDate && selectedDate < minDate) return;
+      if (maxDate && selectedDate > maxDate) return;
+
+      if (selectionMode === 'single') {
+        if (onChange) {
+          onChange(selectedDate);
+        }
+
+        setInputValue(formatDate(selectedDate, format));
+        if (!inline) {
+          setIsOpen(false);
         }
-        setRangeInputValue(`${formatDate(selectedDate, format)} - Select end date`);
-        setRangeSelectionState('end');
       } else {
-        // Selecting end date
-        if (!startDate) return;
-        
-        // Make sure end date is after start date
-        if (selectedDate < startDate) {
+        // Range selection mode
+        if (rangeSelectionState === 'start') {
+          // Selecting start date
           if (onRangeChange) {
             onRangeChange({
               startDate: selectedDate,
-              endDate: startDate
+              endDate: null,
             });
           }
-          setRangeInputValue(`${formatDate(selectedDate, format)} - ${formatDate(startDate, format)}`);
+          setRangeInputValue(`${formatDate(selectedDate, format)} - Select end date`);
+          setRangeSelectionState('end');
         } else {
-          if (onRangeChange) {
-            onRangeChange({
-              startDate,
-              endDate: selectedDate
-            });
+          // Selecting end date
+          if (!startDate) return;
+
+          // Make sure end date is after start date
+          if (selectedDate < startDate) {
+            if (onRangeChange) {
+              onRangeChange({
+                startDate: selectedDate,
+                endDate: startDate,
+              });
+            }
+            setRangeInputValue(
+              `${formatDate(selectedDate, format)} - ${formatDate(startDate, format)}`
+            );
+          } else {
+            if (onRangeChange) {
+              onRangeChange({
+                startDate,
+                endDate: selectedDate,
+              });
+            }
+            setRangeInputValue(
+              `${formatDate(startDate, format)} - ${formatDate(selectedDate, format)}`
+            );
           }
-          setRangeInputValue(`${formatDate(startDate, format)} - ${formatDate(selectedDate, format)}`);
-        }
-        
-        if (!inline) {
-          setIsOpen(false);
+
+          if (!inline) {
+            setIsOpen(false);
+          }
+          setRangeSelectionState('start');
         }
-        setRangeSelectionState('start');
       }
-    }
-  }, [
-    currentYear, 
-    currentMonth, 
-    minDate, 
-    maxDate, 
-    onChange, 
-    onRangeChange, 
-    format, 
-    inline, 
-    selectionMode, 
-    rangeSelectionState, 
-    startDate
-  ]);
-  
+    },
+    [
+      currentYear,
+      currentMonth,
+      minDate,
+      maxDate,
+      onChange,
+      onRangeChange,
+      format,
+      inline,
+      selectionMode,
+      rangeSelectionState,
+      startDate,
+    ]
+  );
+
   // Calendar navigation
   const handlePrevMonth = useCallback(() => {
     setViewDate(new Date(currentYear, currentMonth - 1, 1));
   }, [currentYear, currentMonth]);
-  
+
   const handleNextMonth = useCallback(() => {
     setViewDate(new Date(currentYear, currentMonth + 1, 1));
   }, [currentYear, currentMonth]);
-  
+
   const handlePrevYear = useCallback(() => {
     setViewDate(new Date(currentYear - 1, currentMonth, 1));
   }, [currentYear, currentMonth]);
-  
+
   const handleNextYear = useCallback(() => {
     setViewDate(new Date(currentYear + 1, currentMonth, 1));
   }, [currentYear, currentMonth]);
-  
+
   // Handle view mode changes
   const switchToMonthView = useCallback(() => {
     setViewMode('months');
   }, []);
-  
+
   const switchToYearView = useCallback(() => {
     setViewMode('years');
   }, []);
-  
-  const selectMonth = useCallback((month: number) => {
-    setViewDate(new Date(currentYear, month, 1));
-    setViewMode('days');
-  }, [currentYear]);
-  
-  const selectYear = useCallback((year: number) => {
-    setViewDate(new Date(year, currentMonth, 1));
-    setViewMode('months');
-  }, [currentMonth]);
-  
+
+  const selectMonth = useCallback(
+    (month: number) => {
+      setViewDate(new Date(currentYear, month, 1));
+      setViewMode('days');
+    },
+    [currentYear]
+  );
+
+  const selectYear = useCallback(
+    (year: number) => {
+      setViewDate(new Date(year, currentMonth, 1));
+      setViewMode('months');
+    },
+    [currentMonth]
+  );
+
   // Handle today button click
   const handleTodayClick = useCallback(() => {
     const todayDate = new Date();
     setViewDate(todayDate);
-    
+
     if (selectionMode === 'single') {
       handleDateSelect(todayDate.getDate());
     } else {
@@ -243,7 +260,7 @@ export function useDatePicker({
       setViewDate(new Date());
     }
   }, [handleDateSelect, selectionMode]);
-  
+
   // Handle clear button click
   const handleClear = useCallback(() => {
     if (selectionMode === 'single') {
@@ -257,69 +274,72 @@ export function useDatePicker({
       if (onRangeChange) {
         onRangeChange({
           startDate: null,
-          endDate: null
+          endDate: null,
         });
       }
     }
   }, [onChange, onRangeChange, selectionMode]);
-  
+
   // Handle input change
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (selectionMode === 'single') {
-      setInputValue(e.target.value);
-      
-      // Try to parse the date
-      const parsedDate = new Date(e.target.value);
-      if (!isNaN(parsedDate.getTime())) {
-        if (onChange) {
-          onChange(parsedDate);
-        }
-        setViewDate(parsedDate);
-      }
-    } else {
-      setRangeInputValue(e.target.value);
-      
-      // Attempt to parse range input (not fully implemented - would need complex parsing)
-      // This is a simplified implementation that would need improvement
-      const parts = e.target.value.split('-');
-      if (parts.length === 2) {
-        const startPart = parts[0].trim();
-        const endPart = parts[1].trim();
-        
-        const parsedStart = new Date(startPart);
-        if (!isNaN(parsedStart.getTime())) {
-          setViewDate(parsedStart);
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (selectionMode === 'single') {
+        setInputValue(e.target.value);
+
+        // Try to parse the date
+        const parsedDate = new Date(e.target.value);
+        if (!isNaN(parsedDate.getTime())) {
+          if (onChange) {
+            onChange(parsedDate);
+          }
+          setViewDate(parsedDate);
         }
-        
-        // Attempt to parse both dates
-        if (startPart && endPart) {
-          const parsedStartDate = new Date(startPart);
-          const parsedEndDate = new Date(endPart);
-          
-          if (!isNaN(parsedStartDate.getTime()) && !isNaN(parsedEndDate.getTime())) {
-            if (onRangeChange) {
-              onRangeChange({
-                startDate: parsedStartDate,
-                endDate: parsedEndDate
-              });
+      } else {
+        setRangeInputValue(e.target.value);
+
+        // Attempt to parse range input (not fully implemented - would need complex parsing)
+        // This is a simplified implementation that would need improvement
+        const parts = e.target.value.split('-');
+        if (parts.length === 2) {
+          const startPart = parts[0].trim();
+          const endPart = parts[1].trim();
+
+          const parsedStart = new Date(startPart);
+          if (!isNaN(parsedStart.getTime())) {
+            setViewDate(parsedStart);
+          }
+
+          // Attempt to parse both dates
+          if (startPart && endPart) {
+            const parsedStartDate = new Date(startPart);
+            const parsedEndDate = new Date(endPart);
+
+            if (!isNaN(parsedStartDate.getTime()) && !isNaN(parsedEndDate.getTime())) {
+              if (onRangeChange) {
+                onRangeChange({
+                  startDate: parsedStartDate,
+                  endDate: parsedEndDate,
+                });
+              }
             }
           }
         }
       }
-    }
-  }, [onChange, onRangeChange, selectionMode]);
-  
+    },
+    [onChange, onRangeChange, selectionMode]
+  );
+
   // Handle input focus
   const handleInputFocus = useCallback(() => {
     if (!inline) {
       setIsOpen(true);
     }
   }, [inline]);
-  
+
   // Handle click outside
   const handleClickOutside = useCallback((event: MouseEvent) => {
     if (
-      datePickerRef.current && 
+      datePickerRef.current &&
       !datePickerRef.current.contains(event.target as Node) &&
       inputRef.current &&
       !inputRef.current.contains(event.target as Node)
@@ -327,7 +347,7 @@ export function useDatePicker({
       setIsOpen(false);
     }
   }, []);
-  
+
   // Add/remove event listeners
   useEffect(() => {
     if (isOpen && !inline) {
@@ -335,12 +355,12 @@ export function useDatePicker({
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-    
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, handleClickOutside, inline]);
-  
+
   // Generate days for the calendar
   const generateDays = useCallback((): DateObject[] => {
     const days: DateObject[] = [];
@@ -348,27 +368,27 @@ export function useDatePicker({
       currentMonth === 0 ? currentYear - 1 : currentYear,
       currentMonth === 0 ? 11 : currentMonth - 1
     );
-    
+
     // Add previous month's days
     for (let i = firstDayOfMonth - 1; i >= 0; i--) {
       days.push({
         day: prevMonthDays - i,
         month: currentMonth === 0 ? 11 : currentMonth - 1,
         year: currentMonth === 0 ? currentYear - 1 : currentYear,
-        isCurrentMonth: false
+        isCurrentMonth: false,
       });
     }
-    
+
     // Add current month's days
     for (let i = 1; i <= daysInMonth; i++) {
       days.push({
         day: i,
         month: currentMonth,
         year: currentYear,
-        isCurrentMonth: true
+        isCurrentMonth: true,
       });
     }
-    
+
     // Add next month's days
     const remainingDays = 42 - days.length;
     for (let i = 1; i <= remainingDays; i++) {
@@ -376,25 +396,25 @@ export function useDatePicker({
         day: i,
         month: currentMonth === 11 ? 0 : currentMonth + 1,
         year: currentMonth === 11 ? currentYear + 1 : currentYear,
-        isCurrentMonth: false
+        isCurrentMonth: false,
       });
     }
-    
+
     return days;
   }, [daysInMonth, firstDayOfMonth, currentMonth, currentYear]);
-  
+
   // Generate months for month picker
   const generateMonths = useCallback((): MonthObject[] => {
     const months: MonthObject[] = [];
     for (let i = 0; i < 12; i++) {
       months.push({
         month: i,
-        name: getMonthName(i)
+        name: getMonthName(i),
       });
     }
     return months;
   }, []);
-  
+
   // Generate years for year picker
   const generateYears = useCallback((): number[] => {
     const years: number[] = [];
@@ -404,74 +424,78 @@ export function useDatePicker({
     }
     return years;
   }, [currentYear]);
-  
+
   // Check if a date is selectable
-  const isDateSelectable = useCallback((year: number, month: number, day: number): boolean => {
-    const date = new Date(year, month, day);
-    return isDateInRange(date, minDate, maxDate);
-  }, [minDate, maxDate]);
-  
-  // Check if a date is selected
-  const isDateSelected = useCallback((year: number, month: number, day: number): boolean => {
-    if (selectionMode === 'single') {
-      if (!value) return false;
-    
-      return (
-        value.getFullYear() === year &&
-        value.getMonth() === month &&
-        value.getDate() === day
-      );
-    } else {
-      if (!startDate && !endDate) return false;
-      
+  const isDateSelectable = useCallback(
+    (year: number, month: number, day: number): boolean => {
       const date = new Date(year, month, day);
-      
-      if (startDate && !endDate) {
+      return isDateInRange(date, minDate, maxDate);
+    },
+    [minDate, maxDate]
+  );
+
+  // Check if a date is selected
+  const isDateSelected = useCallback(
+    (year: number, month: number, day: number): boolean => {
+      if (selectionMode === 'single') {
+        if (!value) return false;
+
         return (
-          startDate.getFullYear() === year &&
-          startDate.getMonth() === month &&
-          startDate.getDate() === day
-        );
-      }
-      
-      if (startDate && endDate) {
-        // Return true if the date is the start date or end date
-        const isStartDate = (
-          startDate.getFullYear() === year &&
-          startDate.getMonth() === month &&
-          startDate.getDate() === day
+          value.getFullYear() === year && value.getMonth() === month && value.getDate() === day
         );
-        
-        const isEndDate = (
-          endDate.getFullYear() === year &&
-          endDate.getMonth() === month &&
-          endDate.getDate() === day
-        );
-        
-        return isStartDate || isEndDate;
+      } else {
+        if (!startDate && !endDate) return false;
+
+        const date = new Date(year, month, day);
+
+        if (startDate && !endDate) {
+          return (
+            startDate.getFullYear() === year &&
+            startDate.getMonth() === month &&
+            startDate.getDate() === day
+          );
+        }
+
+        if (startDate && endDate) {
+          // Return true if the date is the start date or end date
+          const isStartDate =
+            startDate.getFullYear() === year &&
+            startDate.getMonth() === month &&
+            startDate.getDate() === day;
+
+          const isEndDate =
+            endDate.getFullYear() === year &&
+            endDate.getMonth() === month &&
+            endDate.getDate() === day;
+
+          return isStartDate || isEndDate;
+        }
+
+        return false;
       }
-      
-      return false;
-    }
-  }, [value, selectionMode, startDate, endDate]);
-  
+    },
+    [value, selectionMode, startDate, endDate]
+  );
+
   // Check if a date is in range (between startDate and endDate)
-  const isDateInSelectedRange = useCallback((year: number, month: number, day: number): boolean => {
-    if (selectionMode !== 'range' || !startDate || !endDate) return false;
-    
-    const date = new Date(year, month, day);
-    return date > startDate && date < endDate;
-  }, [selectionMode, startDate, endDate]);
-  
+  const isDateInSelectedRange = useCallback(
+    (year: number, month: number, day: number): boolean => {
+      if (selectionMode !== 'range' || !startDate || !endDate) return false;
+
+      const date = new Date(year, month, day);
+      return date > startDate && date < endDate;
+    },
+    [selectionMode, startDate, endDate]
+  );
+
   // Check if a date is today
-  const isToday = useCallback((year: number, month: number, day: number): boolean => {
-    return (
-      today.getFullYear() === year &&
-      today.getMonth() === month &&
-      today.getDate() === day
-    );
-  }, [today]);
-  
+  const isToday = useCallback(
+    (year: number, month: number, day: number): boolean => {
+      return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
+    },
+    [today]
+  );
+
   // Calculate week number for a date
   const getWeekNumber = useCallback((date: Date): number => {
     const target = new Date(date.valueOf());
@@ -480,11 +504,11 @@ export function useDatePicker({
     const firstThursday = target.valueOf();
     target.setMonth(0, 1);
     if (target.getDay() !== 4) {
-      target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
+      target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7));
     }
     return 1 + Math.ceil((firstThursday - target.valueOf()) / 604800000);
   }, []);
-  
+
   return {
     // State
     isOpen,
@@ -496,15 +520,15 @@ export function useDatePicker({
     currentYear,
     selectionMode,
     rangeSelectionState,
-    
+
     // Refs
     datePickerRef,
     inputRef,
-    
+
     // Range state
     startDate,
     endDate,
-    
+
     // Action handlers
     setIsOpen,
     handleDateSelect,
@@ -516,18 +540,18 @@ export function useDatePicker({
     handleClear,
     handleInputChange,
     handleInputFocus,
-    
+
     // View mode handlers
     switchToMonthView,
     switchToYearView,
     selectMonth,
     selectYear,
-    
+
     // Data generators
     generateDays,
     generateMonths,
     generateYears,
-    
+
     // State checkers
     isDateSelectable,
     isDateSelected,
@@ -535,4 +559,4 @@ export function useDatePicker({
     isToday,
     getWeekNumber,
   };
-} 
+}