@coreui/react-pro 5.23.5 → 5.24.1

package/src/components/calendar/CCalendarPanel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, KeyboardEvent, useEffect, useState } from 'react'
+import React, { forwardRef, KeyboardEvent, ReactNode, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import {
@@ -12,6 +12,9 @@ import {
   isMonthDisabled,
   isMonthInRange,
   isMonthSelected,
+  isQuarterDisabled,
+  isQuarterInRange,
+  isQuarterSelected,
   isToday,
   isYearDisabled,
   isYearInRange,
@@ -29,11 +32,46 @@ export interface CCalendarPanelProps {
   locale: string
   maxDate: Date | null
   minDate: Date | null
+  monthFormat?: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit'
   onCalendarClick: (date: Date) => void
   onCalendarKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCalendarMouseEnter: (date: Date) => void
   onCalendarMouseLeave: () => void
   order: number
+  renderDayCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInCurrentMonth: boolean
+      isInRange: boolean
+      isSelected: boolean
+      isToday: boolean
+    }
+  ) => ReactNode
+  renderMonthCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderQuarterCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderYearCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
   selectionType: SelectionTypes
@@ -43,6 +81,7 @@ export interface CCalendarPanelProps {
   view: ViewTypes
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
   weekNumbersLabel: string | undefined
+  yearFormat?: 'numeric' | '2-digit'
 }
 
 export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
@@ -57,10 +96,15 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       locale,
       maxDate,
       minDate,
+      monthFormat,
       onCalendarClick,
       onCalendarKeyDown,
       onCalendarMouseEnter,
       onCalendarMouseLeave,
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       selectAdjacementDays,
       selectEndDate,
       selectionType,
@@ -70,13 +114,14 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       view,
       weekdayFormat,
       weekNumbersLabel,
+      yearFormat,
     },
     ref
   ) => {
     const [listOfMonths, setListOfMonths] = useState<string[][]>([])
 
     useEffect(() => {
-      setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
+      setListOfMonths(createGroupsInArray(getMonthsNames(locale, monthFormat), 4))
     }, [])
 
     const monthDetails = getMonthDetails(
@@ -138,7 +183,6 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                     }
                   )}
                   key={index}
-                  // tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
                   {...(selectionType === 'week' && isSelected && { 'aria-selected': true })}
                   {...(selectionType === 'week' &&
                     !isDisabled && {
@@ -196,9 +240,17 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           })}
                       >
                         <div className="calendar-cell-inner">
-                          {typeof dayFormat === 'function'
-                            ? dayFormat(date)
-                            : date.toLocaleDateString(locale, { day: dayFormat })}
+                          {renderDayCell
+                            ? renderDayCell(date, {
+                                isDisabled,
+                                isInCurrentMonth: month === 'current',
+                                isInRange: isDateInRange(date, startDate, endDate),
+                                isSelected,
+                                isToday: isToday(date),
+                              })
+                            : typeof dayFormat === 'function'
+                              ? dayFormat(date)
+                              : date.toLocaleDateString(locale, { day: dayFormat })}
                         </div>
                       </td>
                     ) : (
@@ -241,13 +293,66 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           onMouseLeave: () => onCalendarMouseLeave(),
                         })}
                       >
-                        <div className="calendar-cell-inner">{month}</div>
+                        <div className="calendar-cell-inner">
+                          {renderMonthCell
+                            ? renderMonthCell(date, {
+                                isDisabled,
+                                isInRange: isMonthInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : month}
+                        </div>
                       </td>
                     )
                   })}
                 </tr>
               )
             })}
