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

package/src/index.ts

@@ -1,259 +1 @@
-import { CAccordion } from './components/accordion/CAccordion'
-import { CAccordionBody } from './components/accordion/CAccordionBody'
-import { CAccordionButton } from './components/accordion/CAccordionButton'
-import { CAccordionCollapse } from './components/accordion/CAccordionCollapse'
-import { CAccordionHeader } from './components/accordion/CAccordionHeader'
-import { CAccordionItem } from './components/accordion/CAccordionItem'
-import { CAlert } from './components/alert/CAlert'
-import { CAlertHeading } from './components/alert/CAlertHeading'
-import { CAlertLink } from './components/alert/CAlertLink'
-import { CAvatar } from './components/avatar/CAvatar'
-import { CBadge } from './components/badge/CBadge'
-import { CBackdrop } from './components/backdrop/CBackdrop'
-import { CBreadcrumb } from './components/breadcrumb/CBreadcrumb'
-import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem'
-import { CButton } from './components/button/CButton'
-import { CButtonGroup } from './components/button-group/CButtonGroup'
-import { CButtonToolbar } from './components/button-group/CButtonToolbar'
-import { CCalendar } from './components/calendar/CCalendar'
-import { CCallout } from './components/callout/CCallout'
-import { CCard } from './components/card/CCard'
-import { CCardBody } from './components/card/CCardBody'
-import { CCardFooter } from './components/card/CCardFooter'
-import { CCardGroup } from './components/card/CCardGroup'
-import { CCardHeader } from './components/card/CCardHeader'
-import { CCardImage } from './components/card/CCardImage'
-import { CCardImageOverlay } from './components/card/CCardImageOverlay'
-import { CCardLink } from './components/card/CCardLink'
-import { CCardSubtitle } from './components/card/CCardSubtitle'
-import { CCardText } from './components/card/CCardText'
-import { CCardTitle } from './components/card/CCardTitle'
-import { CCarousel } from './components/carousel/CCarousel'
-import { CCarouselCaption } from './components/carousel/CCarouselCaption'
-import { CCarouselItem } from './components/carousel/CCarouselItem'
-import { CCollapse } from './components/collapse/CCollapse'
-import { CCloseButton } from './components/close-button/CCloseButton'
-import { CDatePicker } from './components/datepicker/CDatePicker'
-import { CDateRangePicker } from './components/daterangepicker/CDateRangePicker'
-import { CDropdown } from './components/dropdown/CDropdown'
-import { CDropdownDivider } from './components/dropdown/CDropdownDivider'
-import { CDropdownHeader } from './components/dropdown/CDropdownHeader'
-import { CDropdownItem } from './components/dropdown/CDropdownItem'
-import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain'
-import { CDropdownMenu } from './components/dropdown/CDropdownMenu'
-import { CDropdownToggle } from './components/dropdown/CDropdownToggle'
-import { CCol } from './components/grid/CCol'
-import { CContainer } from './components/grid/CContainer'
-import { CRow } from './components/grid/CRow'
-import { CFooter } from './components/footer/CFooter'
-import { CForm } from './components/form/CForm'
-import { CFormCheck } from './components/form/CFormCheck'
-import { CFormFeedback } from './components/form/CFormFeedback'
-import { CFormFloating } from './components/form/CFormFloating'
-import { CFormInput } from './components/form/CFormInput'
-import { CFormLabel } from './components/form/CFormLabel'
-import { CFormRange } from './components/form/CFormRange'
-import { CFormSelect } from './components/form/CFormSelect'
-import { CFormSwitch } from './components/form/CFormSwitch'
-import { CFormText } from './components/form/CFormText'
-import { CFormTextarea } from './components/form/CFormTextarea'
-import { CInputGroup } from './components/form/CInputGroup'
-import { CInputGroupText } from './components/form/CInputGroupText'
-import { CHeader } from './components/header/CHeader'
-import { CHeaderBrand } from './components/header/CHeaderBrand'
-import { CHeaderDivider } from './components/header/CHeaderDivider'
-import { CHeaderNav } from './components/header/CHeaderNav'
-import { CHeaderText } from './components/header/CHeaderText'
-import { CHeaderToggler } from './components/header/CHeaderToggler'
-import { CImage } from './components/image/CImage'
-import { CLink } from './components/link/CLink'
-import { CListGroup } from './components/list-group/CListGroup'
-import { CListGroupItem } from './components/list-group/CListGroupItem'
-import { CLoadingButton } from './components/loading-button/CLoadingButton'
-import { CModal } from './components/modal/CModal'
-import { CModalBody } from './components/modal/CModalBody'
-import { CModalContent } from './components/modal/CModalContent'
-import { CModalDialog } from './components/modal/CModalDialog'
-import { CModalFooter } from './components/modal/CModalFooter'
-import { CModalHeader } from './components/modal/CModalHeader'
-import { CModalTitle } from './components/modal/CModalTitle'
-import { CMultiSelect } from './components/multi-select/CMultiSelect'
-import { CNav } from './components/nav/CNav'
-import { CNavGroupItems } from './components/nav/CNavGroupItems'
-import { CNavGroup } from './components/nav/CNavGroup'
-import { CNavItem } from './components/nav/CNavItem'
-import { CNavLink } from './components/nav/CNavLink'
-import { CNavTitle } from './components/nav/CNavTitle'
-import { CNavbar } from './components/navbar/CNavbar'
-import { CNavbarBrand } from './components/navbar/CNavbarBrand'
-import { CNavbarNav } from './components/navbar/CNavbarNav'
-import { CNavbarText } from './components/navbar/CNavbarText'
-import { CNavbarToggler } from './components/navbar/CNavbarToggler'
-import { CPagination } from './components/pagination/CPagination'
-import { CPaginationItem } from './components/pagination/CPaginationItem'
-import { CSmartPagination } from './components/pagination/CSmartPagination'
-import { CPlaceholder } from './components/placeholder/CPlaceholder'
-import { CPopover } from './components/popover/CPopover'
-import { CProgress } from './components/progress/CProgress'
-import { CProgressBar } from './components/progress/CProgressBar'
-import { CSidebar } from './components/sidebar/CSidebar'
-import { COffcanvas } from './components/offcanvas/COffcanvas'
-import { COffcanvasBody } from './components/offcanvas/COffcanvasBody'
-import { COffcanvasHeader } from './components/offcanvas/COffcanvasHeader'
-import { COffcanvasTitle } from './components/offcanvas/COffcanvasTitle'
-import { CSidebarBrand } from './components/sidebar/CSidebarBrand'
-import { CSidebarFooter } from './components/sidebar/CSidebarFooter'
-import { CSidebarToggler } from './components/sidebar/CSidebarToggler'
-import { CSidebarHeader } from './components/sidebar/CSidebarHeader'
-import { CSidebarNav } from './components/sidebar/CSidebarNav'
-import { CSmartTable } from './components/smart-table/CSmartTable'
-import { CSpinner } from './components/spinner/CSpinner'
-import { CTable } from './components/table/CTable'
-import { CTableBody } from './components/table/CTableBody'
-import { CTableCaption } from './components/table/CTableCaption'
-import { CTableDataCell } from './components/table/CTableDataCell'
-import { CTableFoot } from './components/table/CTableFoot'
-import { CTableHead } from './components/table/CTableHead'
-import { CTableHeaderCell } from './components/table/CTableHeaderCell'
-import { CTableRow } from './components/table/CTableRow'
-import { CTabContent } from './components/tabs/CTabContent'
-import { CTabPane } from './components/tabs/CTabPane'
-import { CTimePicker } from './components/timepicker/CTimePicker'
-import { CToast } from './components/toast/CToast'
-import { CToastBody } from './components/toast/CToastBody'
-import { CToastClose } from './components/toast/CToastClose'
-import { CToastHeader } from './components/toast/CToastHeader'
-import { CToaster } from './components/toast/CToaster'
-import { CTooltip } from './components/tooltip/CTooltip'
-
-export {
-  CAccordion,
-  CAccordionBody,
-  CAccordionButton,
-  CAccordionCollapse,
-  CAccordionHeader,
-  CAccordionItem,
-  CAlert,
-  CAlertHeading,
-  CAlertLink,
-  CAvatar,
-  CBadge,
-  CBackdrop,
-  CBreadcrumb,
-  CBreadcrumbItem,
-  CButton,
-  CButtonGroup,
-  CButtonToolbar,
-  CCalendar,
-  CCallout,
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardHeader,
-  CCardImage,
-  CCardImageOverlay,
-  CCardLink,
-  CCardSubtitle,
-  CCardText,
-  CCardTitle,
-  CCarousel,
-  CCarouselCaption,
-  CCarouselItem,
-  CCloseButton,
-  CCollapse,
-  CDatePicker,
-  CDateRangePicker,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CCol,
-  CContainer,
-  CRow,
-  CFooter,
-  CCardGroup,
-  CForm,
-  CFormCheck,
-  CFormFeedback,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormRange,
-  CFormSelect,
-  CFormSwitch,
-  CFormText,
-  CFormTextarea,
-  CImage,
-  CInputGroup,
-  CInputGroupText,
-  CHeader,
-  CHeaderBrand,
-  CHeaderDivider,
-  CHeaderNav,
-  CHeaderText,
-  CHeaderToggler,
-  CLink,
-  CListGroup,
-  CListGroupItem,
-  CLoadingButton,
-  CModal,
-  CModalBody,
-  CModalContent,
-  CModalDialog,
-  CModalFooter,
-  CModalHeader,
-  CModalTitle,
-  CMultiSelect,
-  CNav,
-  CNavGroup,
-  CNavGroupItems,
-  CNavItem,
-  CNavLink,
-  CNavTitle,
-  CNavbar,
-  CNavbarBrand,
-  CNavbarNav,
-  CNavbarText,
-  CNavbarToggler,
-  CPagination,
-  CPaginationItem,
-  CPlaceholder,
-  CPopover,
-  CProgress,
-  CProgressBar,
-  COffcanvas,
-  COffcanvasBody,
-  COffcanvasHeader,
-  COffcanvasTitle,
-  CSmartPagination,
-  CSidebar,
-  CSidebarBrand,
-  CSidebarFooter,
-  CSidebarToggler,
-  CSidebarHeader,
-  CSidebarNav,
-  CSmartTable,
-  CSpinner,
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableFoot,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-  CTabContent,
-  CTabPane,
-  CTimePicker,
-  CToast,
-  CToastBody,
-  CToastClose,
-  CToastHeader,
-  CToaster,
-  CTooltip,
-}
-
 export * from './components/'

