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

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

@@ -1,81 +1,24 @@
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react'
+
 import { CSmartPaginationProps } from '../smart-pagination/CSmartPagination'
 import { CTableProps } from '../table/CTable'
-import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableBodyProps } from '../table/CTableBody'
 import { CTableFootProps } from '../table/CTableFoot'
-import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
-import { CTableRowProps } from '../table/CTableRow'
 import { CTableHeadProps } from '../table/CTableHead'
 
-export interface Column {
-  filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode)
-  label?: string
-  key: string
-  sorter?: boolean
-  _style?: any
-  _props?: CTableHeaderCellProps
-}
-
-export interface ColumnFilter {
-  lazy?: boolean
-  external?: boolean
-}
-
-export interface ColumnFilterValue {
-  [key: string]: any
-}
-
-export interface FooterItem {
-  label?: string
-  _props?: CTableDataCellProps
-}
-
-export interface Item {
-  [key: string]: number | string | any
-  _cellProps?: any
-  _props?: CTableRowProps
-  _selected?: boolean
-}
-
-export interface ItemInternal extends Item {
-  _id: number
-}
-
-export interface ItemsPerPageSelect {
-  external?: boolean
-  label?: string
-  values?: Array<number>
-}
-
-export interface Pagination {
-  external?: boolean
-}
-
-export interface Sorter {
-  resetable?: boolean
-  external?: boolean
-}
-
-export interface ScopedColumns {
-  [key: string]: any
-  details?: (a: Item, b: number) => ReactNode
-}
-
-export interface SorterValue {
-  column?: string
-  state?: number | string
-}
-
-export interface TableFilter {
-  lazy?: boolean
-  external?: boolean
-}
-
-export interface NoItemsView {
-  noResults?: string
-  noItems?: string
-}
+import type {
+  Column,
+  ColumnFilter,
+  ColumnFilterValue,
+  FooterItem,
+  Item,
+  ItemsPerPageSelect,
+  Pagination,
+  Sorter,
+  ScopedColumns,
+  SorterValue,
+  TableFilter,
+} from './types'
 
 export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -125,6 +68,12 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
    */
   columnSorter?: boolean | Sorter
+  /**
+   * ReactNode for passing custom CElementCover content.
+   *
+   * @since 4.9.0
+   */
+  elementCover?: ReactNode
   /**
    * If `true` Displays table footer, which mirrors table header. (without column filter).
    * Or Array of objects or strings, where each element represents one cell in the table footer.
@@ -144,8 +93,14 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    *
    * Example item:
    * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
+   *
+   * @since 4.9.0
    */
   items?: Item[]
+  /**
+   * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+   */
+  itemsNumber?: number
   /**
    * Number of items per site, when pagination is enabled.
    */
@@ -193,6 +148,12 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * Row click callback.
    */
   onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
+  /**
+   * Select all callback.
+   *
+   * @since 4.9.0
+   */
+  onSelectAll?: () => void
   /**
    * Selected items change callback.
    */
@@ -221,6 +182,23 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * Add checkboxes to make table rows selectable.
    */
   selectable?: boolean
+  /**
+   * Enables select all checkbox displayed in the header of the table.
+   *
+   * Can be customized, by passing prop as object with additional options as keys. Available options:
+   * - external (Boolean) - Disables automatic selection inside the component.
+   *
+   * @since 4.9.0
+   */
+  selectAll?: boolean | { external?: boolean }
+  /**
+   * Array of selected objects, where each object represents one item - row in table.
+   *
+   * Example item: `{ name: 'John' , age: 12 }`
+   *
+   * @since 4.9.0
+   */
+  selected?: Item[]
   /**
    * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
    */

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

