@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/calendar/CCalendar.tsx

@@ -3,26 +3,33 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CButton } from '../button/CButton'
+
 import {
   createGroupsInArray,
   getMonthDetails,
   getMonthsNames,
   getYears,
-  isDisabled,
+  isDateDisabled,
   isDateInRange,
   isDateSelected,
+  isDisableDateInRange,
   isLastDayOfMonth,
   isSameDateAs,
   isToday,
   isStartDate,
   isEndDate,
-} from './CCalendar.utils'
+} from '../../utils/calendar'
+import { useStateWithCallback } from '../../utils/hooks'
 
 export interface CCalendarProps {
   /**
    * Default date of the component
    */
   calendarDate?: Date | string
+  /**
+   * The number of calendars that render on desktop devices.
+   */
+  calendars?: number
   /**
    * A string of all className you want applied to the component.
    */
@@ -37,21 +44,31 @@ export interface CCalendarProps {
   endDate?: Date | string | null
   /**
    * Sets the day of start week.
-   * 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday, 7 - Sunday
+   * - 0 - Sunday,
+   * - 1 - Monday,
+   * - 2 - Tuesday,
+   * - 3 - Wednesday,
+   * - 4 - Thursday,
+   * - 5 - Friday,
+   * - 6 - Saturday,
+   *
+   * @default 1
    */
   firstDayOfWeek?: number
   /**
-   * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+   * Sets the default locale for components. If not set, it is inherited from the browser.
+   *
+   * @default 'default'
    */
   locale?: string
   /**
    * Max selectable date.
    */
-  maxDate?: Date
+  maxDate?: Date | string | null
   /**
    * Min selectable date.
    */
-  minDate?: Date
+  minDate?: Date | string | null
   /**
    * Show arrows navigation.
    */
@@ -59,19 +76,19 @@ export interface CCalendarProps {
   /**
    * The custom next icon.
    */
-  nextIcon?: ReactNode
+  navNextIcon?: ReactNode
   /**
    * The custom next double icon.
    */
-  nextDoubleIcon?: ReactNode
+  navNextDoubleIcon?: ReactNode
   /**
    * The custom prev icon.
    */
-  prevIcon?: ReactNode
+  navPrevIcon?: ReactNode
   /**
    * The custom prev double icon.
    */
-  prevDoubleIcon?: ReactNode
+  navPrevDoubleIcon?: ReactNode
   /**
    * Allow range selection.
    */
@@ -85,9 +102,11 @@ export interface CCalendarProps {
    */
   startDate?: Date | string | null
   /**
-   * Set length of day name.
+   * Set length or format of day name.
+   *
+   * @default 2
    */
-  weekdayLength?: number
+  weekdayFormat?: number | 'long' | 'narrow' | 'short'
   /**
    * Callback fired when the user hovers over the calendar cell.
    */
@@ -99,47 +118,54 @@ export interface CCalendarProps {
   /**
    * Callback fired when the start date changed.
    */
-  onStartDateChange?: (date: Date | null) => void
+  onStartDateChange?: (date: Date | null, formatedDate?: string | undefined) => void
   /**
    * Callback fired when the end date changed.
    */
-  onEndDateChange?: (date: Date | null) => void
+  onEndDateChange?: (date: Date | null, formatedDate?: string | undefined) => void
+  /**
+   * Callback fired when the selection type changed.
+   */
+  onSelectEndChange?: (value: boolean) => void
+  /**
+   * Callback fired when the view type of calendar changed.
+   */
+  onViewChanged?: (view: string) => void
 }
 
 export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
   (
     {
       calendarDate,
+      calendars = 1,
+      className,
       disabledDates,
       endDate,
       firstDayOfWeek = 1,
-      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
+      locale = 'default',
       maxDate,
       minDate,
       navigation = true,
-      nextIcon,
-      nextDoubleIcon,
-      prevIcon,
-      prevDoubleIcon,
+      navNextIcon,
+      navNextDoubleIcon,
+      navPrevIcon,
+      navPrevDoubleIcon,
       range,
       selectEndDate,
       startDate,
-      weekdayLength = 2,
+      weekdayFormat = 2,
+      onCalendarCellHover,
       onCalendarDateChange,
-      onStartDateChange,
       onEndDateChange,
-      onCalendarCellHover,
+      onStartDateChange,
+      onSelectEndChange,
+      onViewChanged,
     },
     ref,
   ) => {
     const [_calendarDate, setCalendarDate] = useState<Date>(
-      calendarDate ? new Date(calendarDate) : new Date(),
+      calendarDate ? new Date(calendarDate) : startDate ? new Date(startDate) : new Date(),
     )
-    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
-    const [_endDate, setEndDate] = useState<Date | null>(endDate ? new Date(endDate) : null)
-    const [_selectEndDate, setSelectEndDate] = useState(selectEndDate)
-    const [view, setView] = useState('days')
-
     useEffect(() => {
       if (calendarDate) {
         const d = new Date(calendarDate)
@@ -147,51 +173,49 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }, [calendarDate])
 
+    const [_startDate, setStartDate] = useStateWithCallback<Date | null>(
+      startDate ? new Date(startDate) : null,
+      onStartDateChange,
+    )
     useEffect(() => {
-      if (startDate === null) {
-        setStartDate(null)
-        return
-      }
-      if (startDate) {
-        const d = new Date(startDate)
-        if (_startDate === null) {
-          setStartDate(d)
-          return
-        }
-        if (_startDate && !isSameDateAs(d, _startDate)) {
-          setStartDate(d)
-        }
+      const date = startDate ? new Date(startDate) : null
+      if (!isSameDateAs(date, _startDate)) {
+        setStartDate(date)
       }
     }, [startDate])
 
+    const [_endDate, setEndDate] = useStateWithCallback<Date | null>(
+      endDate ? new Date(endDate) : null,
+      onEndDateChange,
+    )
     useEffect(() => {
-      if (endDate === null) {
-        setEndDate(null)
-        return
-      }
-      if (endDate) {
-        const d = new Date(endDate)
-        if (_endDate === null) {
-          setEndDate(d)
-          return
-        }
-        if (_endDate && !isSameDateAs(d, _endDate)) {
-          setEndDate(d)
-        }
+      const date = endDate ? new Date(endDate) : null
+      if (!isSameDateAs(date, _endDate)) {
+        setEndDate(date)
       }
     }, [endDate])
 
+    const [_hoverDate, setHoverDate] = useState<Date | null>(null)
+
+    const [_selectEndDate, setSelectEndDate] = useStateWithCallback(
+      selectEndDate,
+      onSelectEndChange,
+    )
     useEffect(() => {
-      _startDate && onStartDateChange && onStartDateChange(_startDate)
-    }, [_startDate])
+      setSelectEndDate(selectEndDate)
+    }, [selectEndDate])
 
+    const [_maxDate, setMaxDate] = useState<Date | null>(maxDate ? new Date(maxDate) : null)
     useEffect(() => {
-      _endDate && onEndDateChange && onEndDateChange(_endDate)
-    }, [_endDate])
+      maxDate && setMaxDate(new Date(maxDate))
+    }, [maxDate])
 
+    const [_minDate, setMinDate] = useState<Date | null>(minDate ? new Date(minDate) : null)
     useEffect(() => {
-      setSelectEndDate(selectEndDate)
-    }, [selectEndDate])
+      minDate && setMinDate(new Date(minDate))
+    }, [minDate])
+
+    const [view, setView] = useStateWithCallback('days', onViewChanged)
 
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
       const year = _calendarDate.getFullYear()
@@ -200,81 +224,112 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       years && d.setFullYear(d.getFullYear() + years)
       months && d.setMonth(d.getMonth() + months)
-      setMonth && d.setMonth(setMonth)
+      typeof setMonth === 'number' && d.setMonth(setMonth)
 
       setCalendarDate(d)
       onCalendarDateChange && onCalendarDateChange(d)
     }
 
     const handleCellOnClick = (date: Date) => {
-      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
 
       if (range) {
         if (_selectEndDate) {
+          setSelectEndDate(false)
+
           if (_startDate && _startDate > date) {
-            setEndDate(_startDate)
-            setStartDate(date)
-          } else {
-            setEndDate(date)
+            setStartDate(null)
+            setEndDate(null)
+            return
           }
-          setSelectEndDate(false)
-        } else {
-          setStartDate(date)
-          setSelectEndDate(true)
+
+          if (isDisableDateInRange(_startDate, date, disabledDates)) {
+            setStartDate(null)
+            setEndDate(null)
+            return
+          }
+
+          setEndDate(date)
+          return
+        }
+
+        if (_endDate && _endDate < date) {
+          setStartDate(null)
+          setEndDate(null)
+          return
+        }
+
+        if (isDisableDateInRange(date, _endDate, disabledDates)) {
+          setStartDate(null)
+          setEndDate(null)
+          return
         }
-      } else {
+
+        setSelectEndDate(true)
         setStartDate(date)
+        return
       }
+
+      setStartDate(date)
     }
 
     const handleCellMouseEnter = (date: Date) => {
-      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
+      setHoverDate(date)
       onCalendarCellHover && onCalendarCellHover(date)
     }
 
     const handleCellMouseLeave = () => {
+      setHoverDate(null)
       onCalendarCellHover && onCalendarCellHover(null)
     }
 
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
-          setCalendarPage(view !== 'days' ? -10 : -1)
+          setCalendarPage(view === 'years' ? -10 : -1)
           return
         }
