@coreui/react-pro 5.0.0-rc.1 → 5.0.0-rc.2

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

@@ -20,6 +20,7 @@ import {
 
 import { Colors } from '../../types'
 import type { LocalizedTimePartials } from './types'
+import { useDebouncedCallback } from '../../hooks'
 
 export interface CTimePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
@@ -77,10 +78,22 @@ export interface CTimePickerProps
    * Set the confirm button variant to an outlined button or a ghost button.
    */
   confirmButtonVariant?: 'outline' | 'ghost'
+  /**
+   * Specify a list of available hours using an array, or customize the filtering of hours through a function.
+   *
+   * @since 5.0.0-rc.2
+   */
+  hours?: number[] | ((hour: number) => number[])
   /**
    * Toggle visibility or set the content of the input indicator.
    */
   indicator?: ReactNode | boolean
+  /**
+   * Defines the delay (in milliseconds) for the input field's onChange event.
+   *
+   * @since v5.0.0-rc.2
+   */
+  inputOnChangeDelay?: number
   /**
    * Toggle the readonly state for the component.
    */
@@ -89,6 +102,12 @@ export interface CTimePickerProps
    * Sets the default locale for components. If not set, it is inherited from the browser.
    */
   locale?: string
+  /**
+   * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.
+   *
+   * @since 5.0.0-rc.2
+   */
+  minutes?: boolean | number[] | ((minute: number) => number[])
   /**
    * Callback fired when the time changed.
    */
@@ -104,11 +123,11 @@ export interface CTimePickerProps
    */
   required?: boolean
   /**
-   * Show seconds.
+   * Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.
    *
    * @since 4.8.0
    */
-  seconds?: boolean
+  seconds?: boolean | number[] | ((second: number) => number[])
   /**
    * Size the component small or large.
    */
@@ -143,12 +162,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       feedbackInvalid,
       feedbackValid,
       footer = true,
+      hours,
       id,
       indicator = true,
+      inputOnChangeDelay = 750,
       inputReadOnly,
       invalid,
       label,
       locale = 'default',
+      minutes = true,
       onTimeChange,
       onHide,
       onShow,
@@ -191,13 +213,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }, [valid, invalid])
 
     useEffect(() => {
-      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm, hours, minutes, seconds))
 
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {
               hour12: localizedTimePartials && localizedTimePartials.hour12,
-              ...(!seconds && { timeStyle: 'short' }),
+              hour: 'numeric',
+              ...(minutes && { minute: 'numeric' }),
+              ...(seconds && { second: 'numeric' }),
             })
           : ''
       }
@@ -239,6 +263,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       setIsValid(false)
     }
 
+    const handleOnChange = useDebouncedCallback(
+      (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
+      inputOnChangeDelay,
+    )
+
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
       const _date = date || new Date('1970-01-01')
 
@@ -276,11 +305,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         <input
           autoComplete="off"
           className="time-picker-input"
-          // delay={true}
           disabled={disabled}
-          onChange={(event) =>
-            isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
-          }
+          onChange={(event) => handleOnChange(event.target.value)}
           placeholder={placeholder}
           readOnly={inputReadOnly}
           required={required}
@@ -320,22 +346,26 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                 </option>
               ))}
           </select>
