fix hover table

soker90 · May 9, 2024 · e589ab1 · e589ab1
1 parent 34b4380
commit e589ab1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 28 deletions.
diff --git a/src/components/TableMaterial/TableMaterial.jsx b/src/components/TableMaterial/TableMaterial.jsx
@@ -1,14 +1,12 @@
-/* eslint-disable max-len */
 import { useMemo, useState } from 'react'
-import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 import {
-  Card,
   TablePagination
 } from '@mui/material'
 
-import { Table } from 'components'
+import { Table, Card } from 'components'
+import { cn } from 'utils'
 
 import NoData from './components/NoData'
 import HeadTable from './components/HeadTable'
@@ -41,24 +39,22 @@ const TableMaterial = ({
   const handlePageChange = (event, newPage) => {
     setPage(newPage)
     refresh({
-      offset: newPage * limit,
-      limit
+      offset: newPage * limit, limit
     })
   }
 
   const handleLimitChange = event => {
     setLimit(event.target.value)
     refresh({
-      offset: page * event.target.value,
-      limit: event.target.value
+      offset: page * event.target.value, limit: event.target.value
     })
   }
 
   const Wrapper = useMemo(() => (withCard ? Card : 'div'), [withCard])
 
   return (
     <Wrapper
-      className={clsx(classes.root, className)}
+      className={cn('w-auto overflow-x-auto', className)}
       {...rest}
     >
       <TitleTable title={title} />
@@ -80,20 +76,17 @@ const TableMaterial = ({
 
         <NoData elements={data.length} />
       </PerfectScrollbar>
-      {Boolean(count) &&
-        (
-          <TablePagination
-            component='div'
-            count={count}
-            onPageChange={handlePageChange}
-            onRowsPerPageChange={handleLimitChange}
-            page={page}
-            rowsPerPage={limit}
-            rowsPerPageOptions={rowsPerPageOptions || [10, 20, 30]}
-            labelRowsPerPage='filas'
-            labelDisplayedRows={labelOfRows}
-          />
-        )}
+      {Boolean(count) && (<TablePagination
+        component='div'
+        count={count}
+        onPageChange={handlePageChange}
+        onRowsPerPageChange={handleLimitChange}
+        page={page}
+        rowsPerPage={limit}
+        rowsPerPageOptions={rowsPerPageOptions || [10, 20, 30]}
+        labelRowsPerPage='filas'
+        labelDisplayedRows={labelOfRows}
+                          />)}
     </Wrapper>
   )
 }

diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
@@ -48,7 +48,7 @@ CardContent.displayName = 'CardContent'
 const CardActions = forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center p-2', className)}
+    className={cn('flex items-center p-2 gap-4', className)}
     {...props}
   />
 ))

diff --git a/src/components/ui/Table.jsx b/src/components/ui/Table.jsx
@@ -36,11 +36,11 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
 ))
 TableFooter.displayName = 'TableFooter'
 
-const TableRow = React.forwardRef(({ className, selected, ...props }, ref) => (
+const TableRow = React.forwardRef(({ className, selected, focusable = true, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', selected && 'bg-primary/20',
+      'border-b transition-colors data-[state=selected]:bg-muted', selected && 'bg-primary/20', focusable && 'hover:bg-[rgba(0,0,0,0.04)] dark:hover:bg-[rgba(255,255,255,0.04)]',
       className
     )}
     {...props}

diff --git a/src/pages/ClientInvoice/components/DeliveryOrderInvoice/DeliveryOrderInvoice.jsx b/src/pages/ClientInvoice/components/DeliveryOrderInvoice/DeliveryOrderInvoice.jsx
@@ -1,5 +1,5 @@
 import {
-  Card, CardContent, CardHeader, Divider, IconButton, Tooltip
+  Divider, IconButton, Tooltip
 } from '@mui/material'
 import PropTypes from 'prop-types'
 import PerfectScrollbar from 'react-perfect-scrollbar'
@@ -8,7 +8,7 @@ import { Plus } from 'lucide-react'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { useCallback, useState } from 'react'
 
-import { DatePickerForm, TextEuro } from 'components'
+import { DatePickerForm, TextEuro, Card, CardContent, CardHeader } from 'components'
 import { useStyles } from './DeliveryOrderInvoice.styles'
 import ClientInvoiceProducts from '../ClientInvoiceProducts'
 import DeleteProductModal from '../../modals/DeleteProductModal'