+
         if (view !== 'days') {
           setCalendarPage(-1)
           return
         }
+
         setCalendarPage(0, -1)
         return
       }
       if (direction === 'next') {
         if (double) {
-          setCalendarPage(view !== 'days' ? 10 : 1)
+          setCalendarPage(view === 'years' ? 10 : 1)
           return
         }
+
         if (view !== 'days') {
           setCalendarPage(1)
           return
         }
+
         setCalendarPage(0, 1)
         return
       }
     }
 
-    const Calendar = () => {
-      const monthDetails = getMonthDetails(
-        _calendarDate.getFullYear(),
-        _calendarDate.getMonth(),
-        firstDayOfWeek,
-      )
+    const Calendar = (props: { addMonths: number }) => {
+      const { addMonths } = props
+      let date = _calendarDate
+
+      if (addMonths !== 0) {
+        date = new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + addMonths, 1)
+      }
+
+      const monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), firstDayOfWeek)
       const listOfMonths = createGroupsInArray(getMonthsNames(locale), 4)
-      const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4)
+      const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
       const weekDays = monthDetails[0]
       return (
         <table>
@@ -284,14 +339,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 {weekDays.map(({ date }: { date: Date }, idx: number) => (
                   <th key={idx} className="calendar-cell">
                     <div className="calendar-header-cell-inner">
-                      {date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayLength)}
+                      {typeof weekdayFormat === 'string'
+                        ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                        : date
+                            .toLocaleDateString(locale, { weekday: 'long' })
+                            .slice(0, weekdayFormat)}
                     </div>
                   </th>
                 ))}
               </tr>
             </thead>
           )}