-          <>:</>
-          <select
-            className="time-picker-inline-select"
-            disabled={disabled}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-              handleTimeChange('minutes', event.target.value)
-            }
-            value={getSelectedMinutes(date)}
-          >
-            {localizedTimePartials &&
-              localizedTimePartials.listOfMinutes.map((option, index) => (
-                <option value={option.value.toString()} key={index}>
-                  {option.label}
-                </option>
-              ))}
-          </select>
+          {minutes && (
+            <>
+              <>:</>
+              <select
+                className="time-picker-inline-select"
+                disabled={disabled}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                  handleTimeChange('minutes', event.target.value)
+                }
+                value={getSelectedMinutes(date)}
+              >
+                {localizedTimePartials &&
+                  localizedTimePartials.listOfMinutes.map((option, index) => (
+                    <option value={option.value.toString()} key={index}>
+                      {option.label}
+                    </option>
+                  ))}
+              </select>
+            </>
+          )}
           {seconds && (
             <>
               <>:</>
@@ -459,11 +489,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   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)}
-                />
+                {minutes && (
+                  <CTimePickerRollCol
+                    elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
+                    onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                    selected={getSelectedMinutes(date)}
+                  />
+                )}
                 {seconds && (
                   <CTimePickerRollCol
                     elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
@@ -503,10 +535,21 @@ CTimePicker.propTypes = {
   confirmButtonColor: CButton.propTypes?.color,
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
+  hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]),
+  inputOnChangeDelay: PropTypes.number,
   locale: PropTypes.string,
+  minutes: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   onTimeChange: PropTypes.func,
   required: PropTypes.bool,
-  seconds: PropTypes.bool,
+  seconds: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),
 }

package/src/components/time-picker/utils.ts

@@ -1,134 +1,194 @@
 import type { LocalizedTimePartials } from './types'
 
+/**
+ * Converts a 12-hour time format to a 24-hour time format.
+ * @param {('am' | 'pm')} abbr The abbreviation indicating AM or PM.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 24-hour format.
+ */
 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
 }
 
+/**
+ * Converts a 24-hour time format to a 12-hour format.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 12-hour format.
+ */
 export const convert24hTo12h = (hour: number) => hour % 12 || 12
 
+/**
+ * Converts a time input into a Date object.
+ * @param {Date | string | null | undefined} time The time input to be converted.
+ * @returns {Date | null} The converted Date object or null if the input is falsy.
+ */
 export const convertTimeToDate = (time: Date | string | null | undefined) =>
-  time
-    ? time instanceof Date
-      ? time
-      : new Date(`1970-01-01 ${time}`)
-    : null
+  time ? (time instanceof Date ? time : new Date(`1970-01-01 ${time}`)) : null
 
+/**
+ * Retrieves the AM/PM part of the specified date according to the given locale.
+ * @param {Date} date The date from which to extract the AM/PM part.
+ * @param {string} locale The locale to use for formatting.
+ * @returns {string} 'am' or 'pm' based on the given date and locale.
+ */
 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'
 }
 
-// TODO: clean-up
-export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>
-  Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
-    return {
-      value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
-      label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(
-        locale,
-      ),
-    }
+/**
+ * Formats an array of time values (hours, minutes, or seconds) according to the specified locale and partial.
+ * @param {number[]} values An array of time values to format.
+ * @param {string} locale The locale to use for formatting.
+ * @param {('hour' | 'minute' | 'second')} partial The type of time value to format.
+ * @returns {Array} An array of objects with the original value and its localized label.
+ */
+export const formatTimePartials = (
+  values: number[],
+  locale: string,
+  partial: 'hour' | 'minute' | 'second',
+) => {
+  const date = new Date()
+
+  const formatter = new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
   })
 
-// TODO: clean-up
-export const getListOfMinutes = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setMinutes(i)
-    return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+  return values.map((value) => {
+    if (partial === 'hour') {
+      date.setHours(value)
+    }
+
+    if (partial === 'minute') {
+      date.setMinutes(value)
+    }
+
+    if (partial === 'second') {
+      date.setSeconds(value)
     }
-  })
 
-// TODO: clean-up
-export const getListOfSeconds = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setSeconds(i)
     return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+      value,
+      label: formatter.formatToParts(date).find((part) => part.type === partial)?.value || '',
     }
   })
+}
 
