@coreui/react-pro 4.13.2 → 4.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.13.2",
+  "version": "4.14.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -11,6 +11,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
+import { useDebouncedCallback } from '../../hooks'
 import { Colors } from '../../types'
 import { getLocalDateFromString } from './utils'
 
@@ -101,6 +102,24 @@ export interface CDateRangePickerProps
    * Toggle visibility or set the content of the input indicator.
    */
   indicator?: ReactNode | boolean
+  /**
+   * Custom function to format the selected date into a string according to a custom format.
+   *
+   * @since v4.14.0
+   */
+  inputDateFormat?: (date: Date) => string
+  /**
+   * Custom function to parse the input value into a valid Date object.
+   *
+   * @since v4.14.0
+   */
+  inputDateParse?: (date: string | Date) => Date
+  /**
+   * Defines the delay (in milliseconds) for the input field's onChange event.
+   *
+   * @since v4.14.0
+   */
+  inputOnChangeDelay?: number
   /**
    * Toggle the readonly state for the component.
    */
@@ -190,7 +209,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       confirmButtonColor = 'primary',
       confirmButtonSize = 'sm',
       confirmButtonVariant,
-      indicator = true,
       dayFormat,
       disabled,
       disabledDates,
@@ -202,6 +220,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       format,
       footer,
       id,
+      indicator = true,
+      inputDateFormat,
+      inputDateParse,
+      inputOnChangeDelay = 750,
       inputReadOnly,
       invalid,
       label,