-          <tbody onMouseLeave={() => handleCellMouseLeave()}>
+          <tbody>
             {view === 'days' &&
               monthDetails.map((week, index) => {
                 return (
@@ -299,11 +358,15 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                     {week.map(({ date, month }: { date: Date; month: string }, idx: number) => (
                       <td
                         className={classNames('calendar-cell', {
-                          today: isToday(date),
-                          disabled: isDisabled(date, minDate, maxDate, disabledDates),
-                          next: month === 'next',
-                          previous: month === 'previous',
+                          today: month === 'current' && isToday(date),
+                          disabled: isDateDisabled(date, _minDate, _maxDate, disabledDates),
+                          [month]: true,
                           last: isLastDayOfMonth(date),
+                          'range-hover':
+                            month === 'current' &&
+                            (_hoverDate && _selectEndDate
+                              ? isDateInRange(date, _startDate, _hoverDate)
+                              : isDateInRange(date, _hoverDate, _endDate)),
                           range: month === 'current' && isDateInRange(date, _startDate, _endDate),
                           selected: isDateSelected(date, _startDate, _endDate),
                           start: isStartDate(date, _startDate, _endDate),
@@ -311,8 +374,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                         })}
                         key={idx}
                         title={date.toLocaleDateString(locale)}
-                        onClick={() => handleCellOnClick(date)}
-                        onMouseEnter={() => handleCellMouseEnter(date)}
+                        {...(month === 'current' && {
+                          onClick: () => handleCellOnClick(date),
+                          onMouseEnter: () => handleCellMouseEnter(date),
+                          onMouseLeave: () => handleCellMouseLeave(),
+                        })}
+                        {...(month !== 'current' && {
+                          onMouseEnter: () => handleCellMouseLeave(),
+                        })}
                       >
                         <div className="calendar-cell-inner">
                           {date.toLocaleDateString(locale, { day: 'numeric' })}
@@ -332,7 +401,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                           key={idx}
                           className="calendar-cell month"
                           onClick={() => {
-                            setCalendarPage(0, 0, index * 3 + idx)
+                            setCalendarPage(0, 0, index * 3 + idx - addMonths)
                             setView('days')
                           }}
                         >
@@ -354,7 +423,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                           className="calendar-cell year"
                           onClick={() => {
                             setCalendarDate(
-                              new Date(year, _calendarDate.getMonth(), _calendarDate.getDate()),
+                              new Date(year, date.getMonth() - addMonths, date.getDate()),
                             )
                             setView('months')
                           }}
@@ -373,7 +442,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       )
     }
 
-    const Navigation = () => {
+    const Navigation = (props: { addMonths: number }) => {
+      const { addMonths } = props
+      let date = _calendarDate
+
+      if (addMonths !== 0) {
+        date = new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + addMonths, 1)
+      }
+
       return (
         <div className="calendar-nav">
           {navigation && (
@@ -383,23 +459,25 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 size="sm"
                 onClick={() => handleNavigationOnClick('prev', true)}
               >
-                {prevDoubleIcon ? (
-                  prevDoubleIcon
+                {navPrevDoubleIcon ? (
+                  navPrevDoubleIcon
                 ) : (
                   <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
                 )}
               </CButton>
-              <CButton
-                color="transparent"
-                size="sm"
-                onClick={() => handleNavigationOnClick('prev')}
-              >
-                {prevIcon ? (
-                  prevIcon
-                ) : (
-                  <span className="calendar-nav-icon calendar-nav-icon-prev" />
-                )}
-              </CButton>
+              {view === 'days' && (
+                <CButton
+                  color="transparent"
+                  size="sm"
+                  onClick={() => handleNavigationOnClick('prev')}
+                >
+                  {navPrevIcon ? (
+                    navPrevIcon
+                  ) : (
+                    <span className="calendar-nav-icon calendar-nav-icon-prev" />
+                  )}
+                </CButton>
+              )}
             </div>
           )}
           <div className="calendar-nav-date">
@@ -409,33 +487,35 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 size="sm"
                 onClick={() => navigation && setView('months')}
               >
-                {_calendarDate.toLocaleDateString(locale, { month: 'long' })}
+                {date.toLocaleDateString(locale, { month: 'long' })}
               </CButton>
             )}
             <CButton color="transparent" size="sm" onClick={() => navigation && setView('years')}>
-              {_calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
+              {date.toLocaleDateString(locale, { year: 'numeric' })}
             </CButton>
           </div>
           {navigation && (
             <div className="calendar-nav-next">
-              <CButton
-                color="transparent"
-                size="sm"
-                onClick={() => handleNavigationOnClick('next')}
-              >
-                {nextIcon ? (
-                  nextIcon
-                ) : (
-                  <span className="calendar-nav-icon calendar-nav-icon-next" />
-                )}
-              </CButton>
+              {view === 'days' && (
+                <CButton
+                  color="transparent"
+                  size="sm"
+                  onClick={() => handleNavigationOnClick('next')}
+                >
+                  {navNextIcon ? (
+                    navNextIcon
+                  ) : (
+                    <span className="calendar-nav-icon calendar-nav-icon-next" />
+                  )}
+                </CButton>
+              )}
               <CButton
                 color="transparent"
                 size="sm"
                 onClick={() => handleNavigationOnClick('next', true)}
               >
-                {nextDoubleIcon ? (
-                  nextDoubleIcon
+                {navNextDoubleIcon ? (
+                  navNextDoubleIcon
                 ) : (
                   <span className="calendar-nav-icon calendar-nav-icon-double-next" />
                 )}
@@ -447,9 +527,13 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }
 
     return (
-      <div className="calendar" ref={ref}>
-        <Navigation />
-        <Calendar />
+      <div className={classNames('calendars', className)}>
+        {Array.from({ length: calendars }, (_, index) => (
+          <div className={classNames('calendar', view)} key={index} ref={ref}>
+            {Navigation({ addMonths: index })}
+            {Calendar({ addMonths: index })}
+          </div>
+        ))}
       </div>
     )
   },
@@ -458,25 +542,31 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 CCalendar.propTypes = {
   className: PropTypes.string,
   calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  calendars: PropTypes.number,
   disabledDates: PropTypes.array,
   endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   firstDayOfWeek: PropTypes.number,
   locale: PropTypes.string,
-  maxDate: PropTypes.instanceOf(Date),
-  minDate: PropTypes.instanceOf(Date),
+  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   navigation: PropTypes.bool,
-  nextIcon: PropTypes.node,
-  nextDoubleIcon: PropTypes.node,
-  prevIcon: PropTypes.node,
-  prevDoubleIcon: PropTypes.node,
+  navNextIcon: PropTypes.node,
+  navNextDoubleIcon: PropTypes.node,
+  navPrevIcon: PropTypes.node,
+  navPrevDoubleIcon: PropTypes.node,
   range: PropTypes.bool,
   selectEndDate: PropTypes.bool,
   startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  weekdayLength: PropTypes.number,
+  weekdayFormat: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf<'long' | 'narrow' | 'short'>(['long', 'narrow', 'short']),
+  ]),
   onCalendarCellHover: PropTypes.func,
   onCalendarDateChange: PropTypes.func,
-  onStartDateChange: PropTypes.func,
   onEndDateChange: PropTypes.func,
+  onSelectEndChange: PropTypes.func,
+  onStartDateChange: PropTypes.func,
+  onViewChanged: PropTypes.func,
 }
 
 CCalendar.displayName = 'CCalendar'

package/src/components/calendar/__tests__/CCalendar.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CCalendar } from '../CCalendar'
+
+test('loads and displays CCalendar component', async () => {
+  const { container } = render(<CCalendar />)
+  expect(container).toMatchSnapshot()
+})