@coreui/react-pro 4.1.3 → 4.2.0-beta.1

package/dist/utils/calendar.d.ts

@@ -0,0 +1,21 @@
+export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
+export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
+export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
+export declare const getCurrentYear: () => number;
+export declare const getCurrentMonth: () => number;
+export declare const getMonthName: (month: number, locale: string) => string;
+export declare const getMonthsNames: (locale: string) => string[];
+export declare const getYears: (year: number) => number[];
+export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
+    date: Date;
+    month: string;
+}[][];
+export declare const isDateDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
+export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isLastDayOfMonth: (date: Date) => boolean;
+export declare const isSameDateAs: (date: Date, date2: Date) => boolean;
+export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isToday: (date: Date) => boolean;
+export declare const isValidDate: (date: string) => number | false;

package/dist/utils/time.d.ts

@@ -0,0 +1,17 @@
+export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
+export declare const convert24hTo12h: (hour: number) => number;
+export declare const convertTimeToDate: (time: Date | string | null | undefined) => Date | null;
+export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
+export declare const getListOfHours: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getMinutesOrSeconds: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";
+export declare const getSelectedMinutes: (date: Date | null) => number | "";
+export declare const getSelectedSeconds: (date: Date | null) => number | "";
+export declare const isAmPm: (locale: string) => boolean;
+export declare const isValidTime: (time: string) => number | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.3",
+  "version": "4.2.0-beta.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,27 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@coreui/icons-pro": "^3.0.0-0",
+    "@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-device-detect": "^2.1.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/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -5,6 +5,7 @@ exports[`CAccordionButton customize 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed bazinga"
+    type="button"
   >
     Test
   </button>
@@ -16,6 +17,7 @@ exports[`loads and displays CAccordionButton component 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed"
+    type="button"
   >
     Test
   </button>

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`CAccordionHeader customize 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>
@@ -23,6 +24,7 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>

package/src/components/calendar/CCalendar.tsx

@@ -0,0 +1,528 @@
+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,
+  isDateDisabled,
+  isDateInRange,
+  isDateSelected,
+  isLastDayOfMonth,
+  isSameDateAs,
+  isToday,
+  isStartDate,
+  isEndDate,
+} from '../../utils/calendar'
+
+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
+   *
+   * @default 1
+   */
+  firstDayOfWeek?: number
+  /**
+   * Sets the default locale for components. If not set, it is inherited from the browser.
+   *
+   * @default 'default'
+   */
+  locale?: string
+  /**
+   * Max selectable date.
+   */
+  maxDate?: Date | string
+  /**
+   * Min selectable date.
+   */
+  minDate?: Date | string
+  /**
+   * Show arrows navigation.
+   */
+  navigation?: boolean
+  /**
+   * The custom next icon.
+   */
+  navNextIcon?: ReactNode
+  /**
+   * The custom next double icon.
+   */
+  navNextDoubleIcon?: ReactNode
+  /**
+   * The custom prev icon.
+   */
+  navPrevIcon?: ReactNode
+  /**
+   * The custom prev double icon.
+   */
+  navPrevDoubleIcon?: 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 or format of day name.
+   *
+   * @default 2
+   */
+  weekdayFormat?: number | 'long' | 'narrow' | 'short'
+  /**
+   * 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
+  /**
+   * Callback fired when the view type of calendar changed.
+   */
+  onViewChanged?: (view: string) => void
+}
+
+export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
+  (
+    {
+      calendarDate,
+      disabledDates,
+      endDate,
+      firstDayOfWeek = 1,
+      locale = 'default',
+      maxDate,
+      minDate,
+      navigation = true,
+      navNextIcon,
+      navNextDoubleIcon,
+      navPrevIcon,
+      navPrevDoubleIcon,
+      range,
+      selectEndDate,
+      startDate,
+      weekdayFormat = 2,
+      onCalendarDateChange,
+      onStartDateChange,
+      onEndDateChange,
+      onCalendarCellHover,
+      onViewChanged,
+    },
+    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')
+
+    const _maxDate = maxDate ? new Date(maxDate) : null
+    const _minDate = minDate ? new Date(minDate) : null
+
+    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])
+
+    useEffect(() => {
+      onViewChanged && onViewChanged(view)
+    }, [view])
+
+    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 (isDateDisabled(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 (isDateDisabled(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 === 'years' ? -10 : -1)
+          return
+        }
+
+        if (view !== 'days') {
+          setCalendarPage(-1)
+          return
+        }
+
+        setCalendarPage(0, -1)
+        return
+      }
+      if (direction === 'next') {
+        if (double) {
+          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 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">
+                      {typeof weekdayFormat === 'string'
+                        ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                        : date
+                            .toLocaleDateString(locale, { weekday: 'long' })
+                            .slice(0, weekdayFormat)}
+                    </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: isDateDisabled(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)}
+              >
+                {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">
+            {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">
+              {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('calendar', view)} 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.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  navigation: PropTypes.bool,
+  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]),
+  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,
+  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()
+})