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

package/src/components/calendar/CCalendar.utils.ts

@@ -0,0 +1,183 @@
+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 isDisabled = (date: Date, min?: Date, max?: Date, 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()
+  )
+}

package/src/components/datepicker/CDatePicker.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { CDateRangePicker, CDateRangePickerProps } from '../daterangepicker/CDateRangePicker'
+
+export interface CDatePickerProps
+  extends Omit<
+    CDateRangePickerProps,
+    | 'calendars'
+    | 'endDate'
+    | 'range'
+    | 'onEndDateChange'
+    | 'onStartDateChange'
+    | 'ranges'
+    | 'selectEndDate'
+    | 'startDate'
+  > {
+  /**
+   * Initial selected date.
+   */
+  date?: Date | string | null
+  /**
+   * Callback fired when the date changed.
+   */
+  onDateChange?: (date: Date | null) => void
+}
+
+export const CDatePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDatePickerProps>(
+  ({ date, onDateChange, placeholder = 'Select date', ...rest }, ref) => {
+    return (
+      <CDateRangePicker
+        calendars={1}
+        startDate={date}
+        onStartDateChange={onDateChange}
+        placeholder={placeholder}
+        range={false}
+        ref={ref}
+        {...rest}
+      />
+    )
+  },
+)
+
+CDatePicker.displayName = 'CDatePicker'
+
+CDatePicker.propTypes = {
+  ...CDateRangePicker.propTypes,
+  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  onDateChange: PropTypes.func,
+}

package/src/components/daterangepicker/CDateRangePicker.tsx

