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

package/src/components/daterangepicker/CDateRangePicker.tsx

@@ -3,14 +3,17 @@ 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 { 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'>,
@@ -20,21 +23,17 @@ export interface CDateRangePickerProps
    */
   calendars?: number
   /**
-   * Enables selection cleaner element.
-   */
-  cleaner?: boolean
-  /**
-   * Cleaner icon.
+   * A string of all className you want applied to the component.
    */
-  cleanerIcon?: ReactNode | boolean
+  className?: string
   /**
-   * Default input icon.
+   * Toggle visibility or set the content of the cleaner button.
    */
-  defaultIcon?: ReactNode | boolean
+  cleaner?: boolean
   /**
-   * Default icon between date input fields.
+   * Toggle visibility or set the content of the input indicator.
    */
-  infixIcon?: ReactNode | boolean
+  indicator?: ReactNode | boolean
   /**
    * Toggle the readonly state for the component.
    */
@@ -51,6 +50,24 @@ export interface CDateRangePickerProps
    * 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.
    */
@@ -67,17 +84,18 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       calendars = 2,
       className,
       cleaner = true,
-      cleanerIcon,
       calendarDate,
+      indicator = true,
       disabled,
       disabledDates,
       endDate,
-      defaultIcon,
-      infixIcon,
+      firstDayOfWeek,
+      footer,
       inputReadOnly,
-      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
+      locale = 'default',
       maxDate,
       minDate,
+      navigation,
       onEndDateChange,
       onHide,
       onStartDateChange,
@@ -85,6 +103,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       placeholder = ['Start date', 'End date'],
       range = true,
       ranges,
+      rangesButtonsColor = 'secondary',
+      rangesButtonsSize,
+      rangesButtonsVariant = 'ghost',
+      separator = true,
       size,
       startDate,
       timepicker,
@@ -94,17 +116,25 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     },
     ref,
   ) => {
+    const [_visible, setVisible] = useState(visible)
+
     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 [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))
@@ -115,41 +145,43 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [endDate])
 
     useEffect(() => {
-      _visible && onShow && onShow()
-      !_visible && onHide && onHide()
-    }, [_visible])
+      if (inputStartHoverValue) {
+        setInputValue(inputStartRef.current, inputStartHoverValue, timepicker)
+        return
+      }
+
+      setInputValue(inputStartRef.current, _startDate, timepicker)
+    }, [inputStartHoverValue, _startDate])
 
     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 = ''
+      if (inputEndHoverValue) {
+        setInputValue(inputEndRef.current, inputEndHoverValue, timepicker)
+        return
       }
-    }, [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 = ''
+      setInputValue(inputEndRef.current, _endDate, timepicker)
+    }, [inputEndHoverValue, _endDate])
+
+    const setInputValue = (
+      el: HTMLInputElement | null,
+      date: Date | null,
+      timepicker?: boolean,
+    ) => {
+      if (!el) {
+        return
       }
-    }, [inputToHoverValue, _endDate])
+
+      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
@@ -161,30 +193,26 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       setStartDate(date)
       range && setSelectEndDate(true)
       onStartDateChange && onStartDateChange(date)
