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

package/src/components/daterangepicker/CDateRangePicker.tsx

@@ -0,0 +1,427 @@
+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 { CButton } from '../button/CButton'
+import { CCalendar, CCalendarProps } from '../calendar/CCalendar'
+import { CFormInput } from '../form/CFormInput'
+import { CInputGroup } from '../form/CInputGroup'
+import { CInputGroupText } from '../form/CInputGroupText'
+import { CPicker, CPickerProps } from '../picker/CPicker'
+import { CTimePicker } from '../timepicker/CTimePicker'
+
+import { isValidDate } from '../../utils/calendar'
+
+import { Colors } from '../Types'
+
+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
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Toggle visibility or set the content of the cleaner button.
+   */
+  cleaner?: boolean
+  /**
+   * Toggle visibility or set the content of the input indicator.
+   */
+  indicator?: 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
+  /**
+   * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  rangesButtonsColor?: Colors
+  /**
+   * Size the ranges button small or large.
+   */
+  rangesButtonsSize?: 'sm' | 'lg'
+  /**
+   * Set the ranges button variant to an outlined button or a ghost button.
+   */
+  rangesButtonsVariant?: 'outline' | 'ghost'
+  /**
+   * Default icon or character character that separates two dates.
+   */
+  separator?: ReactNode | boolean
+  /**
+   * 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,
+      calendarDate,
+      indicator = true,
+      disabled,
+      disabledDates,
+      endDate,
+      firstDayOfWeek,
+      footer,
+      inputReadOnly,
+      locale = 'default',
+      maxDate,
+      minDate,
+      navigation,
+      onEndDateChange,
+      onHide,
+      onStartDateChange,
+      onShow,
+      placeholder = ['Start date', 'End date'],
+      range = true,
+      ranges,
+      rangesButtonsColor = 'secondary',
+      rangesButtonsSize,
+      rangesButtonsVariant = 'ghost',
+      separator = true,
+      size,
+      startDate,
+      timepicker,
+      toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+
+    const inputStartRef = useRef<HTMLInputElement>(null)
+    const inputEndRef = useRef<HTMLInputElement>(null)
+    const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | null>(null)
+    const [inputEndHoverValue, setInputEndHoverValue] = useState<Date | null>(null)
+
+    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 [initialStartDate, setInitialStartDate] = useState<Date | null>(
+      startDate ? new Date(startDate) : null,
+    )
+    const [initialEndDate, setInitialEndDate] = useState<Date | null>(
+      endDate ? new Date(endDate) : null,
+    )
+    const [selectEndDate, setSelectEndDate] = useState(false)
+
+    useEffect(() => {
+      startDate && setCalendarDate(new Date(startDate))
+    }, [startDate])
+
+    useEffect(() => {
+      endDate && setCalendarDate(new Date(endDate))
+    }, [endDate])
+
+    useEffect(() => {
+      if (inputStartHoverValue) {
+        setInputValue(inputStartRef.current, inputStartHoverValue, timepicker)
+        return
+      }
+
+      setInputValue(inputStartRef.current, _startDate, timepicker)
+    }, [inputStartHoverValue, _startDate])
+
+    useEffect(() => {
+      if (inputEndHoverValue) {
+        setInputValue(inputEndRef.current, inputEndHoverValue, timepicker)
+        return
+      }
+
+      setInputValue(inputEndRef.current, _endDate, timepicker)
+    }, [inputEndHoverValue, _endDate])
+
+    const setInputValue = (
+      el: HTMLInputElement | null,
+      date: Date | null,
+      timepicker?: boolean,
+    ) => {
+      if (!el) {
+        return
+      }
+
+      if (date) {
+        el.value = timepicker ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+        return
+      }
+
+      el.value = ''
+    }
+
+    const handleCalendarCellHover = (date: Date | null) => {
+      selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date)
+    }
+
+    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)
+      setInputStartHoverValue(null)
+    }
+
+    const handleEndDateChange = (date: Date | null) => {
+      setEndDate(date)
+      setSelectEndDate(false)
+      onEndDateChange && onEndDateChange(date)
+      setInputEndHoverValue(null)
+
+      if (timepicker !== true && footer !== true) {
+        _startDate !== null && setVisible(false)
+      }
+    }
+
+    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation()
+      setStartDate(initialStartDate)
+      setEndDate(initialEndDate)
+      setInputStartHoverValue(null)
+      setInputEndHoverValue(null)
+    }
+
+    const _className = classNames('date-picker', className)
+
+    const InputGroup = () => (
+      <CInputGroup className="picker-input-group" size={size}>
+        <CFormInput
+          className={classNames({
+            hover: inputStartHoverValue,
+          })}
+          disabled={disabled}
+          placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
+          readOnly={inputReadOnly}
+          onChange={(event) => {
+            if (isValidDate(event.target.value)) {
+              setCalendarDate(new Date(event.target.value))
+              setStartDate(new Date(event.target.value))
+            }
+          }}
+          onClick={() => setSelectEndDate(false)}
+          ref={inputStartRef}
+        />
+        {range && separator !== false && (
+          <CInputGroupText>
+            {typeof separator === 'boolean' ? (
+              <span className="picker-input-group-icon date-picker-arrow-icon" />
+            ) : (
+              separator
+            )}
+          </CInputGroupText>
+        )}
+        {range && (
+          <CFormInput
+            className={classNames({
+              hover: inputEndHoverValue,
+            })}
+            disabled={disabled}
+            placeholder={placeholder[1]}
+            readOnly={inputReadOnly}
+            onChange={(event) => {
+              if (isValidDate(event.target.value)) {
+                setCalendarDate(new Date(event.target.value))
+                setEndDate(new Date(event.target.value))
+              }
+            }}
+            onClick={() => setSelectEndDate(true)}
+            ref={inputEndRef}
+          />
+        )}
+        {(indicator || cleaner) && (
+          <CInputGroupText>
+            {indicator && (
+              <span className="picker-input-group-indicator">
+                {typeof indicator === 'boolean' ? (
+                  <span className="picker-input-group-icon date-picker-input-icon" />
+                ) : (
+                  indicator
+                )}
+              </span>
+            )}
+            {cleaner && _startDate && (
+              <span
+                className="picker-input-group-cleaner"
+                role="button"
+                onClick={(event) => handleClear(event)}
+              >
+                {typeof cleaner === 'boolean' ? (
+                  <span className="picker-input-group-icon date-picker-cleaner-icon" />
+                ) : (
+                  cleaner
+                )}
+              </span>
+            )}
+          </CInputGroupText>
+        )}
+      </CInputGroup>
+    )
+
+    return (
+      <CPicker
+        className={_className}
+        disabled={disabled}
+        footer={footer || timepicker}
+        toggler={toggler ? toggler : InputGroup()}
+        onCancel={() => {
+          handleStartDateChange(initialStartDate)
+          handleEndDateChange(initialEndDate)
+        }}
+        onHide={() => {
+          setInputStartHoverValue(null)
+          setInputEndHoverValue(null)
+          onHide && onHide()
+        }}
+        onShow={() => {
+          setInitialStartDate(_startDate)
+          setInitialEndDate(_endDate)
+          onShow && onShow()
+        }}
+        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={rangesButtonsColor}
+                  key={index}
+                  onClick={() => {
+                    setStartDate(ranges[key][0])
+                    setEndDate(ranges[key][1])
+                  }}
+                  size={rangesButtonsSize}
+                  variant={rangesButtonsVariant}
+                >
+                  {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}
+                  firstDayOfWeek={firstDayOfWeek}
+                  locale={locale}
+                  maxDate={maxDate}
+                  minDate={minDate}
+                  navigation={navigation}
+                  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}
+                    onTimeChange={(_, __, date) =>
+                      index === 0 ? handleStartDateChange(date) : handleEndDateChange(date)
+                    }
+                    time={index === 0 ? _startDate : _endDate}
+                    variant="select"
+                  />
+                )}
+                {isMobile && timepicker && (
+                  <>
+                    <CTimePicker
+                      container="inline"
+                      disabled={_startDate === null ? true : false}
+                      locale={locale}
+                      onTimeChange={(_, __, date) => handleStartDateChange(date)}
+                      time={_startDate}
+                      variant="select"
+                    />
+                    <CTimePicker
+                      container="inline"
+                      disabled={_endDate === null ? true : false}
+                      locale={locale}
+                      onTimeChange={(_, __, date) => handleEndDateChange(date)}
+                      time={_endDate}
+                      variant="select"
+                    />
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </CPicker>
+    )
+  },
+)
+
+CDateRangePicker.displayName = 'CDateRangePicker'
+
+CDateRangePicker.propTypes = {
+  ...CCalendar.propTypes,
+  ...CPicker.propTypes,
+  calendars: PropTypes.number,
+  className: PropTypes.string,
+  cleaner: PropTypes.bool,
+  indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  inputReadOnly: PropTypes.bool,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.any)]),
+  range: PropTypes.bool,
+  ranges: PropTypes.object,
+  rangesButtonsColor: CButton.propTypes?.color,
+  rangesButtonsSize: CButton.propTypes?.size,
+  rangesButtonsVariant: CButton.propTypes?.variant,
+  separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  size: PropTypes.oneOf(['sm', 'lg']),
+  timepicker: PropTypes.bool,
+}

package/src/components/daterangepicker/__tests__/CDateRangePicker.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 { CDateRangePicker } from '../CDateRangePicker'
+
+test('loads and displays CDateRangePicker component', async () => {
+  const { container } = render(<CDateRangePicker />)
+  expect(container).toMatchSnapshot()
+})