@@ -1,8 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import { CFormLabel } from '../form/CFormLabel'
-import { CFormSelect } from '../form/CFormSelect'
+import { CFormLabel, CFormSelect } from '../form/'
 
 interface CSmartTableItemsPerPageSelectorProps extends HTMLAttributes<HTMLSelectElement> {
   itemsPerPage?: number

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react'
+
+import { CTableDataCellProps } from '../table/CTableDataCell'
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
+import { CTableRowProps } from '../table/CTableRow'
+
+export type Column = {
+  filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode)
+  key: string
+  label?: string
+  sorter?: boolean
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
+export type ColumnFilter = {
+  lazy?: boolean
+  external?: boolean
+}
+
+export type ColumnFilterValue = {
+  [key: string]: any
+}
+
+export type FooterItem = {
+  label?: string
+  _props?: CTableDataCellProps
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  _cellProps?: any
+  _props?: CTableRowProps
+  _selected?: boolean
+}
+
+export type ItemsPerPageSelect = {
+  external?: boolean
+  label?: string
+  values?: Array<number>
+}
+
+export type Pagination = {
+  external?: boolean
+}
+
+export type Sorter = {
+  resetable?: boolean
+  external?: boolean
+}
+
+export type ScopedColumns = {
+  [key: string]: any
+  details?: (a: Item, b: number) => ReactNode
+}
+
+export type SorterValue = {
+  column?: string
+  state?: number | string
+}
+
+export type TableFilter = {
+  lazy?: boolean
+  external?: boolean
+}

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

@@ -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 | string) => {
+        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/spinner/CSpinner.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**

package/src/components/table/CTable.tsx

@@ -1,17 +1,21 @@
-import React, { forwardRef, TableHTMLAttributes } from 'react'
+import React, { forwardRef, TableHTMLAttributes, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CTableHead, CTableHeadProps } from './CTableHead'
-import { CTableHeaderCell, CTableHeaderCellProps } from './CTableHeaderCell'
+import { CTableHeaderCell } from './CTableHeaderCell'
 import { CTableBody } from './CTableBody'
-import { CTableDataCell, CTableDataCellProps } from './CTableDataCell'
-import { CTableRow, CTableRowProps } from './CTableRow'
+import { CTableDataCell } from './CTableDataCell'
+import { CTableRow } from './CTableRow'
 import { CTableFoot, CTableFootProps } from './CTableFoot'
 import { CTableCaption } from './CTableCaption'
 import { CTableResponsiveWrapper } from './CTableResponsiveWrapper'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+import { getColumnLabel, getColumnNames } from './utils'
+import type { Column, FooterItem, Item } from './types'
+
 export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
   /**
    * Set the vertical aligment.
@@ -123,23 +127,6 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
   tableHeadProps?: CTableHeadProps
 }
 
-export interface Column {
-  label?: string
-  key: string
-  _style?: any
-  _props?: CTableHeaderCellProps
-}
-
-export interface Item {
-  [key: string]: number | string | any
-  _props?: CTableRowProps
-}
-
-export interface FooterItem {
-  label?: string
-  _props?: CTableDataCellProps
-}
-
 export const CTable = forwardRef<HTMLTableElement, CTableProps>(
   (
     {
@@ -183,29 +170,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       className,
     )
 
-    const rawColumnNames = columns
-      ? columns.map((column: Column) => {
-          if (typeof column === 'object') return column.key
-          else return column
-        })
-      : Object.keys((items && items[0]) || {}).filter((el) => el.charAt(0) !== '_')
-
-    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(' ')
-    }
-
-    const label = (column: Column | string) =>
-      typeof column === 'object'
-        ? column.label !== undefined
-          ? column.label
-          : pretifyName(column.key)
-        : pretifyName(column)
+    const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
 
     return (
       <CTableResponsiveWrapper responsive={responsive}>
@@ -222,7 +187,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
                     {...(column._style && { style: { ...column._style } })}
                     key={index}
                   >
-                    {label(column)}
+                    {getColumnLabel(column)}
                   </CTableHeaderCell>
                 ))}
               </CTableRow>
@@ -232,19 +197,20 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
             <CTableBody>
               {items.map((item: Item, index: number) => (
                 <CTableRow {...(item._props && { ...item._props })} key={index}>
-                  {rawColumnNames.map((colName: string, index: number) => {
-                    return item[colName] ? (
-                      <CTableDataCell
-                        {...(item._cellProps && {
-                          ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                          ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-                        })}
-                        key={index}
-                      >
-                        {item[colName]}
-                      </CTableDataCell>
-                    ) : null
-                  })}
+                  {columnNames &&
+                    columnNames.map((colName: string, index: number) => {
+                      return item[colName] ? (
+                        <CTableDataCell
+                          {...(item._cellProps && {
+                            ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+                            ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+                          })}
+                          key={index}
+                        >
+                          {item[colName]}
+                        </CTableDataCell>
+                      ) : null
+                    })}
                 </CTableRow>
               ))}
             </CTableBody>

package/src/components/table/CTableBody.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**

package/src/components/table/CTableDataCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, TdHTMLAttributes, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableDataCellProps
   extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,

package/src/components/table/CTableFoot.tsx

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes } from 'react'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**

package/src/components/table/CTableHead.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**

package/src/components/table/CTableHeaderCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   /**

package/src/components/table/CTableRow.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /**

package/src/components/table/types.ts

@@ -0,0 +1,20 @@
+import { CTableDataCellProps } from '../table/CTableDataCell'
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
+import { CTableRowProps } from '../table/CTableRow'
+
+export type Column = {
+  label?: string
+  key: string
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
+export type FooterItem = {
+  label?: string
+  _props?: CTableDataCellProps
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  _props?: CTableRowProps
+}

package/src/components/table/utils.ts

@@ -0,0 +1,29 @@
+import type { Column, Item } from './types'
+
+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 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 | string) => {
+        if (typeof column === 'object') return column.key
+        else return column
+      })
+    : items && getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')