ikoncomponents 1.7.0 → 1.7.2
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/ikoncomponents/assistant-ui/Assistant.d.ts +28 -0
- package/dist/ikoncomponents/assistant-ui/Assistant.js +306 -0
- package/dist/ikoncomponents/assistant-ui/agent-dropdown.d.ts +24 -0
- package/dist/ikoncomponents/assistant-ui/agent-dropdown.js +16 -0
- package/dist/ikoncomponents/assistant-ui/agentTextChatTransport.d.ts +30 -0
- package/dist/ikoncomponents/assistant-ui/agentTextChatTransport.js +208 -0
- package/dist/ikoncomponents/assistant-ui/attachment.d.ts +4 -0
- package/dist/ikoncomponents/assistant-ui/attachment.js +93 -0
- package/dist/ikoncomponents/assistant-ui/markdown-text.d.ts +2 -0
- package/dist/ikoncomponents/assistant-ui/markdown-text.js +126 -0
- package/dist/ikoncomponents/assistant-ui/thread.d.ts +10 -0
- package/dist/ikoncomponents/assistant-ui/thread.js +115 -0
- package/dist/ikoncomponents/assistant-ui/tool-fallback.d.ts +2 -0
- package/dist/ikoncomponents/assistant-ui/tool-fallback.js +18 -0
- package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.d.ts +7 -0
- package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.js +23 -0
- package/dist/ikoncomponents/fileUpload/index.js +1 -1
- package/dist/ikoncomponents/fileUploadApi/index.js +1 -1
- package/dist/ikoncomponents/table/DataTable/index.d.ts +1 -1
- package/dist/ikoncomponents/table/DataTable/index.js +65 -6
- package/dist/ikoncomponents/table/index.d.ts +1 -1
- package/dist/ikoncomponents/table/index.js +153 -5
- package/dist/ikoncomponents/table/type.d.ts +21 -12
- package/dist/ikoncomponents/table/type.js +7 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/styles.css +309 -109
- package/dist/tsconfig.build.tsbuildinfo +1 -0
- package/dist/utils/api/file-upload copy/index.js +1 -1
- package/dist/utils/userType.d.ts +13 -0
- package/dist/utils/userType.js +1 -0
- package/package.json +4 -3
|
@@ -1,12 +1,160 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { LayoutGrid, List } from "lucide-react";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { LayoutGrid, List, ChevronDown, X, GripVertical, Settings2, Check, Download, RotateCcw, Search, ListFilter } from "lucide-react";
|
|
4
|
+
import { Badge } from "../../shadcn/badge";
|
|
4
5
|
import { Reload } from "../reload-component";
|
|
5
6
|
import { DataTable } from "./DataTable";
|
|
6
7
|
import { DataTableSearch } from "./DataTableSearch";
|
|
7
8
|
import { DataTablePagination } from "./DataTablePagination";
|
|
8
9
|
import { DataTablePageSize } from "./DataTablePageSize";
|
|
9
|
-
|
|
10
|
+
import { Button } from "../../shadcn/button";
|
|
11
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
|
|
12
|
+
export function DataTableLayout({ data, columns, extraTools, }) {
|
|
13
|
+
const { keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, themeColor, onLoadMore, hasMore, onFilterChange, } = extraTools !== null && extraTools !== void 0 ? extraTools : {};
|
|
10
14
|
const [viewMode, setViewMode] = useState("list");
|
|
11
|
-
|
|
15
|
+
const observerTarget = useRef(null);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (viewMode !== "grid" || !onLoadMore || !hasMore)
|
|
18
|
+
return;
|
|
19
|
+
const observer = new IntersectionObserver((entries) => {
|
|
20
|
+
if (entries[0].isIntersecting) {
|
|
21
|
+
onLoadMore();
|
|
22
|
+
}
|
|
23
|
+
}, { threshold: 0.1 });
|
|
24
|
+
if (observerTarget.current) {
|
|
25
|
+
observer.observe(observerTarget.current);
|
|
26
|
+
}
|
|
27
|
+
return () => observer.disconnect();
|
|
28
|
+
}, [viewMode, onLoadMore, hasMore]);
|
|
29
|
+
const [groupedColumns, setGroupedColumns] = useState([]);
|
|
30
|
+
const [tableFilters, setTableFilters] = useState({});
|
|
31
|
+
const [activeFilterColumns, setActiveFilterColumns] = useState([]);
|
|
32
|
+
const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
|
|
33
|
+
const [pendingFilterColumns, setPendingFilterColumns] = useState([]);
|
|
34
|
+
const [filterSearchQuery, setFilterSearchQuery] = useState("");
|
|
35
|
+
const [columnSearchQueries, setColumnSearchQueries] = useState({});
|
|
36
|
+
const [visibleColumns, setVisibleColumns] = useState(columns.map(col => typeof col.header === "string" ? col.header : ""));
|
|
37
|
+
const toggleColumn = (header) => {
|
|
38
|
+
setVisibleColumns(prev => prev.includes(header) ? prev.filter(h => h !== header) : [...prev, header]);
|
|
39
|
+
};
|
|
40
|
+
const handleToggleFilterValue = (column, value) => {
|
|
41
|
+
setTableFilters(prev => {
|
|
42
|
+
const currentValues = prev[column] || [];
|
|
43
|
+
const nextValues = currentValues.includes(value)
|
|
44
|
+
? currentValues.filter(v => v !== value)
|
|
45
|
+
: [...currentValues, value];
|
|
46
|
+
const next = Object.assign({}, prev);
|
|
47
|
+
if (nextValues.length === 0) {
|
|
48
|
+
delete next[column];
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
next[column] = nextValues;
|
|
52
|
+
}
|
|
53
|
+
return next;
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
const removeActiveFilterColumn = (column) => {
|
|
57
|
+
const nextActiveColumns = activeFilterColumns.filter(c => c !== column);
|
|
58
|
+
const nextFilters = Object.assign({}, tableFilters);
|
|
59
|
+
delete nextFilters[column];
|
|
60
|
+
setActiveFilterColumns(nextActiveColumns);
|
|
61
|
+
setTableFilters(nextFilters);
|
|
62
|
+
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
|
|
63
|
+
};
|
|
64
|
+
const handleTogglePendingFilterColumn = (column) => {
|
|
65
|
+
setPendingFilterColumns(prev => prev.includes(column) ? prev.filter(c => c !== column) : [...prev, column]);
|
|
66
|
+
};
|
|
67
|
+
const getUniqueValuesForColumn = (header) => {
|
|
68
|
+
const col = columns.find(c => c.header === header);
|
|
69
|
+
if (!col || !col.accessorKey)
|
|
70
|
+
return [];
|
|
71
|
+
const values = data.map(row => String(row[col.accessorKey] || ""));
|
|
72
|
+
return Array.from(new Set(values)).filter(Boolean).sort();
|
|
73
|
+
};
|
|
74
|
+
const handleToggleGroup = (columnHeader) => {
|
|
75
|
+
setGroupedColumns(prev => prev.includes(columnHeader)
|
|
76
|
+
? prev.filter(c => c !== columnHeader)
|
|
77
|
+
: [...prev, columnHeader]);
|
|
78
|
+
};
|
|
79
|
+
const exportToCSV = () => {
|
|
80
|
+
if (!data || data.length === 0)
|
|
81
|
+
return;
|
|
82
|
+
const headers = columns
|
|
83
|
+
.filter(col => typeof col.header === "string")
|
|
84
|
+
.map(col => col.header);
|
|
85
|
+
const csvRows = data.map(row => columns
|
|
86
|
+
.filter(col => typeof col.header === "string")
|
|
87
|
+
.map(col => {
|
|
88
|
+
const val = col.accessorKey ? row[col.accessorKey] : "";
|
|
89
|
+
return `"${String(val).replace(/"/g, '""')}"`;
|
|
90
|
+
})
|
|
91
|
+
.join(","));
|
|
92
|
+
const csvContent = [headers.join(","), ...csvRows].join("\n");
|
|
93
|
+
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
|
|
94
|
+
const link = document.createElement("a");
|
|
95
|
+
const url = URL.createObjectURL(blob);
|
|
96
|
+
link.setAttribute("href", url);
|
|
97
|
+
link.setAttribute("download", `table-export-${new Date().toISOString().split('T')[0]}.csv`);
|
|
98
|
+
link.style.visibility = "hidden";
|
|
99
|
+
document.body.appendChild(link);
|
|
100
|
+
link.click();
|
|
101
|
+
document.body.removeChild(link);
|
|
102
|
+
};
|
|
103
|
+
// data is the current page from the backend — render it directly, no client-side filtering.
|
|
104
|
+
return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full", children: [_jsx("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:max-w-[200px] shrink-0", children: _jsx(DataTableSearch, {}) }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [actionNode && actionNode, filterComponent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter"] }) }), _jsx(DropdownMenuContent, { align: "end", className: "p-4 min-w-[200px]", children: filterComponent })] })), _jsxs(DropdownMenu, { open: isFilterDropdownOpen, onOpenChange: (open) => {
|
|
105
|
+
setIsFilterDropdownOpen(open);
|
|
106
|
+
if (open) {
|
|
107
|
+
setPendingFilterColumns(activeFilterColumns);
|
|
108
|
+
}
|
|
109
|
+
}, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background relative", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter", activeFilterColumns.length > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 w-4 h-4 bg-foreground text-background text-[10px] rounded-full flex items-center justify-center font-bold", children: activeFilterColumns.length }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 space-y-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Filter" }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search columns...", value: filterSearchQuery, onChange: (e) => setFilterSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto pr-1", children: columns
|
|
110
|
+
.filter(col => {
|
|
111
|
+
const headerText = typeof col.header === "string" ? col.header : "";
|
|
112
|
+
return headerText && col.accessorKey && headerText.toLowerCase().includes(filterSearchQuery.toLowerCase());
|
|
113
|
+
})
|
|
114
|
+
.map((col, idx) => {
|
|
115
|
+
const headerText = typeof col.header === "string" ? col.header : "";
|
|
116
|
+
const isSelected = pendingFilterColumns.includes(headerText);
|
|
117
|
+
return (_jsxs("button", { onClick: () => handleTogglePendingFilterColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: headerText })] }, idx));
|
|
118
|
+
}) }), _jsxs("div", { className: "px-2 pt-2 mt-1 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "flex-1 text-xs font-medium bg-foreground text-background hover:bg-foreground/90", onClick: () => {
|
|
119
|
+
setActiveFilterColumns(pendingFilterColumns);
|
|
120
|
+
const removedColumns = activeFilterColumns.filter(c => !pendingFilterColumns.includes(c));
|
|
121
|
+
const nextFilters = Object.assign({}, tableFilters);
|
|
122
|
+
removedColumns.forEach(c => delete nextFilters[c]);
|
|
123
|
+
setTableFilters(nextFilters);
|
|
124
|
+
setIsFilterDropdownOpen(false);
|
|
125
|
+
// Notify parent so it can re-fetch from the backend
|
|
126
|
+
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
|
|
127
|
+
}, children: "Apply" }), _jsxs(Button, { variant: "secondary", size: "sm", className: "flex-1 text-xs font-medium bg-secondary hover:bg-secondary/80 text-secondary-foreground", onClick: () => {
|
|
128
|
+
setPendingFilterColumns([]);
|
|
129
|
+
setActiveFilterColumns([]);
|
|
130
|
+
setTableFilters({});
|
|
131
|
+
setIsFilterDropdownOpen(false);
|
|
132
|
+
// Notify parent so it can re-fetch all data without filters
|
|
133
|
+
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({});
|
|
134
|
+
}, children: [_jsx(RotateCcw, { className: "w-3.5 h-3.5 mr-2 inline" }), " Reset"] })] })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(Settings2, { className: "w-4 h-4" }), "Columns"] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48 p-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Toggle Columns" }), columns.map((col, idx) => {
|
|
135
|
+
const headerText = typeof col.header === "string" ? col.header : `Column ${idx + 1}`;
|
|
136
|
+
const isVisible = visibleColumns.includes(headerText);
|
|
137
|
+
return (_jsxs("button", { onClick: () => toggleColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border border-primary ${isVisible ? 'bg-primary text-primary-foreground' : 'bg-transparent'}`, children: isVisible && _jsx(Check, { className: "h-3 w-3" }) }), headerText] }, idx));
|
|
138
|
+
})] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", onClick: exportToCSV, children: _jsx(Download, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] })] })] }), activeFilterColumns.length > 0 && (_jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0 overflow-x-auto", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: activeFilterColumns.map(colHeader => {
|
|
139
|
+
const selectedCount = (tableFilters[colHeader] || []).length;
|
|
140
|
+
const searchQuery = columnSearchQueries[colHeader] || "";
|
|
141
|
+
const uniqueValues = getUniqueValuesForColumn(colHeader);
|
|
142
|
+
const filteredValues = uniqueValues.filter(v => v.toLowerCase().includes(searchQuery.toLowerCase()));
|
|
143
|
+
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 h-9 bg-muted/50 border border-border rounded-full text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors flex-1 shrink min-w-[140px] max-w-fit [&::-webkit-scrollbar]:hidden", title: `${colHeader}: ${selectedCount} Selected`, children: [_jsxs("span", { className: "uppercase truncate shrink font-semibold", children: [colHeader, ":"] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap shrink-0", children: [selectedCount, " Selected"] }), _jsx(ChevronDown, { className: "w-3.5 h-3.5 ml-1 opacity-50 shrink-0" }), _jsx("div", { className: "p-0.5 ml-1 rounded-full hover:bg-background/80 shrink-0", onClick: (e) => {
|
|
144
|
+
e.preventDefault();
|
|
145
|
+
e.stopPropagation();
|
|
146
|
+
removeActiveFilterColumn(colHeader);
|
|
147
|
+
}, onPointerDown: (e) => {
|
|
148
|
+
e.stopPropagation();
|
|
149
|
+
}, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setColumnSearchQueries(prev => (Object.assign(Object.assign({}, prev), { [colHeader]: e.target.value }))), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map(val => {
|
|
150
|
+
const isSelected = (tableFilters[colHeader] || []).includes(val);
|
|
151
|
+
return (_jsxs("button", { onClick: () => handleToggleFilterValue(colHeader, val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: val })] }, val));
|
|
152
|
+
}), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), (tableFilters[colHeader] || []).length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => setTableFilters(prev => { const next = Object.assign({}, prev); delete next[colHeader]; return next; }), children: "Clear Selections" }) }))] })] }, colHeader));
|
|
153
|
+
}) })), _jsxs("div", { className: "w-full flex items-center gap-2 p-2 border border-dashed border-border rounded-lg bg-muted/20 min-h-[48px] transition-all hover:bg-muted/40 group shadow-sm", onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
|
|
154
|
+
e.preventDefault();
|
|
155
|
+
const columnHeader = e.dataTransfer.getData("columnHeader");
|
|
156
|
+
if (columnHeader && !groupedColumns.includes(columnHeader)) {
|
|
157
|
+
handleToggleGroup(columnHeader);
|
|
158
|
+
}
|
|
159
|
+
}, children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs px-2 select-none border-r pr-4 mr-2 border-border/50", children: [_jsx(GripVertical, { className: "w-4 h-4 opacity-40" }), _jsx("span", { className: "font-semibold uppercase tracking-wider opacity-70", children: "Grouping" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupedColumns.length === 0 ? (_jsx("div", { className: "flex items-center gap-2 text-muted-foreground/60 text-sm italic py-1", children: _jsx("span", { children: "Drag column headers here to group your data..." }) })) : (groupedColumns.map(col => (_jsxs(Badge, { variant: "secondary", className: "gap-2 pl-3 pr-1.5 h-8 text-xs font-semibold bg-background border shadow-sm animate-in fade-in zoom-in duration-200", children: [col, _jsx("button", { onClick: () => handleToggleGroup(col), className: "hover:bg-muted rounded-full p-0.5 transition-colors", children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }, col)))) })] }), _jsxs("div", { className: "relative min-h-[300px] mt-2", children: [_jsx(Reload, { isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : false, onReload: onReload || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${isLoading ? 'opacity-50 pointer-events-none' : ''}`, children: viewMode === "list" ? (_jsx(DataTable, { data: data, columns: columns.filter(col => typeof col.header === "string" ? visibleColumns.includes(col.header) : true), keyExtractor: keyExtractor !== null && keyExtractor !== void 0 ? keyExtractor : (() => ""), onRowClick: onRowClick, groupedColumns: groupedColumns, onToggleGroup: handleToggleGroup })) : (_jsxs(_Fragment, { children: [gridComponent ? gridComponent(data) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })), viewMode === "grid" && hasMore && (_jsx("div", { ref: observerTarget, className: "flex justify-center p-6 w-full", children: _jsx("div", { className: "w-6 h-6 border-2 rounded-full animate-spin border-foreground border-t-transparent" }) }))] })) })] }), viewMode === "list" && (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: totalPages !== null && totalPages !== void 0 ? totalPages : 0, currentPage: currentPage !== null && currentPage !== void 0 ? currentPage : 0 })] }))] }));
|
|
12
160
|
}
|
|
@@ -1,6 +1,22 @@
|
|
|
1
|
+
export interface ColumnDef<T> {
|
|
2
|
+
header: string | (() => React.ReactNode);
|
|
3
|
+
accessorKey?: keyof T;
|
|
4
|
+
cell?: (row: T) => React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export interface DataTableProps<T> {
|
|
7
|
+
data: T[];
|
|
8
|
+
columns: ColumnDef<T>[];
|
|
9
|
+
keyExtractor: (row: T) => string | number;
|
|
10
|
+
onRowClick?: (row: T) => void;
|
|
11
|
+
groupedColumns?: string[];
|
|
12
|
+
onToggleGroup?: (columnHeader: string) => void;
|
|
13
|
+
}
|
|
1
14
|
export interface DataTableLayoutProps<T> {
|
|
2
15
|
data: T[];
|
|
3
16
|
columns: ColumnDef<T>[];
|
|
17
|
+
extraTools?: ExtraPrams<T>;
|
|
18
|
+
}
|
|
19
|
+
export type ExtraPrams<T> = {
|
|
4
20
|
keyExtractor: (row: T) => string | number;
|
|
5
21
|
totalPages: number;
|
|
6
22
|
currentPage: number;
|
|
@@ -10,15 +26,8 @@ export interface DataTableLayoutProps<T> {
|
|
|
10
26
|
gridComponent?: (data: T[]) => React.ReactNode;
|
|
11
27
|
isLoading?: boolean;
|
|
12
28
|
onReload?: () => void;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
export interface DataTableProps<T> {
|
|
20
|
-
data: T[];
|
|
21
|
-
columns: ColumnDef<T>[];
|
|
22
|
-
keyExtractor: (row: T) => string | number;
|
|
23
|
-
onRowClick?: (row: T) => void;
|
|
24
|
-
}
|
|
29
|
+
themeColor?: string;
|
|
30
|
+
onLoadMore?: () => void;
|
|
31
|
+
hasMore?: boolean;
|
|
32
|
+
onFilterChange?: (filters: Record<string, string[]>) => void;
|
|
33
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -127,6 +127,7 @@ export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/n
|
|
|
127
127
|
export type { ImageFormProps } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
|
|
128
128
|
export { WorkInProgress } from "./ikoncomponents/work-in-progress";
|
|
129
129
|
export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
|
|
130
|
+
export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
|
|
130
131
|
export { ThemeProvider } from "./utils/theme-provider";
|
|
131
132
|
export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
|
|
132
133
|
export { FontProvider, useFont } from "./utils/font-provider";
|
package/dist/index.js
CHANGED
|
@@ -107,7 +107,7 @@ export { NewCropperImg } from "./ikoncomponents/image-cropper-upload/components/
|
|
|
107
107
|
export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
|
|
108
108
|
export { WorkInProgress } from "./ikoncomponents/work-in-progress";
|
|
109
109
|
export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
|
|
110
|
-
|
|
110
|
+
export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
|
|
111
111
|
export { ThemeProvider } from "./utils/theme-provider";
|
|
112
112
|
export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
|
|
113
113
|
export { FontProvider, useFont } from "./utils/font-provider";
|