+          {view === 'quarters' && (
+            <tr>
+              {Array.from({ length: 4 }, (_, index) => {
+                const date = new Date(calendarDate.getFullYear(), index * 3, 1)
+                const isDisabled = isQuarterDisabled(date, minDate, maxDate, disabledDates)
+                const isSelected = isQuarterSelected(date, startDate, endDate)
+                return (
+                  <td
+                    className={classNames('calendar-cell quarters', {
+                      disabled: isDisabled,
+                      selected: isSelected,
+                      'range-hover':
+                        selectionType === 'quarter' &&
+                        (hoverDate && selectEndDate
+                          ? isQuarterInRange(date, startDate, hoverDate)
+                          : isQuarterInRange(date, hoverDate, endDate)),
+                      range: isQuarterInRange(date, startDate, endDate),
+                    })}
+                    key={index}
+                    tabIndex={isDisabled ? -1 : 0}
+                    {...(isSelected && { 'aria-selected': true })}
+                    {...(!isDisabled && {
+                      onBlur: () => onCalendarMouseLeave(),
+                      onClick: () => onCalendarClick(date),
+                      onFocus: () => onCalendarMouseEnter(date),
+                      onKeyDown: (event) => onCalendarKeyDown(event, date),
+                      onMouseEnter: () => onCalendarMouseEnter(date),
+                      onMouseLeave: () => onCalendarMouseLeave(),
+                    })}
+                  >
+                    <div className="calendar-cell-inner">
+                      {renderQuarterCell
+                        ? renderQuarterCell(date, {
+                            isDisabled,
+                            isInRange: isQuarterInRange(date, startDate, endDate),
+                            isSelected,
+                          })
+                        : `Q${index + 1}`}
+                    </div>
+                  </td>
+                )
+              })}
+            </tr>
+          )}
+
           {view === 'years' &&
             listOfYears.map((row, index) => {
               return (
@@ -281,7 +386,13 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                         })}
                       >
                         <div className="calendar-cell-inner">
-                          {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                          {renderYearCell
+                            ? renderYearCell(date, {
+                                isDisabled,
+                                isInRange: isYearInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : date.toLocaleDateString(locale, { year: yearFormat })}
                         </div>
                       </td>
                     )

package/src/components/calendar/types.ts

@@ -1,5 +1,5 @@
 export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
 
-export type SelectionTypes = 'day' | 'week' | 'month' | 'year'
+export type SelectionTypes = 'day' | 'week' | 'month' | 'quarter' | 'year'
 
-export type ViewTypes = 'days' | 'months' | 'years'
+export type ViewTypes = 'days' | 'months' | 'quarters' | 'years'

package/src/components/calendar/utils.ts

@@ -60,8 +60,17 @@ const getMondayOfISOWeek = (year: number, week: number): Date => {
  * @returns A number representing year*12 + month for easy comparison.
  */
 const dateToMonthNumber = (date: Date): number => {
-  // prettier-ignore
-  return (date.getFullYear() * 12) + date.getMonth()
+  return date.getFullYear() * 12 + date.getMonth()
+}
+
+/**
+ * Helper function to convert a date to a quarter number for comparison.
+ * @param date - The date to convert.
+ * @returns A number representing year*4 + quarter for easy comparison.
+ */
+const dateToQuarterNumber = (date: Date): number => {
+  const quarter = Math.floor(date.getMonth() / 3)
+  return date.getFullYear() * 4 + quarter
 }
 
 /**
@@ -122,6 +131,36 @@ const parseWeekString = (dateString: string): Date | null => {
   return convertIsoWeekToDate(dateString)
 }
 
+/**
+ * Parses a quarter string and returns a Date object for the first day of that quarter.
+ * @param dateString - The quarter string to parse.
+ * @returns The Date object for the first day of the quarter, or null if invalid.
+ */
+const parseQuarterString = (dateString: string): Date | null => {
+  const quarterPatterns = [
+    /^(\d{4})-Q(\d{1})$/, // 2023-Q1, 2023-Q4
+    /^(\d{4})Q(\d{1})$/, // 2023Q1, 2023Q4
+    /^(\d{4})\s+Q(\d{1})$/, // 2023 Q1, 2023 Q4
+  ]
+
+  for (const pattern of quarterPatterns) {
+    const match = dateString.trim().match(pattern)
+    if (match) {
+      const parsedYear = parseYearSmart(match[1])
+      const parsedQuarter = Number.parseInt(match[2], 10)
+
+      // Validate quarter (1-4)
+      if (parsedQuarter >= 1 && parsedQuarter <= 4) {
+        // Calculate the first month of the quarter (Q1=0, Q2=3, Q3=6, Q4=9)
+        const monthIndex = (parsedQuarter - 1) * 3
+        return new Date(parsedYear, monthIndex, 1)
+      }
+    }
+  }
+
+  return null
+}
+
 /**
  * Parses a month string and returns a Date object for the first day of that month.
  * @param dateString - The month string to parse.
@@ -508,6 +547,9 @@ export const convertToDateObject = (
     case 'month': {
       return parseMonthString(dateString)
     }
+    case 'quarter': {
+      return parseQuarterString(dateString)
+    }
     case 'year': {
       return parseYearString(dateString)
     }
@@ -523,7 +565,7 @@ export const convertToDateObject = (
  * @param dateString - The date string to parse.
  * @param locale - The locale to use for date format patterns.
  * @param includeTime - Whether to include time parsing.
- * @param selectionType - The selection type ('day', 'week', 'month', 'year').
+ * @param selectionType - The selection type ('day', 'week', 'month', 'quarter', 'year').
  * @returns A Date object if parsing succeeds, null if parsing fails.
  */
 export const getLocalDateFromString = (
@@ -565,7 +607,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
     return new Date(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1)
   }
 
-  if (order !== 0 && view === 'months') {
+  if (order !== 0 && (view === 'months' || view === 'quarters')) {
     return new Date(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1)
   }
 
@@ -580,7 +622,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
 /**
  * Formats a date based on the selection type.
  * @param date - The date to format.
- * @param selectionType - The type of selection ('day', 'week', 'month', 'year').
+ * @param selectionType - The type of selection ('day', 'week', 'month', 'quarter', 'year').
  * @returns A formatted date string or the original Date object.
  */
 export const getDateBySelectionType = (
@@ -601,6 +643,11 @@ export const getDateBySelectionType = (
     return `${date.getFullYear()}-${monthNumber}`
   }
 
+  if (selectionType === 'quarter') {
+    const quarter = Math.floor(date.getMonth() / 3) + 1
+    return `${date.getFullYear()}Q${quarter}`
+  }
+
   if (selectionType === 'year') {
     return `${date.getFullYear()}`
   }
@@ -650,7 +697,10 @@ export const getFirstAvailableDateInRange = (
  * @param format - The format of the month names ('short' or 'long').
  * @returns An array of month names.
  */
-export const getMonthsNames = (locale: string, format: 'short' | 'long' = 'short'): string[] => {
+export const getMonthsNames = (
+  locale: string,
+  format: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit' = 'short'
+): string[] => {
   return Array.from({ length: 12 }, (_, i) => {
     return new Date(2000, i, 1).toLocaleString(locale, { month: format })
   })
@@ -1031,6 +1081,102 @@ export const isMonthInRange = (date: Date, start: Date | null, end: Date | null)
   return Boolean(_start && _end && _start <= _date && _date <= _end)
 }
 
+/**
+ * Checks if a quarter is disabled based on the 'quarter' period type.
+ * @param date - The date representing the quarter to check.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if the quarter is disabled, false otherwise.
+ */
+export const isQuarterDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  disabledDates?: DisabledDate | DisabledDate[]
+) => {
+  const current = dateToQuarterNumber(date)
+  const _min = min ? dateToQuarterNumber(min) : null
+  const _max = max ? dateToQuarterNumber(max) : null
+
+  if (isOutsideRange(current, _min, _max)) {
+    return true
+  }
+
+  if (disabledDates === undefined) {
+    return false
+  }
+
+  // Get the start and end of the quarter
+  const quarter = Math.floor(date.getMonth() / 3)
+  const quarterStartMonth = quarter * 3
+  const quarterEndMonth = quarterStartMonth + 2
+  const year = date.getFullYear()
+
+  const quarterStart = new Date(year, quarterStartMonth, 1)
+  const quarterEnd = new Date(year, quarterEndMonth + 1, 0) // Last day of the quarter
+
+  const startTime = min ? Math.max(quarterStart.getTime(), min.getTime()) : quarterStart.getTime()
+  const endTime = max ? Math.min(quarterEnd.getTime(), max.getTime()) : quarterEnd.getTime()
+
+  for (
+    const currentDate = new Date(startTime);
+    currentDate.getTime() <= endTime;
+    currentDate.setDate(currentDate.getDate() + 1)
+  ) {
+    if (!isDateDisabled(currentDate, min, max, disabledDates)) {
+      return false
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a quarter is selected based on start and end dates.
+ * @param date - The date representing the quarter.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the quarter is selected, false otherwise.
+ */
+export const isQuarterSelected = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+  const quarter = Math.floor(date.getMonth() / 3)
+
+  if (start !== null) {
+    const startYear = start.getFullYear()
+    const startQuarter = Math.floor(start.getMonth() / 3)
+    if (year === startYear && quarter === startQuarter) {
+      return true
+    }
+  }
+
+  if (end !== null) {
+    const endYear = end.getFullYear()
+    const endQuarter = Math.floor(end.getMonth() / 3)
+    if (year === endYear && quarter === endQuarter) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a quarter is within a specified range.
+ * @param date - The date representing the quarter.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the quarter is within the range, false otherwise.
+ */
+export const isQuarterInRange = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const _start = start ? dateToQuarterNumber(start) : null
+  const _end = end ? dateToQuarterNumber(end) : null
+  const _date = dateToQuarterNumber(date)
+
+  return Boolean(_start && _end && _start <= _date && _date <= _end)
+}
+
 /**
  * Checks if two dates are the same calendar date.
  * @param date - First date.