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

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

@@ -2,64 +2,46 @@ import React, { forwardRef, MouseEvent, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
 import { CTableBody, CTableBodyProps } from '../table/CTableBody'
-import { CTableRow } from '../table/CTableRow'
-import { CTableDataCell } from '../table/CTableDataCell'
+import { CFormCheck } from '../form'
+import { CTableDataCell, CTableRow } from '../table'
 
-import { CFormCheck } from '../form/CFormCheck'
+import type { Item, ScopedColumns } from './types'
 
-import { Item, ItemInternal, ScopedColumns } from './CSmartTableInterface'
+import { isObjectInArray } from '../../utils'
+
+import { getClickedColumnName, getTableDataCellProps } from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
-  currentItems: ItemInternal[]
+  columnNames: string[]
+  currentItems: Item[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
-  onRowChecked?: (id: number, value: boolean) => void
-  onRowClick?: (
-    item: ItemInternal,
-    index: number,
-    columnName: string,
-    event: MouseEvent | boolean,
-  ) => void
-  rawColumnNames: string[]
+  onRowChecked?: (item: Item, value: boolean) => void
+  onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
   scopedColumns?: ScopedColumns
   selectable?: boolean
+  selected?: Item[]
 }
 
 export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBodyProps>(
   (
     {
       clickableRows,
+      columnNames,
       currentItems,
       firstItemOnActivePageIndex,
       noItemsLabel,
       onRowChecked,
       onRowClick,
-      rawColumnNames,
       scopedColumns,
       selectable,
+      selected,
       ...rest
     },
     ref,
   ) => {
-    const tableDataCellProps = (item: Item, colName: string) => {
-      const props = item._cellProps && {
-        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-      }
-
-      return props
-    }
-
-    const getColumnName = (event: MouseEvent): string => {
-      const target = event.target as HTMLTextAreaElement
-      const closest = target.closest('tr')
-      const children = closest ? Array.from(closest.children) : []
-      const clickedCell = children.filter((child) => child.contains(target))[0]
-      return rawColumnNames[children.indexOf(clickedCell)]
-    }
-
-    const colspan: number = selectable ? rawColumnNames.length + 1 : rawColumnNames.length
+    const colspan: number = selectable ? columnNames.length + 1 : columnNames.length
 
     return (
       <CTableBody
@@ -69,7 +51,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.map((item: ItemInternal, trIndex) => {
+        {currentItems.map((item: Item, trIndex) => {
           return (
             <React.Fragment key={trIndex}>
               <CTableRow
@@ -80,7 +62,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                   onRowClick(
                     item,
                     trIndex + firstItemOnActivePageIndex,
-                    getColumnName(event),
+                    getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
                     event,
                   )
                 }
@@ -88,14 +70,21 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                 {selectable && (
                   <CTableDataCell>
                     <CFormCheck
-                      checked={item._selected ? item._selected : false}
-                      onChange={(event) =>
-                        onRowChecked && onRowChecked(item._id, event.target.checked)
+                      checked={
+                        selected &&
+                        isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
                       }
+                      onChange={(event) => {
+                        const _item = { ...item }
+                        delete _item['_cellProps']
+                        delete _item['_props']
+                        delete _item['_selected']
+                        onRowChecked && onRowChecked(_item, event.target.checked)
+                      }}
                     />
                   </CTableDataCell>
                 )}
-                {rawColumnNames.map((colName, index) => {
+                {columnNames.map((colName, index) => {
                   return (
                     (scopedColumns &&
                       scopedColumns[colName] &&
@@ -105,7 +94,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           key: index,
                         },
                       )) || (
-                      <CTableDataCell {...tableDataCellProps(item, colName)} key={index}>
+                      <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
                         {String(item[colName])}
                       </CTableDataCell>
                     )
@@ -128,7 +117,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       onRowClick(
                         item,
                         trIndex + firstItemOnActivePageIndex,
-                        getColumnName(event),
+                        getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
                         true,
                       )
                     }
@@ -161,9 +150,10 @@ CSmartTableBody.propTypes = {
   noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onRowChecked: PropTypes.func,
   onRowClick: PropTypes.func,
-  rawColumnNames: PropTypes.array.isRequired,
+  columnNames: PropTypes.array.isRequired,
   scopedColumns: PropTypes.object,
   selectable: PropTypes.bool,
+  selected: PropTypes.array,
 }
 
 CSmartTableBody.displayName = 'CSmartTableBody'

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 
-import { cilFilterX } from '@coreui/icons-pro'
+import { cilFilterX } from '@coreui/icons'
 
 import CIcon from '@coreui/icons-react'
 

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

@@ -1,11 +1,9 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import { CFormLabel } from '../form/CFormLabel'
-import { CFormInput } from '../form/CFormInput'
+import { CFormInput, CFormLabel } from '../form'
 
 interface CSmartTableFilterProps extends HTMLAttributes<HTMLInputElement> {
-  // TODO: consider to simplify ex. filterLabel --> label
   filterLabel?: string
   filterPlaceholder?: string
   value?: string | number

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

@@ -1,20 +1,21 @@
 import React, { ElementType, forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import {
-  ColumnFilter,
-  ColumnFilterValue,
-  Column,
-  ItemInternal,
-  Sorter,
-  SorterValue,
-} from './CSmartTableInterface'
+import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
 
-import { CFormInput } from '../form/CFormInput'
-import { CFormCheck } from '../form/CFormCheck'
+import { CFormCheck, CFormInput } from '../form'
+import { CTableHeaderCell, CTableRow } from '../table'
 import { CTableHead, CTableHeadProps } from '../table/CTableHead'
-import { CTableHeaderCell } from '../table/CTableHeaderCell'
-import { CTableRow } from '../table/CTableRow'
+
+import {
+  getColumnKey,
+  getColumnLabel,
+  getColumnSorterState,
+  getColumnValues,
+  getTableHeaderCellProps,
+  getTableHeaderCellStyles,
+} from './utils'
+
 export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilter?: boolean | ColumnFilter
   columnFilterState?: ColumnFilterValue
@@ -26,9 +27,10 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   handleFilterOnInput?: (key: string, value: string) => void
   handleSelectAllChecked?: () => void
   handleSort?: (key: string, index: number) => void
-  items: ItemInternal[]
+  items: Item[]
   selectable?: boolean
-  selectAll?: boolean | string
+  selectAll?: boolean | { external?: boolean }
+  selectedAll?: boolean | string
   sorterState?: SorterValue
   sortingIcon?: ReactNode
   sortingIconAscending?: ReactNode
@@ -51,6 +53,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
       items,
       selectable,
       selectAll,
+      selectedAll,
       sorterState,
       sortingIcon,
       sortingIconAscending,
@@ -59,8 +62,17 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
     },
     ref,
   ) => {
+    const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
     const [refresh, setRefresh] = useState(false)
 
+    useEffect(() => {
+      if (selectedAll === 'indeterminate') {
+        if (selectAllcheckboxRef.current) selectAllcheckboxRef.current.indeterminate = true
+      } else {
+        if (selectAllcheckboxRef.current) selectAllcheckboxRef.current.indeterminate = false
+      }
+    }, [selectedAll])
+
     useEffect(() => {
       if (columnFilterState && Object.keys(columnFilterState).length === 0) {
         setRefresh(true)
@@ -77,108 +89,42 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
       }
     }, [refresh])
 
-    const tableHeaderCellProps = (column: Column | string) => {
-      if (typeof column === 'object' && column._props) {
-        return column._props
-      }
-      return {}
-    }
-
-    const tableHeaderCellStyles = (column: Column | string) => {
-      const style = { verticalAlign: 'middle', overflow: 'hidden', cursor: '' }
-
-      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
-    }
-
-    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 key = (column: Column | string) => (typeof column === 'object' ? column.key : column)
-
-    const getColumnSorterState = (key: string): string | number => {
-      if (sorterState && sorterState.column === key) {
-        if (sorterState.state) {
-          return sorterState.state
-        }
-        return 0
-      }
-
-      return 0
-    }
-
-    const getValues = (items: ItemInternal[], key: string) => {
-      return items.map((a) => a[key])
-    }
-
     const columnSorterIcon = (column: Column | string) => {
-      if (getColumnSorterState(key(column)) === 0) {
+      if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
         return <span className="opacity-25 float-end me-1">{sortingIcon}</span>
       }
-      if (getColumnSorterState(key(column)) === 'asc') {
+      if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
         return <span className="float-end me-1">{sortingIconAscending}</span>
       }
-      if (getColumnSorterState(key(column)) === 'desc') {
+      if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
         return <span className="float-end me-1">{sortingIconDescending}</span>
       }
       return
     }
 
-    const checkboxRef = useRef<HTMLInputElement>(null)
-
-    useEffect(() => {
-      if (selectAll === 'indeterminate') {
-        if (checkboxRef.current) checkboxRef.current.indeterminate = true
-      } else {
-        if (checkboxRef.current) checkboxRef.current.indeterminate = false
-      }
-    }, [selectAll])
-
     return (
       <Component {...rest} ref={ref}>
         <CTableRow>
           {selectable && (
             <CTableHeaderCell>
-              <CFormCheck
-                checked={typeof selectAll === 'boolean' ? selectAll : false}
-                onChange={() => handleSelectAllChecked && handleSelectAllChecked()}
-                ref={checkboxRef}
-              />
+              {selectAll && (
+                <CFormCheck
+                  checked={typeof selectedAll === 'boolean' ? selectedAll : false}
+                  onChange={() => handleSelectAllChecked && handleSelectAllChecked()}
+                  ref={selectAllcheckboxRef}
+                />
+              )}
             </CTableHeaderCell>
           )}
           {columns.map((column: Column | string, index: number) => {
             return (
               <CTableHeaderCell
-                {...tableHeaderCellProps(column)}
-                onClick={() => handleSort && handleSort(key(column), index)}
-                style={tableHeaderCellStyles(column)}
+                {...getTableHeaderCellProps(column)}
+                onClick={() => handleSort && handleSort(getColumnKey(column), index)}
+                style={getTableHeaderCellStyles(column, columnSorter)}
                 key={index}
               >
-                <div className="d-inline">{label(column)}</div>
+                <div className="d-inline">{getColumnLabel(column)}</div>
                 {columnSorter &&
                   (typeof column !== 'object'
                     ? true
@@ -195,7 +141,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
             {selectable && <CTableHeaderCell></CTableHeaderCell>}
             {columns.map((column: Column | string, index: number) => {
               return (
-                <CTableHeaderCell {...tableHeaderCellProps(column)} key={index}>
+                <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
                   {(
                     typeof column !== 'object'
                       ? true
@@ -206,31 +152,34 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                     typeof column !== 'string' && typeof column.filter === 'function' ? (
                       !refresh &&
                       column.filter(
-                        getValues(items, key(column)),
+                        getColumnValues(items, getColumnKey(column)),
                         (value: any) =>
                           handleOnCustomFilterChange &&
-                          handleOnCustomFilterChange(key(column), value),
+                          handleOnCustomFilterChange(getColumnKey(column), value),
                       )
                     ) : (
                       <CFormInput
                         size="sm"
                         onInput={(event) =>
                           handleFilterOnInput &&
-                          handleFilterOnInput(key(column), (event.target as HTMLInputElement).value)
+                          handleFilterOnInput(
+                            getColumnKey(column),
+                            (event.target as HTMLInputElement).value,
+                          )
                         }
                         onChange={(event) =>
                           handleFilterOnChange &&
                           handleFilterOnChange(
-                            key(column),
+                            getColumnKey(column),
                             (event.target as HTMLInputElement).value,
                           )
                         }
                         value={
-                          columnFilterState && columnFilterState[key(column)]
-                            ? columnFilterState[key(column)]
+                          columnFilterState && columnFilterState[getColumnKey(column)]
+                            ? columnFilterState[getColumnKey(column)]
                             : ''
                         }
-                        aria-label={`column name: '${label(column)}' filter input`}
+                        aria-label={`column name: '${getColumnLabel(column)}' filter input`}
                       />
                     )
                   ) : (
@@ -258,7 +207,8 @@ CSmartTableHead.propTypes = {
   handleSelectAllChecked: PropTypes.func,
   handleSort: PropTypes.func,
   selectable: PropTypes.bool,
-  selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  selectedAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   sorterState: PropTypes.object,
   sortingIcon: PropTypes.node,
   sortingIconAscending: PropTypes.node,

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.
@@ -146,6 +95,10 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
    */
   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 +146,10 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * Row click callback.
    */
   onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
+  /**
+   * Select all callback.
+   */
+  onSelectAll?: () => void
   /**
    * Selected items change callback.
    */
@@ -221,6 +178,19 @@ 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.
+   */
+  selectAll?: boolean | { external?: boolean }
+  /**
+   * Array of selected objects, where each object represents one item - row in table.
+   *
+   * Example item: `{ name: 'John' , age: 12 }`
+   */
+  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.tsx

@@ -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)
+  label?: string
+  key: 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
+}