@@ -270,17 +292,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [valid, invalid])
 
     useEffect(() => {
-      if (startDate) {
-        setStartDate(new Date(startDate))
-        setCalendarDate(new Date(startDate))
-      }
+      setStartDate(startDate ? new Date(startDate) : null)
+      setCalendarDate(startDate ? new Date(startDate) : new Date())
     }, [startDate])
 
     useEffect(() => {
-      if (endDate) {
-        setEndDate(new Date(endDate))
-        setCalendarDate(new Date(endDate))
-      }
+      setEndDate(endDate ? new Date(endDate) : null)
+      setCalendarDate(endDate ? new Date(endDate) : new Date())
     }, [endDate])
 
     useEffect(() => {
@@ -326,7 +344,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [formRef, _startDate, _endDate])
 
     const formatDate = (date: Date) => {
-      return format
+      return inputDateFormat
+        ? inputDateFormat(date)
+        : format
         ? dateFormat(date, format)
         : timepicker
         ? date.toLocaleString(locale)
@@ -402,6 +422,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }
 
+    const handleOnChange = useDebouncedCallback((value: string, input: string) => {
+      const date = inputDateParse
+        ? inputDateParse(value)
+        : getLocalDateFromString(value, locale, timepicker)
+      if (date instanceof Date && date.getTime()) {
+        setCalendarDate(date)
+        input === 'start' ? setStartDate(date) : setEndDate(date)
+      }
+    }, inputOnChangeDelay)
+
     const InputGroup = () => (
       <div
         className={classNames('input-group', 'picker-input-group', {
@@ -419,11 +449,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           readOnly={inputReadOnly || typeof format === 'string'}
           required={required}
           onChange={(event) => {
-            const date = getLocalDateFromString(event.target.value, locale, timepicker)
-            if (date instanceof Date && date.getTime()) {
-              setCalendarDate(date)
-              setStartDate(date)
-            }
+            handleOnChange(event.target.value, 'start')
           }}
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
@@ -439,18 +465,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className={classNames('form-control date-picker-input', {
               hover: inputEndHoverValue,
             })}
-
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
             readOnly={inputReadOnly || typeof format === 'string'}
             required={required}
             onChange={(event) => {
-              const date = getLocalDateFromString(event.target.value, locale, timepicker)
-              if (date instanceof Date && date.getTime()) {
-                setCalendarDate(date)
-                setEndDate(date)
-              }
+              handleOnChange(event.target.value, 'end')
             }}
             onClick={() => setSelectEndDate(true)}
             ref={inputEndRef}
@@ -692,6 +713,9 @@ CDateRangePicker.propTypes = {
   confirmButtonVariant: CButton.propTypes?.variant,
   id: PropTypes.string,
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  inputDateFormat: PropTypes.func,
+  inputDateParse: PropTypes.func,
+  inputOnChangeDelay: PropTypes.number,
   inputReadOnly: PropTypes.bool,
   placeholder: PropTypes.oneOfType([
     PropTypes.string,

package/src/components/smart-table/CSmartTable.tsx

@@ -467,7 +467,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         {(pagination || itemsPerPageSelect) && (
           <div className="row">
             <div className="col">
-              {((pagination && numberOfPages > 1) || paginationProps) && (
+              {((pagination && numberOfPages > 1) || (paginationProps && paginationProps.pages > 1)) && (
                 <CSmartPagination
                   activePage={_activePage}
                   onActivePageChange={(page) => {

package/src/components/time-picker/CTimePicker.tsx

@@ -183,7 +183,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     })
 
     useEffect(() => {
-      setDate(convertTimeToDate(time))
+      setDate(time ? convertTimeToDate(time) : null)
     }, [time])
 
     useEffect(() => {
@@ -390,38 +390,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       )
     }
 
-    const TimePickerRoll = () => (
-      <>
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfHours}
-          onClick={(index: number) => handleTimeChange('hours', index.toString())}
-          selected={getSelectedHour(date, locale, ampm)}
-        />
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
-          onClick={(index: number) => handleTimeChange('minutes', index.toString())}
-          selected={getSelectedMinutes(date)}
-        />
-        {seconds && (
-          <CTimePickerRollCol
-            elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
-            onClick={(index: number) => handleTimeChange('seconds', index.toString())}
-            selected={getSelectedSeconds(date)}
-          />
-        )}
-        {localizedTimePartials && localizedTimePartials.hour12 && (
-          <CTimePickerRollCol
-            elements={[
-              { value: 'am', label: 'AM' },
-              { value: 'pm', label: 'PM' },
-            ]}
-            onClick={(value: string) => handleTimeChange('toggle', value)}
-            selected={_ampm}
-          />
-        )}
-      </>
-    )
-
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -499,7 +467,39 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               ['time-picker-roll']: variant === 'roll',
             })}
           >
-            {variant === 'select' ? <TimePickerSelect /> : TimePickerRoll()}
+            {variant === 'select' ? (
+              <TimePickerSelect />
+            ) : (
+              <>
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfHours}
+                  onClick={(index: number) => handleTimeChange('hours', index.toString())}
+                  selected={getSelectedHour(date, locale, ampm)}
+                />
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
+                  onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                  selected={getSelectedMinutes(date)}
+                />
+                {seconds && (
+                  <CTimePickerRollCol
+                    elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
+                    onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+                    selected={getSelectedSeconds(date)}
+                  />
+                )}
+                {localizedTimePartials && localizedTimePartials.hour12 && (
+                  <CTimePickerRollCol
+                    elements={[
+                      { value: 'am', label: 'AM' },
+                      { value: 'pm', label: 'PM' },
+                    ]}
+                    onClick={(value: string) => handleTimeChange('toggle', value)}
+                    selected={_ampm}
+                  />
+                )}
+              </>
+            )}
           </div>
         </CPicker>
       </CFormControlWrapper>

package/src/components/time-picker/CTimePickerRollCol.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
+import { useForkedRef, useIsVisible } from '../../hooks'
 
 export interface Element {
   value: number | string
@@ -20,18 +20,21 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
     const init = useRef(true)
     const colRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, colRef)
+    const isVisible = useIsVisible(colRef)
 
     useEffect(() => {
       const nodeEl = colRef.current?.querySelector('.selected')
-      if (nodeEl && nodeEl instanceof HTMLElement) {
+      if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.current?.scrollTo({
           top: nodeEl.offsetTop,
           behavior: init.current ? 'auto' : 'smooth',
         })
       }
 
-      init.current = false
-    }, [selected])
+      if (isVisible) {
+        init.current = false
+      }
+    }, [isVisible, selected])
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
+import { useDebouncedCallback } from './useDebouncedCallback'
 import { useForkedRef } from './useForkedRef'
+import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useForkedRef, usePopper, useStateWithCallback }
+export { useDebouncedCallback, useForkedRef, useIsVisible, usePopper, useStateWithCallback }

package/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,18 @@
+import { useRef, useCallback,  } from 'react'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = useRef<ReturnType<typeof setTimeout>>()
+
+  return useCallback(
+    (...args: any[]) => {
+      const handler = () => {
+        clearTimeout(timeout.current)
+        callback(...args)
+      }
+
+      clearTimeout(timeout.current)
+      timeout.current = setTimeout(handler, delay)
+    },
+    [callback, delay],
+  )
+}

package/src/hooks/useIsVisible.ts

@@ -0,0 +1,14 @@
+import { RefObject, useEffect, useState } from 'react'
+
+export const useIsVisible = (ref: RefObject<HTMLElement>) => {
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))
+
+    ref.current && observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return isIntersecting
+}