+/**
+ * Generates localized time partials (hours, minutes, seconds) based on the given parameters.
+ * @param {string} locale The locale to use for generating localized time partials.
+ * @param {'auto' | boolean} ampm Determines whether to use 12-hour or 24-hour format. 'auto' decides based on locale.
+ * @param {boolean | number[] | Function} hours An array of hours, a boolean, or a function to generate hours.
+ * @param {boolean | number[] | Function} minutes An array of minutes, a boolean, or a function to generate minutes.
+ * @param {boolean | number[] | Function} seconds An array of seconds, a boolean, or a function to generate seconds.
+ * @returns {LocalizedTimePartials} An object containing arrays of localized time partials and a boolean indicating if 12-hour format is used.
+ */
 export const getLocalizedTimePartials = (
   locale: string,
   ampm: 'auto' | boolean = 'auto',
+  hours: boolean | number[] | ((hour: number) => number[]) = [],
+  minutes: boolean | number[] | ((minute: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = [],
 ): LocalizedTimePartials => {
-  const date = new Date()
-  const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el))
-  const listOfHours = Array.from(
-    { length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 },
-    (_, i) => {
-      return {
-        value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
-        label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
-      }
-    },
-  )
-  const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
-    date.setMinutes(i)
-    return {
-      value: i,
-      label: date
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
-    }
-  })
+  const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true
+
+  const listOfHours =
+    Array.isArray(hours) && hours.length > 0
+      ? hours
+      : (typeof hours === 'function'
+        ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) =>
+            hours(hour),
+          )
+        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)))
+
+  const listOfMinutes =
+    Array.isArray(minutes) && minutes.length > 0
+      ? minutes
+      : (typeof minutes === 'function'
+        ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
+        : Array.from({ length: 60 }, (_, i) => i))
+
+  const listOfSeconds =
+    Array.isArray(seconds) && seconds.length > 0
+      ? seconds
+      : (typeof seconds === 'function'
+        ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
+        : Array.from({ length: 60 }, (_, i) => i))
 
   return {
-    listOfHours,
-    listOfMinutes: listOfMinutesSeconds,
-    listOfSeconds: listOfMinutesSeconds,
+    listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
+    listOfMinutes: formatTimePartials(listOfMinutes, locale, 'minute'),
+    listOfSeconds: formatTimePartials(listOfSeconds, locale, 'second'),
     hour12,
   }
 }
 
+/**
+ * Gets the selected hour from a date object in either 12-hour or 24-hour format based on locale and preference.
+ * @param {Date | null} date The date object from which to extract the hour. If null, the function returns an empty string.
+ * @param {string} locale The locale to use when determining whether to return in 12-hour or 24-hour format.
+ * @param {'auto' | boolean} ampm Determines the format of the hour returned. 'auto' decides based on locale, true forces 12-hour format, and false forces 24-hour format.
+ * @returns {string | number} The hour in the specified format or an empty string if the date is null.
+ */
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
   ampm: 'auto' | boolean = 'auto',
 ) =>
   date
-    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
-      : date.getHours()
+      : date.getHours())
     : ''
 
+/**
+ * Gets the selected minutes from a date object.
+ * @param {Date | null} date The date object from which to extract the minutes. If null, the function returns an empty string.
+ * @returns {string | number} The minutes from the date or an empty string if the date is null.
+ */
 export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')
 
+/**
+ * Gets the selected seconds from a date object.
+ * @param {Date | null} date The date object from which to extract the seconds. If null, the function returns an empty string.
+ * @returns {string | number} The seconds from the date or an empty string if the date is null.
+ */
 export const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')
 
+/**
+ * Determines if the given locale uses AM/PM format.
+ * @param {string} locale The locale to check.
+ * @returns {boolean} True if the locale uses AM/PM format, otherwise false.
+ */
 export const isAmPm = (locale: string) =>
   ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
 
+/**
+ * Validates if the given string represents a valid time.
+ * @param {string} time The time string to validate.
+ * @returns {boolean} True if the string is a valid time, otherwise false.
+ */
 export const isValidTime = (time: string) => {
   const d = new Date(`1970-01-01 ${time}`)
   return d instanceof Date && d.getTime()

package/src/hooks/useDebouncedCallback.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback,  } from 'react'
+import { useRef, useCallback } from 'react'
 
 export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
   const timeout = useRef<ReturnType<typeof setTimeout>>()