@coreui/react-pro 4.2.0-beta.0 → 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.2.0-beta.0",
+  "version": "4.2.0-beta.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,7 +35,7 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@coreui/icons-pro": "^2.0.3",
+    "@coreui/icons-pro": "^3.0.0-0",
     "@coreui/icons-react": "^2.0.0",
     "@popperjs/core": "^2.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -49,6 +49,7 @@
     "classnames": "^2.3.1",
     "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",

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

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CButton } from '../button/CButton'
+
 import {
   createGroupsInArray,
   getMonthDetails,
   getMonthsNames,
   getYears,
-  isDisabled,
+  isDateDisabled,
   isDateInRange,
   isDateSelected,
   isLastDayOfMonth,
@@ -16,7 +17,7 @@ import {
   isToday,
   isStartDate,
   isEndDate,
-} from './CCalendar.utils'
+} from '../../utils/calendar'
 
 export interface CCalendarProps {
   /**
@@ -37,21 +38,32 @@ 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,
+   * - 7 - Sunday
+   *
+   * @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
   /**
    * Min selectable date.
    */
-  minDate?: Date
+  minDate?: Date | string
   /**
    * Show arrows navigation.
    */
@@ -59,19 +71,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 +97,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.
    */
@@ -104,6 +118,10 @@ export interface CCalendarProps {
    * 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>(
@@ -113,22 +131,23 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       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,
       onCalendarDateChange,
       onStartDateChange,
       onEndDateChange,
       onCalendarCellHover,
+      onViewChanged,
     },
     ref,
   ) => {
@@ -140,6 +159,9 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     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)
@@ -152,12 +174,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         setStartDate(null)
         return
       }
+
       if (startDate) {
         const d = new Date(startDate)
         if (_startDate === null) {
           setStartDate(d)
           return
         }
+
         if (_startDate && !isSameDateAs(d, _startDate)) {
           setStartDate(d)
         }
@@ -169,12 +193,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         setEndDate(null)
         return
       }
+
       if (endDate) {
         const d = new Date(endDate)
         if (_endDate === null) {
           setEndDate(d)
           return
         }
+
         if (_endDate && !isSameDateAs(d, _endDate)) {
           setEndDate(d)
         }
@@ -193,6 +219,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       setSelectEndDate(selectEndDate)
     }, [selectEndDate])
 
+    useEffect(() => {
+      onViewChanged && onViewChanged(view)
+    }, [view])
+
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
       const year = _calendarDate.getFullYear()
       const month = _calendarDate.getMonth()
@@ -207,7 +237,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }
 
     const handleCellOnClick = (date: Date) => {
-      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
 
@@ -230,7 +260,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }
 
     const handleCellMouseEnter = (date: Date) => {
-      if (isDisabled(date, minDate, maxDate, disabledDates)) {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
       onCalendarCellHover && onCalendarCellHover(date)
@@ -243,25 +273,29 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     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
       }
@@ -284,7 +318,11 @@ 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>
                 ))}
@@ -300,7 +338,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                       <td
                         className={classNames('calendar-cell', {
                           today: isToday(date),
-                          disabled: isDisabled(date, minDate, maxDate, disabledDates),
+                          disabled: isDateDisabled(date, _minDate, _maxDate, disabledDates),
                           next: month === 'next',
                           previous: month === 'previous',
                           last: isLastDayOfMonth(date),
@@ -383,23 +421,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">
@@ -418,24 +458,26 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           </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,7 +489,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }
 
     return (
-      <div className="calendar" ref={ref}>
+      <div className={classNames('calendar', view)} ref={ref}>
         <Navigation />
         <Calendar />
       </div>
@@ -462,21 +504,25 @@ CCalendar.propTypes = {
   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,
+  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()
+})