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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.2",
+  "version": "4.2.0-beta.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,26 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@coreui/icons-pro": "^2.0.3",
+    "@coreui/icons-react": "^2.0.0",
+    "@popperjs/core": "^2.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "prop-types": "^15.8.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.62.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/accordion/CAccordionButton.tsx

@@ -19,10 +19,11 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
 
     return (
       <button
+        type="button"
         className={_className}
-        {...rest}
         aria-expanded={!visible}
         onClick={() => setVisible(!visible)}
+        {...rest}
         ref={ref}
       >
         {children}

package/src/components/calendar/CCalendar.tsx

@@ -0,0 +1,482 @@
+import React, { forwardRef, ReactNode, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CButton } from '../button/CButton'
+import {
+  createGroupsInArray,
+  getMonthDetails,
+  getMonthsNames,
+  getYears,
+  isDisabled,
+  isDateInRange,
+  isDateSelected,
+  isLastDayOfMonth,
+  isSameDateAs,
+  isToday,
+  isStartDate,
+  isEndDate,
+} from './CCalendar.utils'
+
+export interface CCalendarProps {
+  /**
+   * Default date of the component
+   */
+  calendarDate?: Date | string
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Specify the list of dates that cannot be selected.
+   */
+  disabledDates?: Date[] | Date[][]
+  /**
+   * Initial selected to date (range).
+   */
+  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
+   */
+  firstDayOfWeek?: number
+  /**
+   * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+   */
+  locale?: string
+  /**
+   * Max selectable date.
+   */
+  maxDate?: Date
+  /**
+   * Min selectable date.
+   */
+  minDate?: Date
+  /**
+   * Show arrows navigation.
+   */
+  navigation?: boolean
+  /**
+   * The custom next icon.
+   */
+  nextIcon?: ReactNode
+  /**
+   * The custom next double icon.
+   */
+  nextDoubleIcon?: ReactNode
+  /**
+   * The custom prev icon.
+   */
+  prevIcon?: ReactNode
+  /**
+   * The custom prev double icon.
+   */
+  prevDoubleIcon?: ReactNode
+  /**
+   * Allow range selection.
+   */
+  range?: boolean
+  /**
+   * Toggle select mode between start and end date.
+   */
+  selectEndDate?: boolean
+  /**
+   * Initial selected date.
+   */
+  startDate?: Date | string | null
+  /**
+   * Set length of day name.
+   */
+  weekdayLength?: number
+  /**
+   * Callback fired when the user hovers over the calendar cell.
+   */
+  onCalendarCellHover?: (date: Date | null) => void
+  /**
+   * Callback fired when the calendar date changed.
+   */
+  onCalendarDateChange?: (date: Date) => void
+  /**
+   * Callback fired when the start date changed.
+   */
+  onStartDateChange?: (date: Date | null) => void
+  /**
+   * Callback fired when the end date changed.
+   */
+  onEndDateChange?: (date: Date | null) => void
+}
+
+export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
+  (
+    {
+      calendarDate,
+      disabledDates,
+      endDate,
+      firstDayOfWeek = 1,
+      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
+      maxDate,
+      minDate,
+      navigation = true,
+      nextIcon,
+      nextDoubleIcon,
+      prevIcon,
+      prevDoubleIcon,
+      range,
+      selectEndDate,
+      startDate,
+      weekdayLength = 2,
+      onCalendarDateChange,
+      onStartDateChange,
+      onEndDateChange,
+      onCalendarCellHover,
+    },
+    ref,
+  ) => {
+    const [_calendarDate, setCalendarDate] = useState<Date>(
+      calendarDate ? new Date(calendarDate) : 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)
+        !isSameDateAs(_calendarDate, d) && setCalendarDate(d)
+      }
+    }, [calendarDate])
+
+    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)
+        }
+      }
+    }, [startDate])
+
+    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)
+        }
+      }
+    }, [endDate])
+
+    useEffect(() => {
+      _startDate && onStartDateChange && onStartDateChange(_startDate)
+    }, [_startDate])
+
+    useEffect(() => {
+      _endDate && onEndDateChange && onEndDateChange(_endDate)
+    }, [_endDate])
+
+    useEffect(() => {
+      setSelectEndDate(selectEndDate)
+    }, [selectEndDate])
+
+    const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
+      const year = _calendarDate.getFullYear()
+      const month = _calendarDate.getMonth()
+      const d = new Date(year, month, 1)
+
+      years && d.setFullYear(d.getFullYear() + years)
+      months && d.setMonth(d.getMonth() + months)
+      setMonth && d.setMonth(setMonth)
+
+      setCalendarDate(d)
+      onCalendarDateChange && onCalendarDateChange(d)
+    }
+
+    const handleCellOnClick = (date: Date) => {
+      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+        return
+      }
+
+      if (range) {
+        if (_selectEndDate) {
+          if (_startDate && _startDate > date) {
+            setEndDate(_startDate)
+            setStartDate(date)
+          } else {
+            setEndDate(date)
+          }
+          setSelectEndDate(false)
+        } else {
+          setStartDate(date)
+          setSelectEndDate(true)
+        }
+      } else {
+        setStartDate(date)
+      }
+    }
+
+    const handleCellMouseEnter = (date: Date) => {
+      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+        return
+      }
+      onCalendarCellHover && onCalendarCellHover(date)
+    }
+
+    const handleCellMouseLeave = () => {
+      onCalendarCellHover && onCalendarCellHover(null)
+    }
+
+    const handleNavigationOnClick = (direction: string, double = false) => {
+      if (direction === 'prev') {
+        if (double) {
+          setCalendarPage(view !== 'days' ? -10 : -1)
+          return
+        }
+        if (view !== 'days') {
+          setCalendarPage(-1)
+          return
+        }
+        setCalendarPage(0, -1)
+        return
+      }
+      if (direction === 'next') {
+        if (double) {
+          setCalendarPage(view !== 'days' ? 10 : 1)
+          return
+        }
+        if (view !== 'days') {
+          setCalendarPage(1)
+          return
+        }
+        setCalendarPage(0, 1)
+        return
+      }
+    }
+
+    const Calendar = () => {
+      const monthDetails = getMonthDetails(
+        _calendarDate.getFullYear(),
+        _calendarDate.getMonth(),
+        firstDayOfWeek,
+      )
+      const listOfMonths = createGroupsInArray(getMonthsNames(locale), 4)
+      const listOfYears = createGroupsInArray(getYears(_calendarDate.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">
+                      {date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayLength)}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody onMouseLeave={() => handleCellMouseLeave()}>
+            {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: isToday(date),
+                          disabled: isDisabled(date, minDate, maxDate, disabledDates),
+                          next: month === 'next',
+                          previous: month === 'previous',
+                          last: isLastDayOfMonth(date),
+                          range: month === 'current' && isDateInRange(date, _startDate, _endDate),
+                          selected: isDateSelected(date, _startDate, _endDate),
+                          start: isStartDate(date, _startDate, _endDate),
+                          end: isEndDate(date, _startDate, _endDate),
+                        })}
+                        key={idx}
+                        title={date.toLocaleDateString(locale)}
+                        onClick={() => handleCellOnClick(date)}
+                        onMouseEnter={() => handleCellMouseEnter(date)}
+                      >
+                        <div className="calendar-cell-inner">
+                          {date.toLocaleDateString(locale, { day: 'numeric' })}
+                        </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)
+                            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, _calendarDate.getMonth(), _calendarDate.getDate()),
+                            )
+                            setView('months')
+                          }}
+                        >
+                          <div className="calendar-cell-inner">
+                            {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                          </div>
+                        </td>
+                      )
+                    })}
+                  </tr>
+                )
+              })}
+          </tbody>
+        </table>
+      )
+    }
+
+    const Navigation = () => {
+      return (
+        <div className="calendar-nav">
+          {navigation && (
+            <div className="calendar-nav-prev">
+              <CButton
+                color="transparent"
+                size="sm"
+                onClick={() => handleNavigationOnClick('prev', true)}
+              >
+                {prevDoubleIcon ? (
+                  prevDoubleIcon
+                ) : (
+                  <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>
+            </div>
+          )}
+          <div className="calendar-nav-date">
+            {view === 'days' && (
+              <CButton
+                color="transparent"
+                size="sm"
+                onClick={() => navigation && setView('months')}
+              >
+                {_calendarDate.toLocaleDateString(locale, { month: 'long' })}
+              </CButton>
+            )}
+            <CButton color="transparent" size="sm" onClick={() => navigation && setView('years')}>
+              {_calendarDate.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>
+              <CButton
+                color="transparent"
+                size="sm"
+                onClick={() => handleNavigationOnClick('next', true)}
+              >
+                {nextDoubleIcon ? (
+                  nextDoubleIcon
+                ) : (
+                  <span className="calendar-nav-icon calendar-nav-icon-double-next" />
+                )}
+              </CButton>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <div className="calendar" ref={ref}>
+        <Navigation />
+        <Calendar />
+      </div>
+    )
+  },
+)
+
+CCalendar.propTypes = {
+  className: PropTypes.string,
+  calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  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),
+  navigation: PropTypes.bool,
+  nextIcon: PropTypes.node,
+  nextDoubleIcon: PropTypes.node,
+  prevIcon: PropTypes.node,
+  prevDoubleIcon: PropTypes.node,
+  range: PropTypes.bool,
+  selectEndDate: PropTypes.bool,
+  startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  weekdayLength: PropTypes.number,
+  onCalendarCellHover: PropTypes.func,
+  onCalendarDateChange: PropTypes.func,
+  onStartDateChange: PropTypes.func,
+  onEndDateChange: PropTypes.func,
+}
+
+CCalendar.displayName = 'CCalendar'