package/src/{components/calendar/CCalendar.utils.ts → utils/calendar.ts}

@@ -15,6 +15,52 @@ export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+    .replace('2013', '(?<year>[0-9]{2,4})')
+    .replace('12', '(?<month>[0-9]{1,2})')
+    .replace('31', '(?<day>[0-9]{1,2})')
+
+  if (time) {
+    regex = regex
+      .replace('5', '(?<hour>[0-9]{1,2})')
+      .replace('17', '(?<hour>[0-9]{1,2})')
+      .replace('19', '(?<minute>[0-9]{1,2})')
+      .replace('22', '(?<second>[0-9]{1,2})')
+      .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = RegExp(`${regex}`)
+  const partials = string.match(rgx)
+
+  if (partials === null) return
+
+  const newDate =
+    partials.groups &&
+    (time
+      ? new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+          partials.groups['ampm']
+            ? partials.groups['ampm'] === 'PM'
+              ? Number(partials.groups['hour']) + 12
+              : Number(partials.groups['hour'])
+            : Number(partials.groups['hour']),
+          Number(partials.groups['minute']),
+          Number(partials.groups['second']),
+        )
+      : new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+        ))
+
+  return newDate
+}
+
 export const getMonthName = (month: number, locale: string) => {
   const d = new Date()
   d.setDate(1)
@@ -115,7 +161,35 @@ export const getMonthDetails = (year: number, month: number, firstDayOfWeek: num
   return weeks
 }
 
-export const isDisabled = (date: Date, min?: Date, max?: Date, dates?: Date[] | Date[][]) => {
+export const isDisableDateInRange = (
+  startDate?: Date | null,
+  endDate?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
+  if (startDate && endDate) {
+    const date = new Date(startDate)
+    let disabled = false
+
+    while (date < endDate) {
+      date.setDate(date.getDate() + 1)
+      if (isDateDisabled(date, null, null, dates)) {
+        disabled = true
+        break
+      }
+    }
+
+    return disabled
+  }
+
+  return false
+}
+
+export const isDateDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
   let disabled
   if (dates) {
     dates.forEach((_date: Date | Date[]) => {
@@ -161,12 +235,20 @@ export const isLastDayOfMonth = (date: Date) => {
   return test.getMonth() !== month
 }
 
-export const isSameDateAs = (date: Date, date2: Date) => {
-  return (
-    date.getDate() == date2.getDate() &&
-    date.getMonth() == date2.getMonth() &&
-    date.getFullYear() == date2.getFullYear()
-  )
+export const isSameDateAs = (date: Date | null, date2: Date | null) => {
+  if (date instanceof Date && date2 instanceof Date) {
+    return (
+      date.getDate() === date2.getDate() &&
+      date.getMonth() === date2.getMonth() &&
+      date.getFullYear() === date2.getFullYear()
+    )
+  }
+
+  if (date === null && date2 === null) {
+    return true
+  }
+
+  return false
 }
 
 export const isStartDate = (date: Date, start: Date | null, end: Date | null) => {
@@ -176,8 +258,13 @@ export const isStartDate = (date: Date, start: Date | null, end: Date | null) =>
 export const isToday = (date: Date) => {
   const today = new Date()
   return (
-    date.getDate() == today.getDate() &&
-    date.getMonth() == today.getMonth() &&
-    date.getFullYear() == today.getFullYear()
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
   )
 }
+
+export const isValidDate = (date: string) => {
+  const d = new Date(date)
+  return d instanceof Date && d.getTime()
+}

package/src/utils/hooks/useStateWithCallback.ts

@@ -1,7 +1,10 @@
-import { useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
-export const useStateWithCallback = (initialState: any, callback: any) => {
+export const useStateWithCallback = <S>(
+  initialState: S,
+  handler?: (prevState: S) => void,
+): [S, Dispatch<SetStateAction<S>>] => {
   const [state, setState] = useState(initialState)
-  useEffect(() => callback(state), [state, callback])
+  handler && useEffect(() => handler(state), [state])
   return [state, setState]
 }

package/src/utils/time.ts

@@ -0,0 +1,84 @@
+export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
+  if (abbr === 'am' && hour === 12) {
+    return 0
+  }
+  if (abbr === 'am') {
+    return hour
+  }
+  if (abbr === 'pm' && hour === 12) {
+    return 12
+  }
+  return hour + 12
+}
+
+export const convert24hTo12h = (hour: number) => hour % 12 || 12
+
+export const convertTimeToDate = (time: Date | string | null | undefined) =>
+  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+
+export const getAmPm = (date: Date, locale: string) => {
+  if (date.toLocaleTimeString(locale).includes('AM')) {
+    return 'am'
+  }
+  if (date.toLocaleTimeString(locale).includes('PM')) {
+    return 'pm'
+  }
+  return date.getHours() >= 12 ? 'pm' : 'am'
+}
+
+export const getListOfHours = (locale: string) =>
+  Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+    return {
+      value: isAmPm(locale) ? i + 1 : i,
+      label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+    }
+  })
+
+export const getListOfMinutes = (locale: string, valueAsString = false) =>
+  Array.from({ length: 60 }, (_, i) => {
+    const d = new Date()
+    d.setMinutes(i)
+    return {
+      value: valueAsString ? i.toString() : i,
+      label: d
+        .toLocaleTimeString(locale, {
+          hour: '2-digit',
+          hour12: false,
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(':')[1],
+    }
+  })
+
+export const getListOfSeconds = (locale: string, valueAsString = false) =>
+  Array.from({ length: 60 }, (_, i) => {
+    const d = new Date()
+    d.setSeconds(i)
+    return {
+      value: valueAsString ? i.toString() : i,
+      label: d
+        .toLocaleTimeString(locale, {
+          hour: '2-digit',
+          hour12: false,
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(':')[2],
+    }
+  })
+
+export const getSelectedHour = (date: Date | null, locale: string) =>
+  date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : ''
+
+export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')
+
+export const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')
+
+export const isAmPm = (locale: string) =>
+  ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
+
+export const isValidTime = (time: string) => {
+  const d = new Date(`1970-01-01 ${time}`)
+  return d instanceof Date && d.getTime()
+}

package/dist/components/dropdown/CDropdownToggleCustom.d.ts

@@ -1,15 +0,0 @@
-import { FC, HTMLAttributes } from 'react';
-import { Triggers } from '../Types';
-export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled?: boolean;
-    /**
-     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-     *
-     * @type 'hover' | 'focus' | 'click'
-     */
-    trigger?: Triggers | Triggers[];
-}
-export declare const CDropdownToggleCustom: FC<CDropdownToggleCustomProps>;

package/dist/components/timepicker/CTimePicker.utils.d.ts

@@ -1,4 +0,0 @@
-export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
-export declare const convert24hTo12h: (hour: number) => number;
-export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
-export declare const isAmPm: (locale: string) => boolean;