@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/lib/composables/useDatePicker.ts

@@ -1,538 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { DatePickerViewMode, DatePickerSelectionMode, DateRange } from '../../components/DatePicker/types';
-import { 
-  getMonthName, 
-  getDaysInMonth, 
-  getFirstDayOfMonth, 
-  formatDate, 
-  isDateInRange
-} from '../../components/DatePicker/utils';
-
-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
-   */
-  inline?: boolean;
-}
-
-interface DateObject {
-  day: number;
-  month: number;
-  year: number;
-  isCurrentMonth: boolean;
-}
-
-interface MonthObject {
-  month: number;
-  name: string;
-}
-
-export function useDatePicker({
-  value,
-  onChange,
-  selectionMode = 'single',
-  startDate,
-  endDate,
-  onRangeChange,
-  format = 'MM/dd/yyyy',
-  minDate,
-  maxDate,
-  inline = false
-}: UseDatePickerProps = {}) {
-  const [isOpen, setIsOpen] = useState(inline);
-  const [inputValue, setInputValue] = useState(value ? formatDate(value, format) : '');
-  const [rangeInputValue, setRangeInputValue] = useState(
-    startDate && endDate 
-      ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
-      : startDate 
-        ? `${formatDate(startDate, format)} - Select end date` 
-        : ''
-  );
-  const [viewDate, setViewDate] = useState(value || startDate || new Date());
-  const [viewMode, setViewMode] = useState<DatePickerViewMode>('days');
-  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 
-          ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
-          : 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
-          });
-        }
-        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) {
-          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)}`);
-        }
-        
-        if (!inline) {
-          setIsOpen(false);
-        }
-        setRangeSelectionState('start');
-      }
-    }
-  }, [
-    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]);
-  
-  // Handle today button click
-  const handleTodayClick = useCallback(() => {
-    const todayDate = new Date();
-    setViewDate(todayDate);
-    
-    if (selectionMode === 'single') {
-      handleDateSelect(todayDate.getDate());
-    } else {
-      // For range mode, just navigate to today
-      setViewDate(new Date());
-    }
-  }, [handleDateSelect, selectionMode]);
-  
-  // Handle clear button click
-  const handleClear = useCallback(() => {
-    if (selectionMode === 'single') {
-      setInputValue('');
-      if (onChange) {
-        onChange(null);
-      }
-    } else {
-      setRangeInputValue('');
-      setRangeSelectionState('start');
-      if (onRangeChange) {
-        onRangeChange({
-          startDate: 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);
-        }
-        
-        // 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]);
-  
-  // Handle input focus
-  const handleInputFocus = useCallback(() => {
-    if (!inline) {
-      setIsOpen(true);
-    }
-  }, [inline]);
-  
-  // Handle click outside
-  const handleClickOutside = useCallback((event: MouseEvent) => {
-    if (
-      datePickerRef.current && 
-      !datePickerRef.current.contains(event.target as Node) &&
-      inputRef.current &&
-      !inputRef.current.contains(event.target as Node)
-    ) {
-      setIsOpen(false);
-    }
-  }, []);
-  
-  // Add/remove event listeners
-  useEffect(() => {
-    if (isOpen && !inline) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } 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[] = [];
-    const prevMonthDays = getDaysInMonth(
-      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
-      });
-    }
-    
-    // Add current month's days
-    for (let i = 1; i <= daysInMonth; i++) {
-      days.push({
-        day: i,
-        month: currentMonth,
-        year: currentYear,
-        isCurrentMonth: true
-      });
-    }
-    
-    // Add next month's days
-    const remainingDays = 42 - days.length;
-    for (let i = 1; i <= remainingDays; i++) {
-      days.push({
-        day: i,
-        month: currentMonth === 11 ? 0 : currentMonth + 1,
-        year: currentMonth === 11 ? currentYear + 1 : currentYear,
-        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)
-      });
-    }
-    return months;
-  }, []);
-  
-  // Generate years for year picker
-  const generateYears = useCallback((): number[] => {
-    const years: number[] = [];
-    const startYear = currentYear - 6;
-    for (let i = 0; i < 12; i++) {
-      years.push(startYear + i);
-    }
-    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 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;
-    }
-  }, [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]);
-  
-  // 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]);
-  
-  // Calculate week number for a date
-  const getWeekNumber = useCallback((date: Date): number => {
-    const target = new Date(date.valueOf());
-    const dayNr = (date.getDay() + 6) % 7;
-    target.setDate(target.getDate() - dayNr + 3);
-    const firstThursday = target.valueOf();
-    target.setMonth(0, 1);
-    if (target.getDay() !== 4) {
-      target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
-    }
-    return 1 + Math.ceil((firstThursday - target.valueOf()) / 604800000);
-  }, []);
-  
-  return {
-    // State
-    isOpen,
-    inputValue,
-    rangeInputValue,
-    viewDate,
-    viewMode,
-    currentMonth,
-    currentYear,
-    selectionMode,
-    rangeSelectionState,
-    
-    // Refs
-    datePickerRef,
-    inputRef,
-    
-    // Range state
-    startDate,
-    endDate,
-    
-    // Action handlers
-    setIsOpen,
-    handleDateSelect,
-    handlePrevMonth,
-    handleNextMonth,
-    handlePrevYear,
-    handleNextYear,
-    handleTodayClick,
-    handleClear,
-    handleInputChange,
-    handleInputFocus,
-    
-    // View mode handlers
-    switchToMonthView,
-    switchToYearView,
-    selectMonth,
-    selectYear,
-    
-    // Data generators
-    generateDays,
-    generateMonths,
-    generateYears,
-    
-    // State checkers
-    isDateSelectable,
-    isDateSelected,
-    isDateInSelectedRange,
-    isToday,
-    getWeekNumber,
-  };
-}