@@ -0,0 +1,366 @@
+import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isMobile } from 'react-device-detect'
+
+import { CCalendar, CCalendarProps } from '../calendar/CCalendar'
+import { CPicker, CPickerProps } from './../picker/CPicker'
+import { CTimePicker } from './../timepicker/CTimePicker'
+import { convertToLocalDate } from '../calendar/CCalendar.utils'
+import { CButton } from '../button/CButton'
+import { CFormInput } from '../form/CFormInput'
+import { CInputGroup } from '../form/CInputGroup'
+import { CInputGroupText } from '../form/CInputGroupText'
+
+export interface CDateRangePickerProps
+  extends Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,
+    Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
+  /**
+   * The number of calendars that render on desktop devices.
+   */
+  calendars?: number
+  /**
+   * Enables selection cleaner element.
+   */
+  cleaner?: boolean
+  /**
+   * Cleaner icon.
+   */
+  cleanerIcon?: ReactNode | boolean
+  /**
+   * Default input icon.
+   */
+  defaultIcon?: ReactNode | boolean
+  /**
+   * Default icon between date input fields.
+   */
+  infixIcon?: ReactNode | boolean
+  /**
+   * Toggle the readonly state for the component.
+   */
+  inputReadOnly?: boolean
+  /**
+   * Specifies short hints that are visible in start date and end date inputs.
+   */
+  placeholder?: string | string[]
+  /**
+   * @ignore
+   */
+  range?: boolean
+  /**
+   * Predefined date ranges the user can select from.
+   */
+  ranges?: object
+  /**
+   * Size the component small or large.
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Provide an additional time selection by adding select boxes to choose times.
+   */
+  timepicker?: boolean
+}
+
+export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDateRangePickerProps>(
+  (
+    {
+      calendars = 2,
+      className,
+      cleaner = true,
+      cleanerIcon,
+      calendarDate,
+      disabled,
+      disabledDates,
+      endDate,
+      defaultIcon,
+      infixIcon,
+      inputReadOnly,
+      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
+      maxDate,
+      minDate,
+      onEndDateChange,
+      onHide,
+      onStartDateChange,
+      onShow,
+      placeholder = ['Start date', 'End date'],
+      range = true,
+      ranges,
+      size,
+      startDate,
+      timepicker,
+      toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputStartRef = useRef<HTMLInputElement>(null)
+    const inputEndRef = useRef<HTMLInputElement>(null)
+    const [_visible, setVisible] = useState(visible)
+    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
+    const [_endDate, setEndDate] = useState<Date | null>(endDate ? new Date(endDate) : null)
+    const [inputHoverValue, setInputHoverValue] = useState<Date | null>(null)
+    const [inputToHoverValue, setInputToHoverValue] = useState<Date | null>(null)
+    const [selectEndDate, setSelectEndDate] = useState(false)
+    const [_calendarDate, setCalendarDate] = useState<Date>(
+      calendarDate ? new Date(calendarDate) : new Date(),
+    )
+
+    useEffect(() => {
+      startDate && setCalendarDate(new Date(startDate))
+    }, [startDate])
+
+    useEffect(() => {
+      endDate && setCalendarDate(new Date(endDate))
+    }, [endDate])
+
+    useEffect(() => {
+      _visible && onShow && onShow()
+      !_visible && onHide && onHide()
+    }, [_visible])
+
+    useEffect(() => {
+      if (inputStartRef.current) {
+        if (inputHoverValue) {
+          inputStartRef.current.value = convertToLocalDate(inputHoverValue, locale)
+          return
+        }
+        if (_startDate) {
+          inputStartRef.current.value = timepicker
+            ? _startDate.toLocaleString(locale)
+            : _startDate.toLocaleDateString(locale)
+          return
+        }
+        inputStartRef.current.value = ''
+      }
+    }, [inputHoverValue, _startDate])
+
+    useEffect(() => {
+      if (inputEndRef.current) {
+        if (inputToHoverValue) {
+          inputEndRef.current.value = convertToLocalDate(inputToHoverValue, locale)
+          return
+        }
+        if (_endDate) {
+          inputEndRef.current.value = timepicker
+            ? _endDate.toLocaleString(locale)
+            : _endDate.toLocaleDateString(locale)
+          return
+        }
+        inputEndRef.current.value = ''
+      }
+    }, [inputToHoverValue, _endDate])
+
+    const handleCalendarDateChange = (date: Date, difference?: number) => {
+      difference
+        ? setCalendarDate(new Date(date.getFullYear(), date.getMonth() - difference, 1))
+        : setCalendarDate(date)
+    }
+
+    const handleStartDateChange = (date: Date | null) => {
+      setStartDate(date)
+      range && setSelectEndDate(true)
+      onStartDateChange && onStartDateChange(date)
+      setInputHoverValue(null)
+    }
+
+    const handleEndDateChange = (date: Date | null) => {
+      setEndDate(date)
+      setSelectEndDate(false)
+      onEndDateChange && onEndDateChange(date)
+      setInputToHoverValue(null)
+
+      if (timepicker !== true) {
+        _startDate !== null && setVisible(false)
+      }
+    }
+
+    const handleCalendarCellHover = (date: Date | null) => {
+      selectEndDate ? setInputToHoverValue(date) : setInputHoverValue(date)
+    }
+
+    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation()
+      setStartDate(null)
+      setEndDate(null)
+      setInputHoverValue(null)
+      setInputToHoverValue(null)
+    }
+
+    const _className = classNames('date-picker', className)
+
+    const InputGroup = () => (
+      <CInputGroup className="picker-input-group" size={size}>
+        <CFormInput
+          className={classNames({
+            hover: inputHoverValue,
+          })}
+          disabled={disabled}
+          placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
+          readOnly={inputReadOnly}
+          onClick={() => setSelectEndDate(false)}
+          ref={inputStartRef}
+        />
+        {range && infixIcon !== false && (
+          <CInputGroupText>
+            {infixIcon ? (
+              infixIcon
+            ) : (
+              <span className="picker-input-group-icon date-picker-arrow-icon" />
+            )}
+          </CInputGroupText>
+        )}
+        {range && (
+          <CFormInput
+            className={classNames({
+              hover: inputToHoverValue,
+            })}
+            disabled={disabled}
+            placeholder={placeholder[1]}
+            readOnly={inputReadOnly}
+            onClick={() => setSelectEndDate(true)}
+            ref={inputEndRef}
+          />
+        )}
+        {(defaultIcon !== false || cleaner) && (
+          <CInputGroupText>
+            {defaultIcon !== false && (
+              <span className="picker-input-group-indicator">
+                {defaultIcon ? (
+                  defaultIcon
+                ) : (
+                  <span className="picker-input-group-icon date-picker-input-icon" />
+                )}
+              </span>
+            )}
+            {cleaner && _startDate && (
+              <span
+                className="picker-input-group-cleaner"
+                role="button"
+                onClick={(event) => handleClear(event)}
+              >
+                {cleanerIcon ? (
+                  cleanerIcon
+                ) : (
+                  <span className="picker-input-group-icon date-picker-cleaner-icon" />
+                )}
+              </span>
+            )}
+          </CInputGroupText>
+        )}
+      </CInputGroup>
+    )
+
+    return (
+      <CPicker
+        className={_className}
+        disabled={disabled}
+        footer={timepicker}
+        toggler={toggler ? toggler : InputGroup()}
+        onCancelClick={() => {
+          handleStartDateChange(startDate ? new Date(startDate) : null)
+          handleEndDateChange(endDate ? new Date(endDate) : null)
+        }}
+        visible={_visible}
+        {...rest}
+        ref={ref}
+      >
+        <div className="date-picker-body">
+          {ranges && (
+            <div className="date-picker-ranges">
+              {Object.keys(ranges).map((key: string, index: number) => (
+                <CButton
+                  color="secondary"
+                  key={index}
+                  onClick={() => {
+                    setStartDate(ranges[key][0])
+                    setEndDate(ranges[key][1])
+                  }}
+                  variant="ghost"
+                >
+                  {key}
+                </CButton>
+              ))}
+            </div>
+          )}
+          <div className="date-picker-calendars">
+            {[...Array(isMobile ? 1 : calendars)].map((_, index) => (
+              <div className="date-picker-calendar" key={index}>
+                <CCalendar
+                  calendarDate={
+                    new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + index, 1)
+                  }
+                  disabledDates={disabledDates}
+                  endDate={_endDate}
+                  locale={locale}
+                  maxDate={maxDate}
+                  minDate={minDate}
+                  range={range}
+                  selectEndDate={selectEndDate}
+                  startDate={_startDate}
+                  onCalendarCellHover={(date) => handleCalendarCellHover(date)}
+                  onCalendarDateChange={(date) => handleCalendarDateChange(date, index)}
+                  onStartDateChange={(date) => handleStartDateChange(date)}
+                  onEndDateChange={(date) => handleEndDateChange(date)}
+                />
+                {!isMobile && timepicker && (index === 0 || calendars - index === 1) && (
+                  <CTimePicker
+                    container="inline"
+                    disabled={
+                      index === 0
+                        ? _startDate === null
+                          ? true
+                          : false
+                        : _endDate === null
+                        ? true
+                        : false
+                    }
+                    locale={locale}
+                    onChange={(_, __, date) =>
+                      index === 0 ? handleStartDateChange(date) : handleEndDateChange(date)
+                    }
+                    value={index === 0 ? _startDate : _endDate}
+                    variant="select"
+                  />
+                )}
+                {isMobile && timepicker && (
+                  <>
+                    <CTimePicker
+                      container="inline"
+                      disabled={_startDate === null ? true : false}
+                      locale={locale}
+                      onChange={(_, __, date) => handleStartDateChange(date)}
+                      value={_startDate}
+                      variant="select"
+                    />
+                    <CTimePicker
+                      container="inline"
+                      disabled={_endDate === null ? true : false}
+                      locale={locale}
+                      onChange={(_, __, date) => handleEndDateChange(date)}
+                      value={_endDate}
+                      variant="select"
+                    />
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </CPicker>
+    )
+  },
+)
+
+CDateRangePicker.displayName = 'CDateRangePicker'
+
+CDateRangePicker.propTypes = {
+  ...CCalendar.propTypes,
+  ...CPicker.propTypes,
+  calendars: PropTypes.number,
+  inputReadOnly: PropTypes.bool,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.any)]),
+  range: PropTypes.bool,
+  ranges: PropTypes.object,
+  timepicker: PropTypes.bool,
+}

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -33,6 +34,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Configure the auto close behavior of the dropdown:
+   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   */
+  autoClose?: 'inside' | 'outside' | boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -80,6 +89,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 }
 
 interface ContextProps extends CDropdownProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }
 
@@ -90,6 +101,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     {
       children,
       alignment,
+      autoClose = true,
       className,
       dark,
       direction,
@@ -106,6 +118,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
   ) => {
     const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
+    const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
 
     const Component = variant === 'nav-item' ? 'li' : component
@@ -117,8 +130,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      autoClose,
       dark,
       direction: direction,
+      dropdownToggleRef,
       placement: placement,
       popper,
       variant,
@@ -135,19 +150,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
     )
 
-    useEffect(() => {
-      _visible &&
-        setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
-          window.addEventListener('keyup', handleKeyup)
-        })
-
-      return () => {
-        window.removeEventListener('click', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-      }
-    }, [_visible])
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -157,17 +159,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const handleKeyup = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-
     const dropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
@@ -203,6 +194,10 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection }),
     PropTypes.shape({ xxl: alignmentDirection }),
   ]),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+  ]),
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,