@coreui/react-pro 4.8.0 → 4.9.0-next.1

package/src/components/calendar/CCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -18,8 +18,9 @@ import {
   isToday,
   isStartDate,
   isEndDate,
-} from '../../utils/calendar'
-import { useStateWithCallback } from '../../utils/hooks'
+} from './utils'
+
+import { useStateWithCallback } from '../../hooks'
 
 export interface CCalendarProps {
   /**
@@ -146,15 +147,299 @@ export interface CCalendarProps {
   onViewChanged?: (view: string) => void
 }
 
+const Calendar = (props: {
+  addMonths: number
+  calendarDate: Date
+  dayFormat?: 'numeric' | '2-digit' | ((date: Date) => string | number)
+  disabledDates?: Date[] | Date[][] | (Date | Date[])[]
+  endDate: Date | null
+  firstDayOfWeek: number
+  hoverDate: Date | null
+  locale: string
+  maxDate: Date | null
+  minDate: Date | null
+  onCellClick: (date: Date) => void
+  onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onCellMouseEnter: (date: Date) => void
+  onCellMouseLeave: () => void
+  onMonthClick: (month: number, view: string) => void
+  onYearClick: (date: Date, view: string) => void
+  selectEndDate: boolean | undefined
+  startDate: Date | null
+  view: string
+  weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
+}) => {
+  const {
+    addMonths,
+    calendarDate,
+    dayFormat,
+    disabledDates,
+    endDate,
+    firstDayOfWeek,
+    hoverDate,
+    locale,
+    maxDate,
+    minDate,
+    onCellClick,
+    onCellKeyDown,
+    onCellMouseEnter,
+    onCellMouseLeave,
+    onMonthClick,
+    onYearClick,
+    selectEndDate,
+    startDate,
+    view,
+    weekdayFormat,
+  } = props
+  const [date, setDate] = useState<Date>(calendarDate)
+  const [listOfMonths, setListOfMonths] = useState<string[][]>([])
+
+  useEffect(() => {
+    if (addMonths !== 0) {
+      setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1))
+      return
+    }
+
+    setDate(calendarDate)
+  }, [calendarDate])
+
+  useEffect(() => {
+    setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
+  }, [])
+
+  const monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), firstDayOfWeek)
+  const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
+  const weekDays = monthDetails[0]
+
+  return (
+    <table>
+      {view === 'days' && (
+        <thead>
+          <tr>
+            {weekDays.map(({ date }: { date: Date }, idx: number) => (
+              <th key={idx} className="calendar-cell">
+                <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) => {
+            return (
+              <tr key={index}>
+                {week.map(({ date, month }: { date: Date; month: string }, idx: number) => (
+                  <td
+                    className={classNames('calendar-cell', {
+                      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),
+                      end: isEndDate(date, startDate, endDate),
+                    })}
+                    key={idx}
+                    tabIndex={0}
+                    title={date.toLocaleDateString(locale)}
+                    {...(month === 'current' && {
+                      onBlur: () => onCellMouseLeave(),
+                      onClick: () => onCellClick(date),
+                      onFocus: () => onCellMouseEnter(date),
+                      onKeyDown: (event) => onCellKeyDown(event, date),
+                      onMouseEnter: () => onCellMouseEnter(date),
+                      onMouseLeave: () => onCellMouseLeave(),
+                    })}
+                    {...(month !== 'current' && {
+                      onMouseEnter: () => onCellMouseLeave(),
+                    })}
+                  >
+                    <div className="calendar-cell-inner">
+                      {typeof dayFormat === 'function'
+                        ? dayFormat(date)
+                        : date.toLocaleDateString(locale, { day: dayFormat })}
+                    </div>
+                  </td>
+                ))}
+              </tr>
+            )
+          })}
+        {view === 'months' &&
+          listOfMonths.map((row, index) => {
+            return (
+              <tr key={index}>
+                {row.map((month, idx) => {
+                  return (
+                    <td
+                      key={idx}
+                      className="calendar-cell month"
+                      onClick={() => onMonthClick(index * 3 + idx - addMonths, 'days')}
+                    >
+                      <div className="calendar-cell-inner">{month}</div>
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+        {view === 'years' &&
+          listOfYears.map((row, index) => {
+            return (
+              <tr key={index}>
+                {row.map((year, idx) => {
+                  return (
+                    <td
+                      key={idx}
+                      className="calendar-cell year"
+                      onClick={() =>
+                        onYearClick(
+                          new Date(year, date.getMonth() - addMonths, date.getDate()),
+                          'months',
+                        )
+                      }
+                    >
+                      <div className="calendar-cell-inner">
+                        {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                      </div>
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+      </tbody>
+    </table>
+  )
+}
+
+const Navigation = (props: {
+  addMonths: number
+  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: string
+}) => {
+  const {
+    addMonths,
+    calendarDate,
+    locale,
+    navigation,
+    navNextDoubleIcon,
+    navNextIcon,
+    navPrevDoubleIcon,
+    navPrevIcon,
+    navYearFirst,
+    onMonthClick,
+    onNavigationClick,
+    onYearClick,
+    view,
+  } = props
+
+  const [date, setDate] = useState<Date | null>()
+  useEffect(() => {
+    if (addMonths !== 0) {
+      setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1))
+      return
+    }
+
+    setDate(calendarDate)
+  }, [calendarDate])
+
+  return (
+    <div className="calendar-nav">
+      {navigation && (
+        <div className="calendar-nav-prev">
+          <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev', true)}>
+            {navPrevDoubleIcon ? (
+              navPrevDoubleIcon
+            ) : (
+              <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
+            )}
+          </CButton>
+          {view === 'days' && (
+            <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev')}>
+              {navPrevIcon ? (
+                navPrevIcon
+              ) : (
+                <span className="calendar-nav-icon calendar-nav-icon-prev" />
+              )}
+            </CButton>
+          )}
+        </div>
+      )}
+      <div
+        className="calendar-nav-date"
+        {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
+      >
+        {view === 'days' && (
+          <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
+            {date && date.toLocaleDateString(locale, { month: 'long' })}
+          </CButton>
+        )}
+        <CButton
+          color="transparent"
+          size="sm"
+          onClick={() => navigation && onYearClick()}
+          {...(navYearFirst && { style: { order: '-1' } })}
+        >
+          {date && date.toLocaleDateString(locale, { year: 'numeric' })}
+        </CButton>
+      </div>
+      {navigation && (
+        <div className="calendar-nav-next">
+          {view === 'days' && (
+            <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next')}>
+              {navNextIcon ? (
+                navNextIcon
+              ) : (
+                <span className="calendar-nav-icon calendar-nav-icon-next" />
+              )}
+            </CButton>
+          )}
+          <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next', true)}>
+            {navNextDoubleIcon ? (
+              navNextDoubleIcon
+            ) : (
+              <span className="calendar-nav-icon calendar-nav-icon-double-next" />
+            )}
+          </CButton>
+        </div>
+      )}
+    </div>
+  )
+}
+
 export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
   (
     {
-      calendarDate,
+      startDate,
+      endDate,
+      calendarDate = startDate || endDate || null,
       calendars = 1,
       className,
       dayFormat = 'numeric',
       disabledDates,
-      endDate,
       firstDayOfWeek = 1,
       locale = 'default',
       maxDate,
@@ -167,7 +452,6 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       navYearFirst,
       range,
       selectEndDate,
-      startDate,
       weekdayFormat = 2,
       onCalendarCellHover,
       onCalendarDateChange,
@@ -179,13 +463,17 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     ref,
   ) => {
     const isInitialMount = useRef(true)
-    const [_calendarDate, setCalendarDate] = useState<Date>(
-      calendarDate ? new Date(calendarDate) : startDate ? new Date(startDate) : new Date(),
-    )
+    const [_calendarDate, setCalendarDate] = useState<Date | null>(null)
+
     useEffect(() => {
+      if (calendarDate === null) {
+        setCalendarDate(new Date())
+        return
+      }
+
       if (calendarDate) {
-        const d = new Date(calendarDate)
-        !isSameDateAs(_calendarDate, d) && setCalendarDate(d)
+        const date = new Date(calendarDate)
+        !isSameDateAs(_calendarDate, date) && setCalendarDate(date)
       }
     }, [calendarDate])
 
@@ -247,6 +535,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }, [])
 
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
+      if (_calendarDate === null) {
+        return
+      }
+
       const year = _calendarDate.getFullYear()
       const month = _calendarDate.getMonth()
       const d = new Date(year, month, 1)
@@ -356,237 +648,56 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
-    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(date.getFullYear()), 4)
-      const weekDays = monthDetails[0]
-      return (
-        <table>
-          {view === 'days' && (
-            <thead>
-              <tr>
-                {weekDays.map(({ date }: { date: Date }, idx: number) => (
-                  <th key={idx} className="calendar-cell">
-                    <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) => {
-                return (
-                  <tr key={index}>
-                    {week.map(({ date, month }: { date: Date; month: string }, idx: number) => (
-                      <td
-                        className={classNames('calendar-cell', {
-                          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),
-                          end: isEndDate(date, _startDate, _endDate),
-                        })}
-                        key={idx}
-                        tabIndex={0}
-                        title={date.toLocaleDateString(locale)}
-                        {...(month === 'current' && {
-                          onBlur: () => handleCellMouseLeave(),
-                          onClick: () => handleCellOnClick(date),
-                          onFocus: () => handleCellMouseEnter(date),
-                          onKeyDown: (event) => handleCellKeyDown(event, date),
-                          onMouseEnter: () => handleCellMouseEnter(date),
-                          onMouseLeave: () => handleCellMouseLeave(),
-                        })}
-                        {...(month !== 'current' && {
-                          onMouseEnter: () => handleCellMouseLeave(),
-                        })}
-                      >
-                        <div className="calendar-cell-inner">
-                          {typeof dayFormat === 'function'
-                            ? dayFormat(date)
-                            : date.toLocaleDateString(locale, { day: dayFormat })}
-                        </div>
-                      </td>
-                    ))}
-                  </tr>
-                )
-              })}
-            {view === 'months' &&
-              listOfMonths.map((row, index) => {
-                return (
-                  <tr key={index}>
-                    {row.map((month, idx) => {
-                      return (
-                        <td
-                          key={idx}
-                          className="calendar-cell month"
-                          onClick={() => {
-                            setCalendarPage(0, 0, index * 3 + idx - addMonths)
-                            setView('days')
-                          }}
-                        >
-                          <div className="calendar-cell-inner">{month}</div>
-                        </td>
-                      )
-                    })}
-                  </tr>
-                )
-              })}
-            {view === 'years' &&
-              listOfYears.map((row, index) => {
-                return (
-                  <tr key={index}>
-                    {row.map((year, idx) => {
-                      return (
-                        <td
-                          key={idx}
-                          className="calendar-cell year"
-                          onClick={() => {
-                            setCalendarDate(
-                              new Date(year, date.getMonth() - addMonths, date.getDate()),
-                            )
-                            setView('months')
-                          }}
-                        >
-                          <div className="calendar-cell-inner">
-                            {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
-                          </div>
-                        </td>
-                      )
-                    })}
-                  </tr>
-                )
-              })}
-          </tbody>
-        </table>
-      )
-    }
-
-    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 && (
-            <div className="calendar-nav-prev">
-              <CButton
-                color="transparent"
-                size="sm"
-                onClick={() => handleNavigationOnClick('prev', true)}
-              >
-                {navPrevDoubleIcon ? (
-                  navPrevDoubleIcon
-                ) : (
-                  <span className="calendar-nav-icon calendar-nav-icon-double-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"
-            {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
-          >
-            {view === 'days' && (
-              <CButton
-                color="transparent"
-                size="sm"
-                onClick={() => navigation && setView('months')}
-              >
-                {date.toLocaleDateString(locale, { month: 'long' })}
-              </CButton>
-            )}
-            <CButton
-              color="transparent"
-              size="sm"
-              onClick={() => navigation && setView('years')}
-              {...(navYearFirst && { style: { order: '-1' } })}
-            >
-              {date.toLocaleDateString(locale, { year: 'numeric' })}
-            </CButton>
-          </div>
-          {navigation && (
-            <div className="calendar-nav-next">
-              {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)}
-              >
-                {navNextDoubleIcon ? (
-                  navNextDoubleIcon
-                ) : (
-                  <span className="calendar-nav-icon calendar-nav-icon-double-next" />
-                )}
-              </CButton>
-            </div>
-          )}
-        </div>
-      )
-    }
-
     return (
       <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>
-        ))}
+        {_calendarDate &&
+          Array.from({ length: calendars }, (_, index) => (
+            <div className={classNames('calendar', view)} key={index} ref={ref}>
+              <Navigation
+                addMonths={index}
+                calendarDate={_calendarDate}
+                locale={locale}
+                navigation={navigation}
+                navNextDoubleIcon={navNextDoubleIcon}
+                navNextIcon={navNextIcon}
+                navPrevDoubleIcon={navPrevDoubleIcon}
+                navPrevIcon={navPrevIcon}
+                navYearFirst={navYearFirst}
+                onMonthClick={() => setView('months')}
+                onNavigationClick={handleNavigationOnClick}
+                onYearClick={() => setView('years')}
+                view={view}
+              />
+              <Calendar
+                addMonths={index}
+                calendarDate={_calendarDate}
+                dayFormat={dayFormat}
+                disabledDates={disabledDates}
+                endDate={_endDate}
+                firstDayOfWeek={firstDayOfWeek}
+                hoverDate={_hoverDate}
+                locale={locale}
+                maxDate={_maxDate}
+                minDate={_minDate}
+                onCellClick={handleCellOnClick}
+                onCellKeyDown={handleCellKeyDown}
+                onCellMouseEnter={handleCellMouseEnter}
+                onCellMouseLeave={handleCellMouseLeave}
+                onMonthClick={(month, view) => {
+                  setCalendarPage(0, 0, month)
+                  setView(view)
+                }}
+                onYearClick={(date, view) => {
+                  setCalendarDate(date)
+                  setView(view)
+                }}
+                selectEndDate={_selectEndDate}
+                startDate={_startDate}
+                view={view}
+                weekdayFormat={weekdayFormat}
+              />
+            </div>
+          ))}
       </div>
     )
   },

package/src/components/calendar/index.ts

@@ -0,0 +1,3 @@
+import { CCalendar } from './CCalendar'
+
+export { CCalendar }