@motor-hero/ui-kit 0.38.0 → 0.39.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/responsive-data-view.d.ts +7 -1
- package/dist/components/responsive-data-view.d.ts.map +1 -1
- package/dist/index.cjs +15 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/responsive-data-view.tsx +21 -3
package/package.json
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import type { ReactNode } from "react"
|
|
2
2
|
import { EmptyState } from "./empty-state"
|
|
3
3
|
|
|
4
|
+
import { cn } from "../lib/utils"
|
|
5
|
+
|
|
4
6
|
interface ResponsiveDataViewProps {
|
|
5
7
|
table: ReactNode
|
|
6
8
|
cards: ReactNode
|
|
7
9
|
isEmpty: boolean
|
|
8
10
|
isLoading: boolean
|
|
11
|
+
/**
|
|
12
|
+
* Dados desatualizados na tela enquanto um refetch está em voo (ex.:
|
|
13
|
+
* `isPlaceholderData` do TanStack Query). Esmaece e bloqueia a interação
|
|
14
|
+
* com table/cards; a paginação continua clicável.
|
|
15
|
+
*/
|
|
16
|
+
isBusy?: boolean
|
|
9
17
|
emptyIcon?: ReactNode
|
|
10
18
|
emptyTitle?: string
|
|
11
19
|
emptyDescription?: string
|
|
@@ -19,6 +27,7 @@ export function ResponsiveDataView({
|
|
|
19
27
|
cards,
|
|
20
28
|
isEmpty,
|
|
21
29
|
isLoading,
|
|
30
|
+
isBusy = false,
|
|
22
31
|
emptyIcon,
|
|
23
32
|
emptyTitle = "Nenhum registro encontrado",
|
|
24
33
|
emptyDescription,
|
|
@@ -28,7 +37,7 @@ export function ResponsiveDataView({
|
|
|
28
37
|
// Lista vazia mostra só o EmptyState. Antes renderizava a caixa com o
|
|
29
38
|
// cabeçalho da tabela vazio, o bloco de texto por fora dela e a paginação
|
|
30
39
|
// desabilitada — três blocos empilhados para zero registro.
|
|
31
|
-
if (!isLoading && isEmpty) {
|
|
40
|
+
if (!isLoading && !isBusy && isEmpty) {
|
|
32
41
|
return (
|
|
33
42
|
<div className="rounded-md border">
|
|
34
43
|
<EmptyState
|
|
@@ -41,12 +50,21 @@ export function ResponsiveDataView({
|
|
|
41
50
|
)
|
|
42
51
|
}
|
|
43
52
|
|
|
53
|
+
const busyClass = isBusy && "pointer-events-none opacity-50"
|
|
44
54
|
return (
|
|
45
55
|
<div className="space-y-4">
|
|
46
|
-
<div
|
|
56
|
+
<div
|
|
57
|
+
aria-busy={isBusy}
|
|
58
|
+
className={cn(
|
|
59
|
+
"hidden overflow-x-auto rounded-md border transition-opacity md:block",
|
|
60
|
+
busyClass,
|
|
61
|
+
)}
|
|
62
|
+
>
|
|
47
63
|
{table}
|
|
48
64
|
</div>
|
|
49
|
-
<div className="md:hidden"
|
|
65
|
+
<div aria-busy={isBusy} className={cn("transition-opacity md:hidden", busyClass)}>
|
|
66
|
+
{cards}
|
|
67
|
+
</div>
|
|
50
68
|
{pagination}
|
|
51
69
|
</div>
|
|
52
70
|
)
|