@coreui/react-pro 4.8.0-alpha.3 → 4.9.0-next.0

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

@@ -4,22 +4,21 @@ import classNames from 'classnames'
 
 import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
+import { CPicker, CPickerProps } from './../picker/CPicker'
 
 import { CTimePickerRollCol } from './CTimePickerRollCol'
-import { CPicker, CPickerProps } from './../picker/CPicker'
 import {
   convert12hTo24h,
   convertTimeToDate,
   getAmPm,
-  getListOfHours,
-  getListOfMinutes,
-  getListOfSeconds,
+  getLocalizedTimePartials,
   getSelectedHour,
   getSelectedMinutes,
   getSelectedSeconds,
-  isAmPm,
   isValidTime,
-} from '../../utils/time'
+} from './utils'
+
+import type { LocalizedTimePartials } from './types'
 
 export interface CTimePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
@@ -121,6 +120,17 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
     const [_visible, setVisible] = useState(visible)
 
+    const [localizedTimePartials, setLocalizedTimePartials] = useState<LocalizedTimePartials>({
+      listOfHours: [],
+      listOfMinutes: [],
+      listOfSeconds: [],
+      hour12: false,
+    })
+
+    useEffect(() => {
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+    }, [date])
+
     useEffect(() => {
       setDate(convertTimeToDate(time))
     }, [time])
@@ -129,7 +139,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {
-              hour12: (ampm === 'auto' && isAmPm(locale)) || (typeof ampm === 'boolean' && ampm),
+              hour12: localizedTimePartials && localizedTimePartials.hour12,
               ...(!seconds && { timeStyle: 'short' }),
             })
           : ''
@@ -157,7 +167,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       if (set === 'hours') {
-        if ((ampm === 'auto' && isAmPm(locale)) || ampm === true) {
+        if (localizedTimePartials && localizedTimePartials.hour12) {
           _date.setHours(convert12hTo24h(_ampm, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -224,12 +234,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <span className="time-picker-inline-icon" />
           <CFormSelect
             disabled={disabled}
-            options={getListOfHours(locale).map((option) => {
-              return {
-                value: option.value.toString(),
-                label: option.label,
-              }
-            })}
+            options={
+              localizedTimePartials &&
+              localizedTimePartials.listOfHours?.map((option) => {
+                return {
+                  value: option.value.toString(),
+                  label: option.label,
+                }
+              })
+            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
             }
@@ -238,8 +251,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <>:</>
           <CFormSelect
             disabled={disabled}
-            // @ts-expect-error the getListOfMinutes function returns corect type
-            options={getListOfMinutes(locale, true)}
+            options={
+              localizedTimePartials &&
+              localizedTimePartials.listOfMinutes.map((option) => {
+                return {
+                  value: option.value.toString(),
+                  label: option.label,
+                }
+              })
+            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
             }
@@ -250,8 +270,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               <>:</>
               <CFormSelect
                 disabled={disabled}
-                // @ts-expect-error the getListOfSeconds function returns corect type
-                options={getListOfSeconds(locale, true)}
+                options={
+                  localizedTimePartials &&
+                  localizedTimePartials.listOfSeconds.map((option) => {
+                    return {
+                      value: option.value.toString(),
+                      label: option.label,
+                    }
+                  })
+                }
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   handleTimeChange('seconds', event.target.value)
                 }
@@ -259,7 +286,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               />
             </>
           )}
-          {isAmPm(locale) && (
+          {localizedTimePartials && localizedTimePartials.hour12 && (
             <CFormSelect
               disabled={disabled}
               options={[
@@ -279,23 +306,23 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const TimePickerRoll = () => (
       <>
         <CTimePickerRollCol
-          elements={getListOfHours(locale, ampm)}
+          elements={localizedTimePartials && localizedTimePartials.listOfHours}
           onClick={(index: number) => handleTimeChange('hours', index.toString())}
           selected={getSelectedHour(date, locale, ampm)}
         />
         <CTimePickerRollCol
-          elements={getListOfMinutes(locale)}
+          elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
           onClick={(index: number) => handleTimeChange('minutes', index.toString())}
           selected={getSelectedMinutes(date)}
         />
         {seconds && (
           <CTimePickerRollCol
-            elements={getListOfSeconds(locale)}
+            elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
             onClick={(index: number) => handleTimeChange('seconds', index.toString())}
             selected={getSelectedSeconds(date)}
           />
         )}
-        {((ampm === 'auto' && isAmPm(locale)) || ampm === true) && (
+        {localizedTimePartials && localizedTimePartials.hour12 && (
           <CTimePickerRollCol
             elements={[
               { value: 'am', label: 'AM' },

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 '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface Element {
   value: number | string

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

@@ -0,0 +1,15 @@
+export type LocalizedTimePartials = {
+  listOfHours: {
+    value: number
+    label: string
+  }[]
+  listOfMinutes: {
+    value: number
+    label: string
+  }[]
+  listOfSeconds: {
+    value: number
+    label: string
+  }[]
+  hour12: boolean
+}

package/src/{utils/time.ts → components/time-picker/utils.ts}

@@ -1,3 +1,5 @@
+import type { LocalizedTimePartials } from './types'
+
 export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
   if (abbr === 'am' && hour === 12) {
     return 0
@@ -26,6 +28,7 @@ export const getAmPm = (date: Date, locale: string) => {
   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 {
@@ -36,6 +39,7 @@ export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto')
     }
   })
 
+// TODO: clean-up
 export const getListOfMinutes = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -47,10 +51,11 @@ export const getListOfMinutes = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[0],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
     }
   })
 
+// TODO: clean-up
 export const getListOfSeconds = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -62,10 +67,46 @@ export const getListOfSeconds = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[1],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+    }
+  })
+
+export const getLocalizedTimePartials = (
+  locale: string,
+  ampm: 'auto' | boolean = 'auto',
+): 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],
     }
   })
 
+  return {
+    listOfHours,
+    listOfMinutes: listOfMinutesSeconds,
+    listOfSeconds: listOfMinutesSeconds,
+    hour12,
+  }
+}
+
 export const getSelectedHour = (
   date: Date | null,
   locale: string,

package/src/components/toast/CToast.tsx

@@ -12,7 +12,7 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, UIEvent, useEffect, useRef, useState
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CVirtualScrollerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {
   /**

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 import getNextSibling from './getNextSibling'
 import getPreviousSibling from './getPreviousSibling'
-import isVisible from './isVisible'
+import isInViewport from './isInViewport'
+import isObjectInArray from './isObjectInArray'
 
-export { getNextSibling, getPreviousSibling, isVisible }
+export { getNextSibling, getPreviousSibling, isInViewport, isObjectInArray }

package/src/utils/isInViewport.ts

@@ -0,0 +1,11 @@
+const isInViewport = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    Math.floor(rect.top) >= 0 &&
+    Math.floor(rect.left) >= 0 &&
+    Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+    Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isInViewport

package/src/utils/isObjectInArray.ts

@@ -0,0 +1,14 @@
+const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
+  array.some((_item: T) => {
+    let result = true
+    for (const key in item) {
+      if (!ignore.includes(key) && item[key] !== _item[key]) {
+        result = false
+        break
+      }
+    }
+
+    return result
+  })
+
+export default isObjectInArray

package/src/utils/isVisible.ts

@@ -1,11 +0,0 @@
-const isVisible = (element: HTMLElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
-export default isVisible