-      setInputHoverValue(null)
+      setInputStartHoverValue(null)
     }
 
     const handleEndDateChange = (date: Date | null) => {
       setEndDate(date)
       setSelectEndDate(false)
       onEndDateChange && onEndDateChange(date)
-      setInputToHoverValue(null)
+      setInputEndHoverValue(null)
 
-      if (timepicker !== true) {
+      if (timepicker !== true && footer !== 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)
+      setStartDate(initialStartDate)
+      setEndDate(initialEndDate)
+      setInputStartHoverValue(null)
+      setInputEndHoverValue(null)
     }
 
     const _className = classNames('date-picker', className)
@@ -193,43 +221,55 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       <CInputGroup className="picker-input-group" size={size}>
         <CFormInput
           className={classNames({
-            hover: inputHoverValue,
+            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 && infixIcon !== false && (
+        {range && separator !== false && (
           <CInputGroupText>
-            {infixIcon ? (
-              infixIcon
-            ) : (
+            {typeof separator === 'boolean' ? (
               <span className="picker-input-group-icon date-picker-arrow-icon" />
+            ) : (
+              separator
             )}
           </CInputGroupText>
         )}
         {range && (
           <CFormInput
             className={classNames({
-              hover: inputToHoverValue,
+              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}
           />
         )}
-        {(defaultIcon !== false || cleaner) && (
+        {(indicator || cleaner) && (
           <CInputGroupText>
-            {defaultIcon !== false && (
+            {indicator && (
               <span className="picker-input-group-indicator">
-                {defaultIcon ? (
-                  defaultIcon
-                ) : (
+                {typeof indicator === 'boolean' ? (
                   <span className="picker-input-group-icon date-picker-input-icon" />
+                ) : (
+                  indicator
                 )}
               </span>
             )}
@@ -239,10 +279,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                 role="button"
                 onClick={(event) => handleClear(event)}
               >
-                {cleanerIcon ? (
-                  cleanerIcon
-                ) : (
+                {typeof cleaner === 'boolean' ? (
                   <span className="picker-input-group-icon date-picker-cleaner-icon" />
+                ) : (
+                  cleaner
                 )}
               </span>
             )}
@@ -255,11 +295,21 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       <CPicker
         className={_className}
         disabled={disabled}
-        footer={timepicker}
+        footer={footer || timepicker}
         toggler={toggler ? toggler : InputGroup()}
-        onCancelClick={() => {
-          handleStartDateChange(startDate ? new Date(startDate) : null)
-          handleEndDateChange(endDate ? new Date(endDate) : null)
+        onCancel={() => {
+          handleStartDateChange(initialStartDate)
+          handleEndDateChange(initialEndDate)
+        }}
+        onHide={() => {
+          setInputStartHoverValue(null)
+          setInputEndHoverValue(null)
+          onHide && onHide()
+        }}
+        onShow={() => {
+          setInitialStartDate(_startDate)
+          setInitialEndDate(_endDate)
+          onShow && onShow()
         }}
         visible={_visible}
         {...rest}
@@ -270,13 +320,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             <div className="date-picker-ranges">
               {Object.keys(ranges).map((key: string, index: number) => (
                 <CButton
-                  color="secondary"
+                  color={rangesButtonsColor}
                   key={index}
                   onClick={() => {
                     setStartDate(ranges[key][0])
                     setEndDate(ranges[key][1])
                   }}
-                  variant="ghost"
+                  size={rangesButtonsSize}
+                  variant={rangesButtonsVariant}
                 >
                   {key}
                 </CButton>
@@ -292,9 +343,11 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                   }
                   disabledDates={disabledDates}
                   endDate={_endDate}
+                  firstDayOfWeek={firstDayOfWeek}
                   locale={locale}
                   maxDate={maxDate}
                   minDate={minDate}
+                  navigation={navigation}
                   range={range}
                   selectEndDate={selectEndDate}
                   startDate={_startDate}
@@ -316,10 +369,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                         : false
                     }
                     locale={locale}
-                    onChange={(_, __, date) =>
+                    onTimeChange={(_, __, date) =>
                       index === 0 ? handleStartDateChange(date) : handleEndDateChange(date)
                     }
-                    value={index === 0 ? _startDate : _endDate}
+                    time={index === 0 ? _startDate : _endDate}
                     variant="select"
                   />
                 )}
@@ -329,16 +382,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                       container="inline"
                       disabled={_startDate === null ? true : false}
                       locale={locale}
-                      onChange={(_, __, date) => handleStartDateChange(date)}
-                      value={_startDate}
+                      onTimeChange={(_, __, date) => handleStartDateChange(date)}
+                      time={_startDate}
                       variant="select"
                     />
                     <CTimePicker
                       container="inline"
                       disabled={_endDate === null ? true : false}
                       locale={locale}
-                      onChange={(_, __, date) => handleEndDateChange(date)}
-                      value={_endDate}
+                      onTimeChange={(_, __, date) => handleEndDateChange(date)}
+                      time={_endDate}
                       variant="select"
                     />
                   </>
@@ -358,9 +411,17 @@ 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()
+})