@coreui/react-pro 4.0.0-rc.3 → 4.1.0

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

@@ -95,19 +95,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<Item[]>([])
+    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,19 +132,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
     }, [items])
 
-    const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
-    const [_activePage, setActivePage] = useState<number>(activePage)
-    console.log(_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 => {
@@ -161,7 +161,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
@@ -184,6 +188,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
       const newState = { ...columnFilterState, [`${colName}`]: value }
+      setActivePage(1)
       setColumnFilterState(newState)
     }
 
@@ -192,6 +197,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return
       }
+      setActivePage(1)
       setTableFilterState(value)
     }
 
@@ -333,23 +339,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) => {
@@ -378,6 +367,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)
@@ -392,8 +382,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         if (selected.length !== 0 && selected.length !== _items.length) {
           setSelectedAll('indeterminate')
         }
-
-        onSelectedItemsChange && onSelectedItemsChange(selected)
       }
     }, [_items])
 
@@ -441,6 +429,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
               <CSmartTableHead
                 {...tableHeadProps}
                 columnFilter={columnFilter}
+                columnFilterState={columnFilterState}
                 columns={columns ? columns : rawColumnNames}
                 columnSorter={columnSorter}
                 selectable={selectable}
@@ -493,7 +482,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/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,6 +204,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
 
 CSmartTableHead.propTypes = {
   columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  columnFilterState: PropTypes.object,
   columnSorter: PropTypes.bool,
   component: PropTypes.elementType,
   children: PropTypes.node,

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,