@coreui/react-pro 5.5.0 → 5.6.0

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

@@ -14,26 +14,31 @@ export const filterColumns = (
   columnFilter: boolean | ColumnFilter | undefined,
   columnFilterState: ColumnFilterValue,
   itemsDataColumns: string[],
-) => {
+): Item[] => {
   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
-    }
+  if (Object.entries(columnFilterState).length === 0) {
+    return items
+  }
 
-    const columnFilter = String(value).toLowerCase()
-    if (columnFilter && itemsDataColumns.includes(key)) {
-      items = items.filter((item) => {
-        return String(item[key]).toLowerCase().includes(columnFilter)
-      })
+  let filteredItems = [...items]
+
+  for (const [key, value] of Object.entries(columnFilterState)) {
+    if (typeof value === 'function') {
+      filteredItems = filteredItems.filter((item) => value(item[key]))
+    } else {
+      const columnFilterValue = String(value).toLowerCase()
+      if (columnFilterValue && itemsDataColumns.includes(key)) {
+        filteredItems = filteredItems.filter((item) =>
+          String(item[key]).toLowerCase().includes(columnFilterValue),
+        )
+      }
     }
-  })
+  }
 
-  return items
+  return filteredItems
 }
 
 export const filterTable = (
@@ -41,7 +46,7 @@ export const filterTable = (
   tableFilter: boolean | TableFilter | undefined,
   tableFilterState: string,
   itemsDataColumns: string[],
-) => {
+): Item[] => {
   if (
     !tableFilterState ||
     (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
@@ -50,43 +55,46 @@ export const filterTable = (
   }
 
   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
+  return items.filter((item) =>
+    itemsDataColumns.some((key) => String(item[key]).toLowerCase().includes(filter)),
+  )
 }
 
 export const getClickedColumnName = (
-  target: HTMLTextAreaElement,
+  target: HTMLElement,
   columnNames: string[],
-  selectable: boolean | undefined
+  selectable?: boolean,
 ): string => {
-  const closest = target.closest('tr')
-  const children = closest ? Array.from(closest.children) : []
-  const clickedCell = children.filter((child) => child.contains(target))[0]
-  return selectable ? columnNames[children.indexOf(clickedCell) - 1]  : columnNames[children.indexOf(clickedCell)]
-}
+  const clickedCell = target.closest('td')
+  if (!clickedCell) {
+    return ''
+  }
 
-export const getColumnKey = (column: Column | string) =>
-  typeof column === 'object' ? column.key : column
+  const row = clickedCell.closest('tr')
+  if (!row) {
+    return ''
+  }
 
-export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object'
-    ? column.label !== undefined
-      ? column.label
-      : pretifyName(column.key)
-    : pretifyName(column)
+  const cells = Array.from(row.children)
+  let index = cells.indexOf(clickedCell)
 
-export const getColumnName = (column: string | Column) => {
-  if (typeof column === 'object') {
-    return column.key
+  if (selectable) {
+    index -= 1
   }
 
-  return column
+  return columnNames[index] || ''
 }
 
+export const getColumnKey = (column: Column | string): string =>
+  typeof column === 'object' ? column.key : column
+
+export const getColumnLabel = (column: Column | string): string =>
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
+
+export const getColumnName = (column: Column | string): string =>
+  typeof column === 'object' ? column.key : column
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -128,23 +136,22 @@ export const getColumns = (_columns: (Column | Group | string)[]): (Column | str
   return columns
 }
 
-export const countColumns = (columns: Column[], counter = 0) => {
-  let _counter = counter
-  for (const column of columns) {
-    if (!column.children) {
-      _counter++
-    }
+export const countColumns = (columns: Column[]): number => {
+  let count = 0
 
-    if (column.children) {
-      _counter = countColumns(column.children, _counter)
+  for (const column of columns) {
+    if (!column.children || column.children.length === 0) {
+      count++
+    } else {
+      count += countColumns(column.children)
     }
   }
 
-  return _counter
+  return count
 }
 
-export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
-  const groups = []
+export const getColumnGroups = (columns: (string | Column)[] | undefined): Group[][] => {
+  const groups: Group[][] = []
 
   const traverseColumns = (column: Column, deep = 0, colSpan = 0): Group[] => {
     const groups = []
@@ -205,103 +212,96 @@ export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
   return groups
 }
 
-export const getColumnNamesFromItems = (items: Item[]) =>
+export const getColumnNamesFromItems = (items: Item[]): string[] =>
   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
+export const getColumnSorterFunction = (column: Column | undefined) => {
+  if (
+    column &&
+    typeof column === 'object' &&
+    column.sorter &&
+    typeof column.sorter === 'function'
+  ) {
+    return column.sorter
   }
 
-  return 0
-}
-
-export const getColumnValues = (items: Item[], key: string) => {
-  return items.map((item) => item[key])
+  return
 }
 
-export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
-  const props = {}
+export const getColumnSorterState = (key: string, sorterState?: SorterValue[]): string | number => {
+  const state = sorterState && sorterState.find((el) => el.column === key)
 
-  if (typeof column === 'object' && column._colProps) {
-    Object.assign(props, column._colProps)
-  }
+  return state ? state.state : 0
+}
 
-  if (item._cellProps && item._cellProps['all']) {
-    Object.assign(props, item._cellProps['all'])
-  }
+export const getColumnValues = (items: Item[], key: string): any[] => items.map((item) => item[key])
 
-  if (item._cellProps && item._cellProps[colName]) {
-    Object.assign(props, item._cellProps[colName])
+export const getTableDataCellProps = (
+  column: Column | string,
+  item: Item,
+  colName: string,
+): Record<string, any> => {
+  const props = {
+    ...(typeof column === 'object' && column._colProps),
+    ...item._cellProps?.all,
+    ...item._cellProps?.[colName],
   }
 
   return props
 }
 
-export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
-  const styles = {}
-
-  if (typeof column === 'object' && column._colStyle) {
-    Object.assign(styles, column._colStyle)
-  }
-
-  if (item._cellStyle && item._cellStyle['all']) {
-    Object.assign(styles, item._cellStyle['all'])
-  }
-
-  if (item._cellStyle && item._cellStyle[colName]) {
-    Object.assign(styles, item._cellStyle[colName])
+export const getTableDataCellStyles = (
+  column: Column | string,
+  item: Item,
+  colName: string,
+): Record<string, any> => {
+  const styles = {
+    ...(typeof column === 'object' && column._colStyle),
+    ...item._cellStyle?.all,
+    ...item._cellStyle?.[colName],
   }
 
   return styles
 }
 
-export const getTableHeaderCellProps = (column: Column | string) => {
-  if (typeof column === 'object' && column._props) {
-    return column._props
-  }
-
-  return {}
-}
+export const getTableHeaderCellProps = (column: Column | string) =>
+  typeof column === 'object' && column._props ? column._props : {}
 
 export const getTableHeaderCellStyles = (
   column: Column | string,
   columnSorter: boolean | Sorter | undefined,
-) => {
-  const style = {}
+): Record<string, any> => {
+  const style: Record<string, any> = {}
 
-  if (
+  const isSortable =
     columnSorter &&
     (typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
-  ) {
-    (style as { [key: string]: string })['cursor'] = 'pointer'
+
+  if (isSortable) {
+    style.cursor = 'pointer'
   }
 
   if (typeof column === 'object' && column._style) {
-    return { ...style, ...column._style }
+    Object.assign(style, column._style)
   }
+
   return style
 }
 
 export const isSortable = (
-  i: number,
+  index: number,
   columns: (string | Column)[] | undefined,
-  columnSorter: Sorter | boolean | undefined,
+  columnSorter: boolean | Sorter | undefined,
   itemsDataColumns: string[],
   columnNames: string[],
-): boolean | undefined => {
-  const isDataColumn = itemsDataColumns.includes(columnNames[i])
-  let column
-  if (columns) column = columns[i]
+): boolean => {
+  const key = columnNames[index]
+  const isDataColumn = itemsDataColumns.includes(key)
+  const column = columns ? columns[index] : undefined
+
   return (
-    columnSorter &&
+    !!columnSorter &&
     (!columns ||
       typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
@@ -309,7 +309,7 @@ export const isSortable = (
   )
 }
 
-export const pretifyName = (name: string) => {
+export const pretifyName = (name: string): string => {
   return name
     .replace(/[-_.]/g, ' ')
     .replace(/ +/g, ' ')
@@ -319,28 +319,59 @@ export const pretifyName = (name: string) => {
     .join(' ')
 }
 
+export const sortBy = (
+  column: Column | undefined,
+  items: Item[],
+  key: string,
+  order: SorterValue['state'],
+): Item[] => {
+  const sorterFunction = getColumnSorterFunction(column)
+
+  const sortedItems = [...items].sort(
+    sorterFunction ||
+      ((a, b) => {
+        const valA = a[key]
+        const valB = b[key]
+        const aValue = typeof valA === 'number' ? valA : String(valA).toLowerCase()
+        const bValue = typeof valB === 'number' ? valB : String(valB).toLowerCase()
+        return aValue > bValue ? 1 : bValue > aValue ? -1 : 0
+      }),
+  )
+
+  return order === 'desc' ? sortedItems.reverse() : sortedItems
+}
+
 export const sortItems = (
+  columns: (Column | string)[] | undefined,
   columnSorter: boolean | Sorter | undefined,
   items: Item[],
   itemsDataColumns: string[],
-  sorterState: SorterValue,
-) => {
-  const column = sorterState.column
+  sorterState: SorterValue[],
+): Item[] => {
   if (
-    !column ||
-    !itemsDataColumns.includes(column) ||
-    (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
+    (columnSorter && typeof columnSorter === 'object' && columnSorter.external) ||
+    sorterState.length === 0
   ) {
     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
+  let sortedItems = [...items]
+
+  for (const sorter of [...sorterState].reverse()) {
+    const key = sorter.column
+    const order = sorter.state
+    const column =
+      columns &&
+      (columns.find((column) => typeof column === 'object' && column.key === key) as
+        | Column
+        | undefined)
+
+    if (!key || !itemsDataColumns.includes(key)) {
+      continue
+    }
+
+    sortedItems = sortBy(column, sortedItems, key, order)
+  }
+
+  return sortedItems
 }

package/src/components/tabs/CTab.tsx

@@ -9,6 +9,10 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
   /**
    * Item key.
    */
@@ -50,6 +54,7 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
 CTab.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
   itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 

package/src/components/toast/CToast.tsx

@@ -44,7 +44,7 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   /**
    * @ignore
    */
-  key?: number
+  innerKey?: number | string
   /**
    * Callback fired when the component requests to be closed.
    */
@@ -76,7 +76,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       color,
       delay = 5000,
       index,
-      key,
+      innerKey,
       visible = false,
       onClose,
       onShow,
@@ -143,7 +143,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
               onMouseEnter={() => clearTimeout(timeout.current)}
               onMouseLeave={() => _autohide()}
               {...rest}
-              key={key}
+              key={innerKey}
               ref={forkedRef}
             >
               {children}
@@ -163,7 +163,10 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  key: PropTypes.number,
+  innerKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

package/src/components/toast/CToaster.tsx

@@ -45,7 +45,7 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
         ...state,
         React.cloneElement(push, {
           index: index.current,
-          key: index.current,
+          innerKey: index.current,
           onClose: (index: number) =>
             setToasts((state) => state.filter((i) => i.props.index !== index)),
         }),

package/src/utils/index.ts

@@ -2,6 +2,7 @@ import executeAfterTransition from './executeAfterTransition'
 import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getTransitionDurationFromElement from './getTransitionDurationFromElement'
+import isEqual from './isEqual'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
@@ -11,6 +12,7 @@ export {
   getNextActiveElement,
   getRTLPlacement,
   getTransitionDurationFromElement,
+  isEqual,
   isInViewport,
   isObjectInArray,
   isRTL,

package/src/utils/isEqual.ts

@@ -0,0 +1,58 @@
+const isEqual = (a: any, b: any): boolean => {
+  if (a === b) return true
+
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    if (a.constructor !== b.constructor) return false
+
+    let length: number, i: number | [any, any], keys: string[]
+    if (Array.isArray(a)) {
+      length = a.length
+      if (length !== b.length) return false
+      for (i = length; i-- !== 0; ) if (!isEqual(a[i], b[i])) return false
+      return true
+    }
+
+    if (a instanceof Map && b instanceof Map) {
+      if (a.size !== b.size) return false
+      for (i of a.entries()) if (!b.has(i[0])) return false
+      for (i of a.entries()) if (!isEqual(i[1], b.get(i[0]))) return false
+      return true
+    }
+
+    if (a instanceof Set && b instanceof Set) {
+      if (a.size !== b.size) return false
+      for (i of a.entries()) if (!b.has(i[0])) return false
+      return true
+    }
+
+    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+      length = a.length
+      if (length !== b.length) return false
+      for (i = length; i-- !== 0; ) if (a[i] !== b[i]) return false
+      return true
+    }
+
+    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags
+    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf()
+    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString()
+
+    keys = Object.keys(a)
+    length = keys.length
+    if (length !== Object.keys(b).length) return false
+
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false
+
+    for (i = length; i-- !== 0; ) {
+      var key: string = keys[i]
+
+      if (!isEqual(a[key], b[key])) return false
+    }
+
+    return true
+  }
+
+  return a !== a && b !== b
+}
+
+export default isEqual