@coreui/react-pro 4.0.0 → 4.1.1

package/src/components/popover/CPopover.tsx

@@ -13,7 +13,7 @@ export interface CPopoverProps {
   /**
    * Content node for your component.
    */
-  content: ReactNode
+  content: ReactNode | string
   /**
    * Offset of the popover relative to its target.
    */
@@ -29,7 +29,7 @@ export interface CPopoverProps {
   /**
    * Title node for your component.
    */
-  title?: ReactNode
+  title?: ReactNode | string
   /**
    * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
    *
@@ -147,12 +147,12 @@ export const CPopover: FC<CPopoverProps> = ({
 
 CPopover.propTypes = {
   children: PropTypes.any,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }

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'
@@ -95,19 +101,32 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const compData = useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current
 
     const previousSorterValue = useRef<SorterValue>()
+    const previousItemsValue = useRef<Item[]>()
+
+    const [_activePage, setActivePage] = useState<number>(activePage)
+    const [_items, setItems] = useState<ItemInternal[]>([])
+    const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
+    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
+      columnFilterValue ? columnFilterValue : {},
+    )
+    const [selectedAll, setSelectedAll] = useState<boolean | string>()
+    const [sorterState, setSorterState] = useState<SorterValue>(previousSorterValue.current || {})
+    const [tableFilterState, setTableFilterState] = useState<string>(
+      tableFilterValue ? tableFilterValue : '',
+    )
 
     useMemo(() => {
       if (JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue)) {
         previousSorterValue.current = sorterValue
+        setSorterState({ ...sorterValue })
       }
     }, [sorterValue])
 
-    const previousItemsValue = useRef<Item[]>()
-
-    const [_items, setItems] = useState<Item[]>([])
-
     useMemo(() => {
       if (JSON.stringify(previousItemsValue.current) !== JSON.stringify(items)) {
+        if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+          setActivePage(1)
+        }
         previousItemsValue.current = items
 
         Array.isArray(items) &&
@@ -119,18 +138,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
     }, [items])
 
-    const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
-    const [_activePage, setActivePage] = useState<number>(activePage)
-    const [selectedAll, setSelectedAll] = useState<boolean | string>()
-
-    const [sorterState, setSorterState] = useState<SorterValue>(previousSorterValue.current || {})
-    const [tableFilterState, setTableFilterState] = useState<string>(
-      tableFilterValue ? tableFilterValue : '',
-    )
-    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
-      columnFilterValue ? columnFilterValue : {},
-    )
-
     // functions
 
     const isSortable = (i: number): boolean | undefined => {
@@ -160,7 +167,11 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         } else if (state.state === 'asc') {
           state.state = 'desc'
         } else {
-          state.state = 0
+          if (typeof columnSorter === 'object' && !columnSorter.resetable) {
+            state.state = 'asc'
+          } else {
+            state.state = 0
+          }
         }
       } else {
         state.column = column
@@ -183,6 +194,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
       const newState = { ...columnFilterState, [`${colName}`]: value }
+      setActivePage(1)
       setColumnFilterState(newState)
     }
 
@@ -191,6 +203,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return
       }
+      setActivePage(1)
       setTableFilterState(value)
     }
 
@@ -222,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
@@ -238,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 ||
@@ -259,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 ||
@@ -285,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('')
@@ -332,23 +345,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     )
     useMemo(() => setColumnFilterState({ ...columnFilterValue }), [columnFilterValue])
 
-    //items
-    // useMemo(() => {
-    //   if (
-    //     items &&
-    //     !compData.firstRun &&
-    //     (items.length !== _items.length || JSON.stringify(items) !== JSON.stringify(_items))
-    //   ) {
-    //     setItems(
-    //       items?.map((item: Item, index: number) => {
-    //         return { ...item, _id: index }
-    //       }),
-    //     )
-
-    //     compData.changeItems++
-    //   }
-    // }, [items])
-
     compData.firstRun = false
 
     const handleRowChecked = (id: number, value: boolean) => {
@@ -360,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 }
           }),
         )
@@ -368,7 +364,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
 
       setItems(
-        _items.map((item: Item) => {
+        _items.map((item: ItemInternal) => {
           return { ...item, _selected: true }
         }),
       )
@@ -377,6 +373,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     useEffect(() => {
       if (selectable) {
         const selected = _items.filter((item) => item._selected === true)
+        onSelectedItemsChange && onSelectedItemsChange(selected)
 
         if (selected.length === _items.length) {
           setSelectedAll(true)
@@ -391,8 +388,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         if (selected.length !== 0 && selected.length !== _items.length) {
           setSelectedAll('indeterminate')
         }
-
-        onSelectedItemsChange && onSelectedItemsChange(selected)
       }
     }, [_items])
 
@@ -440,6 +435,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
               <CSmartTableHead
                 {...tableHeadProps}
                 columnFilter={columnFilter}
+                columnFilterState={columnFilterState}
                 columns={columns ? columns : rawColumnNames}
                 columnSorter={columnSorter}
                 selectable={selectable}
@@ -492,7 +488,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
         {(pagination || itemsPerPageSelect) && (
           <div className="row">
-            <div className="col-auto">
+            <div className="col">
               {pagination && numberOfPages > 1 && (
                 <CSmartPagination
                   {...paginationProps}

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

@@ -1,7 +1,13 @@
 import React, { ElementType, forwardRef, ReactNode, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { ColumnFilter, Column, Sorter, SorterValue } from './CSmartTableInterface'
+import {
+  ColumnFilter,
+  ColumnFilterValue,
+  Column,
+  Sorter,
+  SorterValue,
+} from './CSmartTableInterface'
 
 import { CFormInput } from '../form/CFormInput'
 import { CFormCheck } from '../form/CFormCheck'
@@ -10,6 +16,7 @@ import { CTableHeaderCell } from '../table/CTableHeaderCell'
 import { CTableRow } from '../table/CTableRow'
 export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilter?: boolean | ColumnFilter
+  columnFilterState?: ColumnFilterValue
   columnSorter?: boolean | Sorter
   component?: string | ElementType
   columns: (Column | string)[]
@@ -29,6 +36,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
   (
     {
       columnFilter,
+      columnFilterState,
       columnSorter,
       component: Component = CTableHead,
       columns,
@@ -176,7 +184,11 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                         handleFilterOnChange &&
                         handleFilterOnChange(key(column), (event.target as HTMLInputElement).value)
                       }
-                      // value={columnFilterState[colName] || ''}
+                      value={
+                        columnFilterState && columnFilterState[key(column)]
+                          ? columnFilterState[key(column)]
+                          : ''
+                      }
                       aria-label={`column name: '${label(column)}' filter input`}
                     />
                   )}
@@ -192,7 +204,8 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
 
 CSmartTableHead.propTypes = {
   columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  columnSorter: PropTypes.bool,
+  columnFilterState: PropTypes.object,
+  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]')
 }