@coreui/react-pro 5.9.2 → 5.11.0

package/src/components/calendar/CCalendarNavigation.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef, ReactNode } from 'react'
+import { CButton } from '../button/CButton'
+import type { ViewTypes } from './types'
+
+export interface CCalendarNavigationProps {
+  ariaNavNextMonthLabel?: string
+  ariaNavNextYearLabel?: string
+  ariaNavPrevMonthLabel?: string
+  ariaNavPrevYearLabel?: string
+  calendarDate?: Date
+  locale?: string
+  navigation?: boolean
+  navNextDoubleIcon?: ReactNode
+  navNextIcon?: ReactNode
+  navPrevDoubleIcon?: ReactNode
+  navPrevIcon?: ReactNode
+  navYearFirst?: boolean | undefined
+  onMonthClick: () => void
+  onNavigationClick: (direction: string, double?: boolean) => void
+  onYearClick: () => void
+  view: ViewTypes
+}
+
+export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigationProps>(
+  (
+    {
+      ariaNavNextMonthLabel,
+      ariaNavNextYearLabel,
+      ariaNavPrevMonthLabel,
+      ariaNavPrevYearLabel,
+      calendarDate,
+      locale,
+      navigation,
+      navNextDoubleIcon,
+      navNextIcon,
+      navPrevDoubleIcon,
+      navPrevIcon,
+      navYearFirst,
+      onMonthClick,
+      onNavigationClick,
+      onYearClick,
+      view,
+    },
+    ref,
+  ) => {
+    return (
+      <div className="calendar-nav" ref={ref}>
+        {navigation && (
+          <div className="calendar-nav-prev">
+            <CButton
+              color="transparent"
+              size="sm"
+              aria-label={ariaNavPrevYearLabel}
+              onClick={() => onNavigationClick('prev', true)}
+            >
+              {navPrevDoubleIcon ?? (
+                <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
+              )}
+            </CButton>
+            {view === 'days' && (
+              <CButton
+                color="transparent"
+                size="sm"
+                aria-label={ariaNavPrevMonthLabel}
+                onClick={() => onNavigationClick('prev')}
+              >
+                {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
+              </CButton>
+            )}
+          </div>
+        )}
+        <div
+          className="calendar-nav-date"
+          aria-live="polite"
+          {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
+        >
+          {view === 'days' && (
+            <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
+              {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
+            </CButton>
+          )}
+          <CButton
+            color="transparent"
+            size="sm"
+            onClick={() => navigation && onYearClick()}
+            {...(navYearFirst && { style: { order: '-1' } })}
+          >
+            {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
+          </CButton>
+        </div>
+        {navigation && (
+          <div className="calendar-nav-next">
+            {view === 'days' && (
+              <CButton
+                color="transparent"
+                size="sm"
+                aria-label={ariaNavNextMonthLabel}
+                onClick={() => onNavigationClick('next')}
+              >
+                {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
+              </CButton>
+            )}
+            <CButton
+              color="transparent"
+              size="sm"
+              aria-label={ariaNavNextYearLabel}
+              onClick={() => onNavigationClick('next', true)}
+            >
+              {navNextDoubleIcon ?? (
+                <span className="calendar-nav-icon calendar-nav-icon-double-next" />
+              )}
+            </CButton>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+CCalendarNavigation.displayName = 'CCalendarNavigation'

package/src/components/calendar/CCalendarPanel.tsx

@@ -0,0 +1,306 @@
+import React, { forwardRef, KeyboardEvent, useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import {
+  convertToDateObject,
+  createGroupsInArray,
+  getMonthDetails,
+  getMonthsNames,
+  getYears,
+  isDateDisabled,
+  isDateInRange,
+  isDateSelected,
+  isMonthDisabled,
+  isMonthInRange,
+  isMonthSelected,
+  isToday,
+  isYearDisabled,
+  isYearInRange,
+  isYearSelected,
+} from './utils'
+import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
+
+export interface CCalendarPanelProps {
+  calendarDate: Date
+  dayFormat?: 'numeric' | '2-digit' | ((date: Date) => string | number)
+  disabledDates?: DisabledDate | DisabledDate[]
+  endDate: Date | null
+  firstDayOfWeek: number
+  hoverDate: Date | null
+  locale: string
+  maxDate: Date | null
+  minDate: Date | null
+  onCalendarClick: (date: Date) => void
+  onCalendarKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onCalendarMouseEnter: (date: Date) => void
+  onCalendarMouseLeave: () => void
+  order: number
+  selectAdjacementDays: boolean
+  selectEndDate: boolean | undefined
+  selectionType: SelectionTypes
+  showAdjacementDays: boolean
+  showWeekNumber: boolean
+  startDate: Date | null
+  view: ViewTypes
+  weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
+  weekNumbersLabel: string | undefined
+}
+
+export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
+  (
+    {
+      calendarDate,
+      dayFormat,
+      disabledDates,
+      endDate,
+      firstDayOfWeek,
+      hoverDate,
+      locale,
+      maxDate,
+      minDate,
+      onCalendarClick,
+      onCalendarKeyDown,
+      onCalendarMouseEnter,
+      onCalendarMouseLeave,
+      selectAdjacementDays,
+      selectEndDate,
+      selectionType,
+      showWeekNumber,
+      showAdjacementDays,
+      startDate,
+      view,
+      weekdayFormat,
+      weekNumbersLabel,
+    },
+    ref,
+  ) => {
+    const [listOfMonths, setListOfMonths] = useState<string[][]>([])
+
+    useEffect(() => {
+      setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
+    }, [])
+
+    const monthDetails = getMonthDetails(
+      calendarDate.getFullYear(),
+      calendarDate.getMonth(),
+      firstDayOfWeek,
+    )
+    const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4)
+    const weekDays = monthDetails[0].days
+
+    return (
+      <table ref={ref}>
+        {view === 'days' && (
+          <thead>
+            <tr>
+              {showWeekNumber && (
+                <th className="calendar-cell">
+                  <div className="calendar-header-cell-inner">{weekNumbersLabel}</div>
+                </th>
+              )}
+              {weekDays.map(({ date }: { date: Date }, idx: number) => (
+                <th
+                  className="calendar-cell"
+                  abbr={date.toLocaleDateString(locale, { weekday: 'long' })}
+                  key={idx}
+                >
+                  <div className="calendar-header-cell-inner">
+                    {typeof weekdayFormat === 'function'
+                      ? weekdayFormat(date)
+                      : typeof weekdayFormat === 'string'
+                        ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                        : date
+                            .toLocaleDateString(locale, { weekday: 'long' })
+                            .slice(0, weekdayFormat)}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {view === 'days' &&
+            monthDetails.map((week, index) => {
+              const date = convertToDateObject(
+                week.weekNumber === 0
+                  ? `${calendarDate.getFullYear()}W53`
+                  : `${calendarDate.getFullYear()}W${week.weekNumber}`,
+                selectionType,
+              )
+              const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+              const isSelected = isDateSelected(date, startDate, endDate)
+              const current = week.days.some((day) => day.month === 'current')
+              return (
+                <tr
+                  className={classNames('calendar-row', {
+                    disabled: isDisabled,
+                    range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
+                    'range-hover':
+                      selectionType === 'week' && hoverDate && selectEndDate
+                        ? isDateInRange(date, startDate, hoverDate)
+                        : isDateInRange(date, hoverDate, endDate),
+                    selected: isSelected,
+                  })}
+                  key={index}
+                  tabIndex={selectionType === 'week' && current && !isDisabled ? 0 : -1}
+                  {...(isSelected && { 'aria-selected': true })}
+                  {...(selectionType === 'week' &&
+                    !isDisabled && {
+                      onBlur: () => onCalendarMouseLeave(),
+                      onClick: () => onCalendarClick(date),
+                      onFocus: () => onCalendarMouseEnter(date),
+                      onKeyDown: (event) => onCalendarKeyDown(event, date),
+                      onMouseEnter: () => onCalendarMouseEnter(date),
+                      onMouseLeave: () => onCalendarMouseLeave(),
+                    })}
+                >
+                  {showWeekNumber && (
+                    <th className="calendar-cell-week-number">
+                      {week.weekNumber === 0 ? 53 : week.weekNumber}
+                    </th>
+                  )}
+                  {week.days.map(({ date, month }: { date: Date; month: string }, idx: number) => {
+                    const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+                    const isSelected = isDateSelected(date, startDate, endDate)
+                    return month === 'current' || showAdjacementDays ? (
+                      <td
+                        className={classNames('calendar-cell', {
+                          ...(selectionType === 'day' && {
+                            clickable: month !== 'current' && selectAdjacementDays,
+                            disabled: isDisabled,
+                            'range-hover':
+                              month === 'current' &&
+                              (hoverDate && selectEndDate
+                                ? isDateInRange(date, startDate, hoverDate)
+                                : isDateInRange(date, hoverDate, endDate)),
+                            range: month === 'current' && isDateInRange(date, startDate, endDate),
+                            selected: isSelected,
+                          }),
+                          [month]: true,
+                          today: month === 'current' && isToday(date),
+                        })}
+                        key={idx}
+                        tabIndex={
+                          selectionType === 'day' &&
+                          (month === 'current' || selectAdjacementDays) &&
+                          !isDisabled
+                            ? 0
+                            : -1
+                        }
+                        title={date.toLocaleDateString(locale)}
+                        {...(isSelected && { 'aria-selected': true })}
+                        {...(selectionType === 'day' &&
+                          (month === 'current' || selectAdjacementDays) && {
+                            onBlur: () => onCalendarMouseLeave(),
+                            onClick: () => onCalendarClick(date),
+                            onFocus: () => onCalendarMouseEnter(date),
+                            onKeyDown: (event) => onCalendarKeyDown(event, date),
+                            onMouseEnter: () => onCalendarMouseEnter(date),
+                            onMouseLeave: () => onCalendarMouseLeave(),
+                          })}
+                        {...(month !== 'current' &&
+                          !selectAdjacementDays && {
+                            onMouseEnter: () => onCalendarMouseLeave(),
+                          })}
+                      >
+                        <div className="calendar-cell-inner">
+                          {typeof dayFormat === 'function'
+                            ? dayFormat(date)
+                            : date.toLocaleDateString(locale, { day: dayFormat })}
+                        </div>
+                      </td>
+                    ) : (
+                      <td key={idx}></td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+          {view === 'months' &&
+            listOfMonths.map((row, index) => {
+              return (
+                <tr key={index}>
+                  {row.map((month, idx) => {
+                    const monthNumber = index * 3 + idx
+                    const date = new Date(calendarDate.getFullYear(), monthNumber, 1)
+                    const isDisabled = isMonthDisabled(date, minDate, maxDate, disabledDates)
+                    const isSelected = isMonthSelected(date, startDate, endDate)
+                    return (
+                      <td
+                        className={classNames('calendar-cell', {
+                          disabled: isDisabled,
+                          selected: isSelected,
+                          'range-hover':
+                            selectionType === 'month' &&
+                            (hoverDate && selectEndDate
+                              ? isMonthInRange(date, startDate, hoverDate)
+                              : isMonthInRange(date, hoverDate, endDate)),
+                          range: isMonthInRange(date, startDate, endDate),
+                        })}
+                        key={idx}
+                        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">{month}</div>
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+          {view === 'years' &&
+            listOfYears.map((row, index) => {
+              return (
+                <tr key={index}>
+                  {row.map((year, idx) => {
+                    const date = new Date(year, 0, 1)
+                    const isDisabled = isYearDisabled(date, minDate, maxDate, disabledDates)
+                    const isSelected = isYearSelected(date, startDate, endDate)
+                    return (
+                      <td
+                        className={classNames('calendar-cell year', {
+                          disabled: isDisabled,
+                          selected: isSelected,
+                          'range-hover':
+                            selectionType === 'year' &&
+                            (hoverDate && selectEndDate
+                              ? isYearInRange(date, startDate, hoverDate)
+                              : isYearInRange(date, hoverDate, endDate)),
+                          range: isYearInRange(date, startDate, endDate),
+                        })}
+                        key={idx}
+                        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">
+                          {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                        </div>
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+        </tbody>
+      </table>
+    )
+  },
+)
+
+CCalendarPanel.displayName = 'CCalendarPanel'

package/src/components/calendar/types.ts

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