@coreui/react-pro 4.0.2 → 4.1.3

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

@@ -1,7 +1,13 @@
 import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { ColumnFilterValue, CSmartTableProps, Item, SorterValue } from './CSmartTableInterface'
+import {
+  ColumnFilterValue,
+  CSmartTableProps,
+  Item,
+  ItemInternal,
+  SorterValue,
+} from './CSmartTableInterface'
 
 import { CSmartPagination } from '../pagination/CSmartPagination'
 import { CElementCover } from '../element-cover/CElementCover'
@@ -98,7 +104,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const previousItemsValue = useRef<Item[]>()
 
     const [_activePage, setActivePage] = useState<number>(activePage)
-    const [_items, setItems] = useState<Item[]>([])
+    const [_items, setItems] = useState<ItemInternal[]>([])
     const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
     const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
       columnFilterValue ? columnFilterValue : {},
@@ -229,7 +235,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       compData.changeItems,
     ])
 
-    const columnFiltered: Item[] = useMemo(() => {
+    const columnFiltered: ItemInternal[] = useMemo(() => {
       let items = _items
       if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
         return items
@@ -245,7 +251,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       return items
     }, [compData.columnFiltered, _items])
 
-    const tableFiltered: Item[] = useMemo(() => {
+    const tableFiltered: ItemInternal[] = useMemo(() => {
       let items = columnFiltered
       if (
         !tableFilterState ||
@@ -266,7 +272,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       JSON.stringify(columnFiltered),
     ])
 
-    const sortedItems: Item[] = useMemo(() => {
+    const sortedItems: ItemInternal[] = useMemo(() => {
       const col = sorterState?.column
       if (
         !col ||
@@ -292,12 +298,12 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
     const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0
 
-    const itemsOnActivePage: Item[] = sortedItems.slice(
+    const itemsOnActivePage: ItemInternal[] = sortedItems.slice(
       firstItemOnActivePageIndex,
       firstItemOnActivePageIndex + _itemsPerPage,
     )
 
-    const currentItems: Item[] = _activePage ? itemsOnActivePage : sortedItems
+    const currentItems: ItemInternal[] = _activePage ? itemsOnActivePage : sortedItems
 
     const isFiltered: string =
       tableFilterState || sorterState?.column || Object.values(columnFilterState).join('')
@@ -350,7 +356,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const handleSelectAllChecked = () => {
       if (selectedAll === true) {
         setItems(
-          _items.map((item: Item) => {
+          _items.map((item: ItemInternal) => {
             return { ...item, _selected: false }
           }),
         )
@@ -358,7 +364,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
 
       setItems(
-        _items.map((item: Item) => {
+        _items.map((item: ItemInternal) => {
           return { ...item, _selected: true }
         }),
       )

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

@@ -7,15 +7,20 @@ import { CTableDataCell } from '../table/CTableDataCell'
 
 import { CFormCheck } from '../form/CFormCheck'
 
-import { Item, ScopedColumns } from './CSmartTableInterface'
+import { Item, ItemInternal, ScopedColumns } from './CSmartTableInterface'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
-  currentItems: Item[]
+  currentItems: ItemInternal[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
   onRowChecked?: (id: number, value: boolean) => void
-  onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
+  onRowClick?: (
+    item: ItemInternal,
+    index: number,
+    columnName: string,
+    event: MouseEvent | boolean,
+  ) => void
   rawColumnNames: string[]
   scopedColumns?: ScopedColumns
   selectable?: boolean
@@ -64,7 +69,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.map((item: Item, trIndex) => {
+        {currentItems.map((item: ItemInternal, trIndex) => {
           return (
             <React.Fragment key={trIndex}>
               <CTableRow

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

@@ -205,7 +205,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
 CSmartTableHead.propTypes = {
   columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   columnFilterState: PropTypes.object,
-  columnSorter: PropTypes.bool,
+  columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   component: PropTypes.elementType,
   children: PropTypes.node,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired, // TODO: improve this Prop Type,

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

@@ -8,10 +8,10 @@ import { CTableRowProps } from '../table/CTableRow'
 import { CTableHeadProps } from '../table/CTableHead'
 
 export interface Column {
-  sorter?: boolean
-  key: string
-  label?: string
   filter?: boolean
+  label?: string
+  key: string
+  sorter?: boolean
   _style?: any
   _props?: CTableHeaderCellProps
 }
@@ -27,9 +27,12 @@ export interface ColumnFilterValue {
 
 export interface Item {
   [key: string]: number | string | any
+  _props?: CTableRowProps
+  _selected?: boolean
+}
+
+export interface ItemInternal extends Item {
   _id: number
-  _props: CTableRowProps
-  _selected: boolean
 }
 
 export interface ItemsPerPageSelect {
@@ -44,6 +47,7 @@ export interface Sorter {
 }
 
 export interface ScopedColumns {
+  [key: string]: any
   details?: (a: Item, b: number) => ReactNode
 }
 
@@ -115,7 +119,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * - sorter (Boolean) - disables sorting of the column when set to false
    * - filter (Boolean) - removes filter from column when set to false.
    */
-  columns?: Column[] | string[]
+  columns?: (string | Column)[]
   /**
    * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
    *

package/src/components/tooltip/CTooltip.tsx

@@ -13,7 +13,7 @@ export interface CTooltipProps {
   /**
    * Content node for your component.
    */
-  content: ReactNode
+  content: ReactNode | string
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -126,7 +126,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
 CTooltip.propTypes = {
   children: PropTypes.any,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/index.ts

@@ -89,6 +89,7 @@ import { CNavbarToggler } from './components/navbar/CNavbarToggler'
 import { CPagination } from './components/pagination/CPagination'
 import { CPaginationItem } from './components/pagination/CPaginationItem'
 import { CSmartPagination } from './components/pagination/CSmartPagination'
+import { CPlaceholder } from './components/placeholder/CPlaceholder'
 import { CPopover } from './components/popover/CPopover'
 import { CProgress } from './components/progress/CProgress'
 import { CProgressBar } from './components/progress/CProgressBar'
@@ -212,6 +213,7 @@ export {
   CNavbarToggler,
   CPagination,
   CPaginationItem,
+  CPlaceholder,
   CPopover,
   CProgress,
   CProgressBar,

package/src/utils/hooks/useForkedRef.ts

@@ -9,6 +9,7 @@ export type AssignableRef<ValueType> =
     }['bivarianceHack']
   | React.MutableRefObject<ValueType | null>
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useForkedRef<RefValueType = any>(
   ...refs: (AssignableRef<RefValueType> | null | undefined)[]
 ) {
@@ -16,6 +17,7 @@ export function useForkedRef<RefValueType = any>(
     if (refs.every((ref) => ref == null)) {
       return null
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (node: any) => {
       refs.forEach((ref) => {
         assignRef(ref, node)
@@ -24,8 +26,10 @@ export function useForkedRef<RefValueType = any>(
   }, refs)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function assignRef<RefValueType = any>(
   ref: AssignableRef<RefValueType> | null | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any,
 ) {
   if (ref == null) return
@@ -40,6 +44,7 @@ export function assignRef<RefValueType = any>(
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 export function isFunction(value: any): value is Function {
   return !!(value && {}.toString.call(value) == '[object Function]')
 }