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

package/src/index.ts

@@ -15,6 +15,7 @@ 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'
@@ -32,6 +33,8 @@ 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'
@@ -115,6 +118,7 @@ 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'
@@ -140,6 +144,7 @@ export {
   CButton,
   CButtonGroup,
   CButtonToolbar,
+  CCalendar,
   CCallout,
   CCard,
   CCardBody,
@@ -156,6 +161,8 @@ export {
   CCarouselItem,
   CCloseButton,
   CCollapse,
+  CDatePicker,
+  CDateRangePicker,
   CDropdown,
   CDropdownDivider,
   CDropdownHeader,
@@ -240,6 +247,7 @@ export {
   CTableRow,
   CTabContent,
   CTabPane,
+  CTimePicker,
   CToast,
   CToastBody,
   CToastClose,

package/src/utils/calendar.ts

@@ -0,0 +1,193 @@
+export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
+  d.toLocaleDateString(locale, options)
+
+export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
+  d.toLocaleTimeString(locale, options)
+
+export const createGroupsInArray = (arr: any[], numberOfGroups: number) => {
+  const perGroup = Math.ceil(arr.length / numberOfGroups)
+  return new Array(numberOfGroups)
+    .fill('')
+    .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
+}
+
+export const getCurrentYear = () => new Date().getFullYear()
+
+export const getCurrentMonth = () => new Date().getMonth()
+
+export const getMonthName = (month: number, locale: string) => {
+  const d = new Date()
+  d.setDate(1)
+  d.setMonth(month)
+  return d.toLocaleString(locale, { month: 'long' })
+}
+
+export const getMonthsNames = (locale: string) => {
+  const months = []
+  const d = new Date()
+  d.setDate(1)
+
+  for (let i = 0; i < 12; i++) {
+    d.setMonth(i)
+    months.push(d.toLocaleString(locale, { month: 'short' }))
+  }
+
+  return months
+}
+
+export const getYears = (year: number) => {
+  const years = []
+  for (let _year = year - 6; _year < year + 6; _year++) {
+    years.push(_year)
+  }
+
+  return years
+}
+
+const getLeadingDays = (year: number, month: number, firstDayOfWeek: number) => {
+  // 0: sunday
+  // 1: monday
+  const dates = []
+  const d = new Date(year, month)
+  const y = d.getFullYear()
+  const m = d.getMonth()
+  const firstWeekday = new Date(y, m, 1).getDay()
+  let leadingDays = 6 - (6 - firstWeekday) - firstDayOfWeek
+
+  if (firstDayOfWeek) {
+    leadingDays = leadingDays < 0 ? 7 + leadingDays : leadingDays
+  }
+
+  for (let i = leadingDays * -1; i < 0; i++) {
+    dates.push({
+      date: new Date(y, m, i + 1),
+      month: 'previous',
+    })
+  }
+
+  return dates
+}
+
+const getMonthDays = (year: number, month: number) => {
+  const dates = []
+  const lastDay = new Date(year, month + 1, 0).getDate()
+  for (let i = 1; i <= lastDay; i++) {
+    dates.push({
+      date: new Date(year, month, i),
+      month: 'current',
+    })
+  }
+  return dates
+}
+
+const getTrailingDays = (
+  year: number,
+  month: number,
+  leadingDays: { date: Date; month: string }[],
+  monthDays: { date: Date; month: string }[],
+) => {
+  const dates = []
+  const days = 42 - (leadingDays.length + monthDays.length)
+  for (let i = 1; i <= days; i++) {
+    dates.push({
+      date: new Date(year, month + 1, i),
+      month: 'next',
+    })
+  }
+  return dates
+}
+
+export const getMonthDetails = (year: number, month: number, firstDayOfWeek: number) => {
+  const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
+  const daysThisMonth = getMonthDays(year, month)
+  const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
+  const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
+
+  const weeks: { date: Date; month: string }[][] = []
+
+  days.forEach((day, index) => {
+    if (index % 7 === 0 || weeks.length === 0) {
+      weeks.push([])
+    }
+    weeks[weeks.length - 1].push(day)
+  })
+
+  return weeks
+}
+
+export const isDateDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
+  let disabled
+  if (dates) {
+    dates.forEach((_date: Date | Date[]) => {
+      if (Array.isArray(_date)) {
+        if (isDateInRange(date, _date[0], _date[1])) {
+          disabled = true
+        }
+      }
+      if (_date instanceof Date) {
+        if (isSameDateAs(date, _date)) {
+          disabled = true
+        }
+      }
+    })
+  }
+  if (min && date < min) {
+    disabled = true
+  }
+
+  if (max && date > max) {
+    disabled = true
+  }
+  return disabled
+}
+
+export const isDateInRange = (date: Date, start: Date | null, end: Date | null) => {
+  return start && end && start <= date && date <= end
+}
+
+export const isDateSelected = (date: Date, start: Date | null, end: Date | null) => {
+  return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date))
+}
+
+export const isEndDate = (date: Date, start: Date | null, end: Date | null) => {
+  return start && end && isSameDateAs(end, date) && start < end
+}
+
+export const isLastDayOfMonth = (date: Date) => {
+  const test = new Date(date.getTime())
+  const month = test.getMonth()
+
+  test.setDate(test.getDate() + 1)
+  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 isStartDate = (date: Date, start: Date | null, end: Date | null) => {
+  return start && end && isSameDateAs(start, date) && start < end
+}
+
+export const isToday = (date: Date) => {
+  const today = new Date()
+  return (
+    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/time.ts

@@ -0,0 +1,58 @@
+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 getMinutesOrSeconds = (locale: string) =>
+  Array.from({ length: 60 }, (_, i) => {
+    return {
+      value: i,
+      label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+    }
+  })
+
+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()
+}