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

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

@@ -0,0 +1,199 @@
+import type {
+  Column,
+  ColumnFilter,
+  ColumnFilterValue,
+  Item,
+  Sorter,
+  SorterValue,
+  TableFilter,
+} from './types'
+
+export const filterColumns = (
+  items: Item[],
+  columnFilter: boolean | ColumnFilter | undefined,
+  columnFilterState: ColumnFilterValue,
+  itemsDataColumns: string[],
+) => {
+  if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
+    return items
+  }
+
+  Object.entries(columnFilterState).forEach(([key, value]) => {
+    if (value instanceof Function) {
+      items = items.filter((item) => value(item[key]))
+      return
+    }
+
+    const columnFilter = String(value).toLowerCase()
+    if (columnFilter && itemsDataColumns.includes(key)) {
+      items = items.filter((item) => {
+        return String(item[key]).toLowerCase().includes(columnFilter)
+      })
+    }
+  })
+
+  return items
+}
+
+export const filterTable = (
+  items: Item[],
+  tableFilter: boolean | TableFilter | undefined,
+  tableFilterState: string,
+  itemsDataColumns: string[],
+) => {
+  if (
+    !tableFilterState ||
+    (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
+  ) {
+    return items
+  }
+
+  const filter = tableFilterState.toLowerCase()
+  const valueContainFilter = (val: any) => String(val).toLowerCase().includes(filter)
+  items = items.filter((item) => {
+    return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
+  })
+
+  return items
+}
+
+export const getClickedColumnName = (
+  target: HTMLTextAreaElement,
+  columnNames: string[],
+): string => {
+  const closest = target.closest('tr')
+  const children = closest ? Array.from(closest.children) : []
+  const clickedCell = children.filter((child) => child.contains(target))[0]
+  return columnNames[children.indexOf(clickedCell)]
+}
+
+export const getColumnKey = (column: Column | string) =>
+  typeof column === 'object' ? column.key : column
+
+export const getColumnLabel = (column: Column | string) =>
+  typeof column === 'object'
+    ? column.label !== undefined
+      ? column.label
+      : pretifyName(column.key)
+    : pretifyName(column)
+
+export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
+  columns
+    ? columns.map((column: Column) => {
+        if (typeof column === 'object') return column.key
+        else return column
+      })
+    : getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
+
+export const getColumnSorterState = (
+  key: string,
+  sorterState: SorterValue | undefined,
+): string | number => {
+  if (sorterState && sorterState.column === key) {
+    if (sorterState.state) {
+      return sorterState.state
+    }
+    return 0
+  }
+
+  return 0
+}
+
+export const getColumnValues = (items: Item[], key: string) => {
+  return items.map((item) => item[key])
+}
+
+export const getTableDataCellProps = (item: Item, colName: string) => {
+  const props = item._cellProps && {
+    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+  }
+
+  return props
+}
+
+export const getTableHeaderCellProps = (column: Column | string) => {
+  if (typeof column === 'object' && column._props) {
+    return column._props
+  }
+
+  return {}
+}
+
+export const getTableHeaderCellStyles = (
+  column: Column | string,
+  columnSorter: boolean | Sorter | undefined,
+) => {
+  const style = {}
+
+  if (
+    columnSorter &&
+    (typeof column !== 'object' ||
+      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
+  ) {
+    style['cursor'] = 'pointer'
+  }
+
+  if (typeof column === 'object' && column._style) {
+    return { ...style, ...column._style }
+  }
+  return style
+}
+
+export const isSortable = (
+  i: number,
+  columns: (string | Column)[] | undefined,
+  columnSorter: Sorter | boolean | undefined,
+  itemsDataColumns: string[],
+  columnNames: string[],
+): boolean | undefined => {
+  const isDataColumn = itemsDataColumns.includes(columnNames[i])
+  let column
+  if (columns) column = columns[i]
+  return (
+    columnSorter &&
+    (!columns ||
+      typeof column !== 'object' ||
+      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+    isDataColumn
+  )
+}
+
+export const pretifyName = (name: string) => {
+  return name
+    .replace(/[-_.]/g, ' ')
+    .replace(/ +/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export const sortItems = (
+  columnSorter: boolean | Sorter | undefined,
+  items: Item[],
+  itemsDataColumns: string[],
+  sorterState: SorterValue,
+) => {
+  const column = sorterState.column
+  if (
+    !column ||
+    !itemsDataColumns.includes(column) ||
+    (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
+  ) {
+    return items
+  }
+
+  const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
+  const sorted = items.slice().sort((item, item2) => {
+    const value = item[column]
+    const value2 = item2[column]
+    const a = typeof value === 'number' ? value : String(value).toLowerCase()
+    const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase()
+    return a > b ? 1 * flip : b > a ? -1 * flip : 0
+  })
+  return sorted
+}

package/src/components/tabs/CTabPane.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

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 isInViewport from './isInViewport'
+import isObjectInArray from './isObjectInArray'
 
-export { getNextSibling, getPreviousSibling, isInViewport }
+export { getNextSibling, getPreviousSibling, isInViewport, isObjectInArray }

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