@dappworks/kit 0.4.83 → 0.4.85
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/chunk-A62VM3EE.mjs +494 -0
- package/dist/chunk-A62VM3EE.mjs.map +1 -0
- package/dist/jsontable.d.mts +4 -3
- package/dist/jsontable.mjs +1 -1
- package/dist/metrics.d.mts +6 -5
- package/dist/metrics.mjs +5 -3
- package/dist/metrics.mjs.map +1 -1
- package/dist/ui.mjs +2 -1
- package/dist/ui.mjs.map +1 -1
- package/package.json +2 -1
- package/dist/chunk-OLIJS6AT.mjs +0 -380
- package/dist/chunk-OLIJS6AT.mjs.map +0 -1
|
@@ -0,0 +1,494 @@
|
|
|
1
|
+
import { PaginationState } from './chunk-ONVPCAMQ.mjs';
|
|
2
|
+
import { SkeletonBox } from './chunk-ESZELIL2.mjs';
|
|
3
|
+
import { _ } from './chunk-MGU3KYGC.mjs';
|
|
4
|
+
import { cn } from './chunk-TMFAGW4V.mjs';
|
|
5
|
+
import { __objRest, __spreadValues } from './chunk-6F7H4PAA.mjs';
|
|
6
|
+
import * as React2 from 'react';
|
|
7
|
+
import React2__default, { useRef, useMemo, useState, useEffect } from 'react';
|
|
8
|
+
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Card, Divider, Spinner } from '@nextui-org/react';
|
|
9
|
+
import { ChevronRight, Check, Circle, ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
|
|
10
|
+
import { observer } from 'mobx-react-lite';
|
|
11
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
12
|
+
|
|
13
|
+
var DropdownMenu = DropdownMenuPrimitive.Root;
|
|
14
|
+
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
15
|
+
var DropdownMenuSubTrigger = React2.forwardRef((_a, ref) => {
|
|
16
|
+
var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
|
|
17
|
+
return /* @__PURE__ */ React2.createElement(
|
|
18
|
+
DropdownMenuPrimitive.SubTrigger,
|
|
19
|
+
__spreadValues({
|
|
20
|
+
ref,
|
|
21
|
+
className: cn(
|
|
22
|
+
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
|
23
|
+
inset && "pl-8",
|
|
24
|
+
className
|
|
25
|
+
)
|
|
26
|
+
}, props),
|
|
27
|
+
children,
|
|
28
|
+
/* @__PURE__ */ React2.createElement(ChevronRight, { className: "ml-auto h-4 w-4" })
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
|
32
|
+
var DropdownMenuSubContent = React2.forwardRef((_a, ref) => {
|
|
33
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
34
|
+
return /* @__PURE__ */ React2.createElement(
|
|
35
|
+
DropdownMenuPrimitive.SubContent,
|
|
36
|
+
__spreadValues({
|
|
37
|
+
ref,
|
|
38
|
+
className: cn(
|
|
39
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-md bg-white dark:bg-[#18181B] border dark:border-none p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
|
40
|
+
className
|
|
41
|
+
)
|
|
42
|
+
}, props)
|
|
43
|
+
);
|
|
44
|
+
});
|
|
45
|
+
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
|
46
|
+
var DropdownMenuContent = React2.forwardRef((_a, ref) => {
|
|
47
|
+
var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
|
|
48
|
+
return /* @__PURE__ */ React2.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React2.createElement(
|
|
49
|
+
DropdownMenuPrimitive.Content,
|
|
50
|
+
__spreadValues({
|
|
51
|
+
ref,
|
|
52
|
+
sideOffset,
|
|
53
|
+
className: cn(
|
|
54
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-lg bg-white dark:bg-[#18181B] border dark:border-[#3e3e3e] p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
55
|
+
className
|
|
56
|
+
)
|
|
57
|
+
}, props)
|
|
58
|
+
));
|
|
59
|
+
});
|
|
60
|
+
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
61
|
+
var DropdownMenuItem = React2.forwardRef((_a, ref) => {
|
|
62
|
+
var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
|
|
63
|
+
return /* @__PURE__ */ React2.createElement(
|
|
64
|
+
DropdownMenuPrimitive.Item,
|
|
65
|
+
__spreadValues({
|
|
66
|
+
ref,
|
|
67
|
+
className: cn(
|
|
68
|
+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
69
|
+
inset && "pl-8",
|
|
70
|
+
className
|
|
71
|
+
)
|
|
72
|
+
}, props)
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
76
|
+
var DropdownMenuCheckboxItem = React2.forwardRef((_a, ref) => {
|
|
77
|
+
var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
|
|
78
|
+
return /* @__PURE__ */ React2.createElement(
|
|
79
|
+
DropdownMenuPrimitive.CheckboxItem,
|
|
80
|
+
__spreadValues({
|
|
81
|
+
ref,
|
|
82
|
+
className: cn(
|
|
83
|
+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
84
|
+
className
|
|
85
|
+
),
|
|
86
|
+
checked
|
|
87
|
+
}, props),
|
|
88
|
+
/* @__PURE__ */ React2.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React2.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Check, { className: "h-4 w-4" }))),
|
|
89
|
+
children
|
|
90
|
+
);
|
|
91
|
+
});
|
|
92
|
+
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
|
93
|
+
var DropdownMenuRadioItem = React2.forwardRef((_a, ref) => {
|
|
94
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
95
|
+
return /* @__PURE__ */ React2.createElement(
|
|
96
|
+
DropdownMenuPrimitive.RadioItem,
|
|
97
|
+
__spreadValues({
|
|
98
|
+
ref,
|
|
99
|
+
className: cn(
|
|
100
|
+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
101
|
+
className
|
|
102
|
+
)
|
|
103
|
+
}, props),
|
|
104
|
+
/* @__PURE__ */ React2.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React2.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
|
|
105
|
+
children
|
|
106
|
+
);
|
|
107
|
+
});
|
|
108
|
+
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
|
109
|
+
var DropdownMenuLabel = React2.forwardRef((_a, ref) => {
|
|
110
|
+
var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
|
|
111
|
+
return /* @__PURE__ */ React2.createElement(
|
|
112
|
+
DropdownMenuPrimitive.Label,
|
|
113
|
+
__spreadValues({
|
|
114
|
+
ref,
|
|
115
|
+
className: cn(
|
|
116
|
+
"px-2 py-1.5 text-sm font-semibold",
|
|
117
|
+
inset && "pl-8",
|
|
118
|
+
className
|
|
119
|
+
)
|
|
120
|
+
}, props)
|
|
121
|
+
);
|
|
122
|
+
});
|
|
123
|
+
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
|
124
|
+
var DropdownMenuSeparator = React2.forwardRef((_a, ref) => {
|
|
125
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
126
|
+
return /* @__PURE__ */ React2.createElement(
|
|
127
|
+
DropdownMenuPrimitive.Separator,
|
|
128
|
+
__spreadValues({
|
|
129
|
+
ref,
|
|
130
|
+
className: cn("-mx-1 my-1 h-px bg-muted", className)
|
|
131
|
+
}, props)
|
|
132
|
+
);
|
|
133
|
+
});
|
|
134
|
+
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
|
135
|
+
|
|
136
|
+
// components/JSONTable/index.tsx
|
|
137
|
+
var JSONTable = observer((props) => {
|
|
138
|
+
const {
|
|
139
|
+
className,
|
|
140
|
+
classNames = {},
|
|
141
|
+
dataSource,
|
|
142
|
+
columnOptions,
|
|
143
|
+
headerKeys,
|
|
144
|
+
isServerPaging,
|
|
145
|
+
pagination = new PaginationState({
|
|
146
|
+
page: 1,
|
|
147
|
+
limit: 8
|
|
148
|
+
}),
|
|
149
|
+
nextuiPaginationProps = {},
|
|
150
|
+
rowKey = "id",
|
|
151
|
+
onRowClick,
|
|
152
|
+
rowCss,
|
|
153
|
+
asCard = false,
|
|
154
|
+
cardOptions = {
|
|
155
|
+
boxClassName: "",
|
|
156
|
+
cardClassName: "",
|
|
157
|
+
itemClassName: "",
|
|
158
|
+
showDivider: true,
|
|
159
|
+
dividerClassName: ""
|
|
160
|
+
},
|
|
161
|
+
autoScrollToTop = false,
|
|
162
|
+
emptyContent = "No Data",
|
|
163
|
+
isLoading = false,
|
|
164
|
+
loadingOptions,
|
|
165
|
+
loadingContent,
|
|
166
|
+
isHeaderSticky = false,
|
|
167
|
+
sortingUIOptions,
|
|
168
|
+
extendedTableOptions = []
|
|
169
|
+
} = props;
|
|
170
|
+
const tableBoxRef = useRef(null);
|
|
171
|
+
const { columns, sortableColumnsDefaultValue } = useMemo(() => {
|
|
172
|
+
const firstData = dataSource[0];
|
|
173
|
+
const allKeys = firstData ? Object.keys(firstData) : [];
|
|
174
|
+
const keys = headerKeys ? headerKeys : columnOptions ? allKeys.filter((key) => {
|
|
175
|
+
var _a;
|
|
176
|
+
return !((_a = columnOptions[key]) == null ? void 0 : _a.hidden);
|
|
177
|
+
}) : allKeys;
|
|
178
|
+
if (!keys.includes("$actions") && columnOptions && columnOptions["$actions"]) {
|
|
179
|
+
keys.push("$actions");
|
|
180
|
+
}
|
|
181
|
+
const sortableColumnsDefaultValue2 = {};
|
|
182
|
+
const columns2 = keys.map((key) => {
|
|
183
|
+
var _a, _b, _c;
|
|
184
|
+
const sortable = (_a = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _a.sortable;
|
|
185
|
+
if (sortable) {
|
|
186
|
+
sortableColumnsDefaultValue2[key] = "none";
|
|
187
|
+
}
|
|
188
|
+
return {
|
|
189
|
+
key,
|
|
190
|
+
label: ((_b = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _b.label) || (key === "$actions" ? "" : key),
|
|
191
|
+
render: (_c = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _c.render
|
|
192
|
+
};
|
|
193
|
+
});
|
|
194
|
+
if (!headerKeys && columnOptions) {
|
|
195
|
+
columns2.sort((a, b) => {
|
|
196
|
+
var _a, _b;
|
|
197
|
+
const aOrder = ((_a = columnOptions[a.key]) == null ? void 0 : _a.order) || 0;
|
|
198
|
+
const bOrder = ((_b = columnOptions[b.key]) == null ? void 0 : _b.order) || 0;
|
|
199
|
+
return bOrder - aOrder;
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
const extendedTables = firstData ? extendedTableOptions.filter((item) => {
|
|
203
|
+
return Array.isArray(firstData[item.key]);
|
|
204
|
+
}).map((item) => {
|
|
205
|
+
const index = columns2.findIndex((c) => c.key === item.key);
|
|
206
|
+
if (index > -1) {
|
|
207
|
+
columns2.splice(index, 1);
|
|
208
|
+
}
|
|
209
|
+
const keys2 = Object.keys(item.columnOptions);
|
|
210
|
+
return {
|
|
211
|
+
key: item.key,
|
|
212
|
+
columns: keys2.map((k) => {
|
|
213
|
+
const option = item.columnOptions[k];
|
|
214
|
+
return {
|
|
215
|
+
key: k,
|
|
216
|
+
label: (option == null ? void 0 : option.label) || k,
|
|
217
|
+
render: option == null ? void 0 : option.render
|
|
218
|
+
};
|
|
219
|
+
})
|
|
220
|
+
};
|
|
221
|
+
}) : [];
|
|
222
|
+
return {
|
|
223
|
+
columns: columns2,
|
|
224
|
+
extendedTables,
|
|
225
|
+
sortableColumnsDefaultValue: sortableColumnsDefaultValue2
|
|
226
|
+
};
|
|
227
|
+
}, [dataSource, columnOptions]);
|
|
228
|
+
const [sortableColumnsMap, setSortableColumnsMap] = useState({});
|
|
229
|
+
const [sortedData, setSortedData] = useState(dataSource);
|
|
230
|
+
useEffect(() => {
|
|
231
|
+
setSortableColumnsMap(sortableColumnsDefaultValue);
|
|
232
|
+
}, [sortableColumnsDefaultValue]);
|
|
233
|
+
useEffect(() => {
|
|
234
|
+
setSortedData(dataSource);
|
|
235
|
+
if (!isServerPaging) {
|
|
236
|
+
pagination.setData({
|
|
237
|
+
total: dataSource.length
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
}, [dataSource]);
|
|
241
|
+
const data = isServerPaging ? sortedData : sortedData.slice(pagination.offset, pagination.offset + pagination.limit);
|
|
242
|
+
if (asCard) {
|
|
243
|
+
return /* @__PURE__ */ React2__default.createElement(
|
|
244
|
+
CardUI,
|
|
245
|
+
{
|
|
246
|
+
className,
|
|
247
|
+
rowKey,
|
|
248
|
+
data,
|
|
249
|
+
columns,
|
|
250
|
+
columnOptions,
|
|
251
|
+
cardOptions,
|
|
252
|
+
pagination,
|
|
253
|
+
nextuiPaginationProps,
|
|
254
|
+
onRowClick,
|
|
255
|
+
autoScrollToTop,
|
|
256
|
+
emptyContent,
|
|
257
|
+
isLoading,
|
|
258
|
+
loadingOptions,
|
|
259
|
+
loadingContent
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
return /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, null, /* @__PURE__ */ React2__default.createElement(
|
|
264
|
+
Table,
|
|
265
|
+
{
|
|
266
|
+
removeWrapper: true,
|
|
267
|
+
isHeaderSticky,
|
|
268
|
+
className: cn("relative w-full overflow-auto h-[400px]", className),
|
|
269
|
+
classNames,
|
|
270
|
+
ref: tableBoxRef
|
|
271
|
+
},
|
|
272
|
+
/* @__PURE__ */ React2__default.createElement(TableHeader, { columns }, columns.map((item) => {
|
|
273
|
+
var _a, _b, _c;
|
|
274
|
+
return /* @__PURE__ */ React2__default.createElement(TableColumn, { key: item.key }, /* @__PURE__ */ React2__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React2__default.createElement("span", null, item.label), !!sortableColumnsMap[item.key] && /* @__PURE__ */ React2__default.createElement(DropdownMenu, null, /* @__PURE__ */ React2__default.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React2__default.createElement("button", { className: cn("outline-none p-1", sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownTriggerBtnClassName) }, sortableColumnsMap[item.key] === "desc" && /* @__PURE__ */ React2__default.createElement(ChevronDown, { size: 14 }), sortableColumnsMap[item.key] === "asc" && /* @__PURE__ */ React2__default.createElement(ChevronUp, { size: 14 }), sortableColumnsMap[item.key] === "none" && /* @__PURE__ */ React2__default.createElement(ChevronsUpDown, { size: 14 }))), /* @__PURE__ */ React2__default.createElement(DropdownMenuContent, { className: cn("p-2 space-y-1 min-w-[4rem]", sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownContentClassName), collisionPadding: 10, sideOffset: 5 }, /* @__PURE__ */ React2__default.createElement(
|
|
275
|
+
DropdownMenuItem,
|
|
276
|
+
{
|
|
277
|
+
className: cn("text-xs font-bold cursor-pointer", sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownItemClassName),
|
|
278
|
+
onClick: () => {
|
|
279
|
+
var _a2;
|
|
280
|
+
const { sortableColumns, sortedData: sortedData2 } = sortData({
|
|
281
|
+
type: "asc",
|
|
282
|
+
key: item.key,
|
|
283
|
+
sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
|
|
284
|
+
sortableColumnsMap,
|
|
285
|
+
dataSource
|
|
286
|
+
});
|
|
287
|
+
setSortableColumnsMap(sortableColumns);
|
|
288
|
+
setSortedData(sortedData2);
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
((_a = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _a.asc) || "ASC"
|
|
292
|
+
), /* @__PURE__ */ React2__default.createElement(
|
|
293
|
+
DropdownMenuItem,
|
|
294
|
+
{
|
|
295
|
+
className: cn("text-xs font-bold cursor-pointer", sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownItemClassName),
|
|
296
|
+
onClick: () => {
|
|
297
|
+
var _a2;
|
|
298
|
+
const { sortableColumns, sortedData: sortedData2 } = sortData({
|
|
299
|
+
type: "desc",
|
|
300
|
+
key: item.key,
|
|
301
|
+
sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
|
|
302
|
+
sortableColumnsMap,
|
|
303
|
+
dataSource
|
|
304
|
+
});
|
|
305
|
+
setSortableColumnsMap(sortableColumns);
|
|
306
|
+
setSortedData(sortedData2);
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
((_b = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _b.desc) || "DESC"
|
|
310
|
+
), /* @__PURE__ */ React2__default.createElement(
|
|
311
|
+
DropdownMenuItem,
|
|
312
|
+
{
|
|
313
|
+
className: cn("text-xs font-bold cursor-pointer", sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownItemClassName),
|
|
314
|
+
onClick: () => {
|
|
315
|
+
var _a2;
|
|
316
|
+
const { sortableColumns, sortedData: sortedData2 } = sortData({
|
|
317
|
+
type: "none",
|
|
318
|
+
key: item.key,
|
|
319
|
+
sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
|
|
320
|
+
sortableColumnsMap,
|
|
321
|
+
dataSource
|
|
322
|
+
});
|
|
323
|
+
setSortableColumnsMap(sortableColumns);
|
|
324
|
+
setSortedData(sortedData2);
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
((_c = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _c.none) || "NONE"
|
|
328
|
+
)))));
|
|
329
|
+
})),
|
|
330
|
+
isLoading ? /* @__PURE__ */ React2__default.createElement(TableBody, { emptyContent: loadingContent || DefaultLoading({ loadingOptions }) }, []) : data.length > 0 ? /* @__PURE__ */ React2__default.createElement(TableBody, null, data.map((item, index) => {
|
|
331
|
+
return /* @__PURE__ */ React2__default.createElement(
|
|
332
|
+
TableRow,
|
|
333
|
+
{
|
|
334
|
+
key: item[rowKey] || index,
|
|
335
|
+
className: cn("", typeof rowCss === "function" ? rowCss(item) : rowCss),
|
|
336
|
+
onClick: () => {
|
|
337
|
+
onRowClick == null ? void 0 : onRowClick(item);
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
columns.map((column) => {
|
|
341
|
+
return /* @__PURE__ */ React2__default.createElement(TableCell, { key: column.key }, column.render ? column.render(item) : renderFieldValue(item[column.key]));
|
|
342
|
+
})
|
|
343
|
+
);
|
|
344
|
+
})) : /* @__PURE__ */ React2__default.createElement(TableBody, { emptyContent }, [])
|
|
345
|
+
), pagination.total > pagination.limit && /* @__PURE__ */ React2__default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React2__default.createElement(
|
|
346
|
+
Pagination,
|
|
347
|
+
__spreadValues({
|
|
348
|
+
className: "mt-2",
|
|
349
|
+
showControls: true,
|
|
350
|
+
showShadow: true,
|
|
351
|
+
size: "sm",
|
|
352
|
+
radius: "sm",
|
|
353
|
+
color: "primary",
|
|
354
|
+
initialPage: 1,
|
|
355
|
+
total: Math.ceil(pagination.total / pagination.limit),
|
|
356
|
+
page: pagination.page,
|
|
357
|
+
onChange: (currentPage) => {
|
|
358
|
+
pagination.setData({
|
|
359
|
+
page: currentPage
|
|
360
|
+
});
|
|
361
|
+
if (autoScrollToTop && tableBoxRef.current) {
|
|
362
|
+
scrollIntoTop(tableBoxRef.current);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}, nextuiPaginationProps)
|
|
366
|
+
)));
|
|
367
|
+
});
|
|
368
|
+
function renderFieldValue(v) {
|
|
369
|
+
if (typeof v == "string" || typeof v == "number") {
|
|
370
|
+
return v;
|
|
371
|
+
}
|
|
372
|
+
if (v == null) {
|
|
373
|
+
return null;
|
|
374
|
+
}
|
|
375
|
+
return JSON.stringify(v);
|
|
376
|
+
}
|
|
377
|
+
function sortData({
|
|
378
|
+
sortKey,
|
|
379
|
+
key,
|
|
380
|
+
type,
|
|
381
|
+
sortableColumnsMap,
|
|
382
|
+
dataSource
|
|
383
|
+
}) {
|
|
384
|
+
const sortableColumns = {};
|
|
385
|
+
Object.keys(sortableColumnsMap).map((k) => {
|
|
386
|
+
sortableColumns[k] = k === key ? type : "none";
|
|
387
|
+
});
|
|
388
|
+
let sortedData = dataSource;
|
|
389
|
+
if (type !== "none") {
|
|
390
|
+
const result = _.orderBy(
|
|
391
|
+
dataSource,
|
|
392
|
+
(o) => {
|
|
393
|
+
const v = _.get(o, sortKey || key);
|
|
394
|
+
if (v == null) {
|
|
395
|
+
return type === "desc" ? "" : v;
|
|
396
|
+
}
|
|
397
|
+
if (typeof v === "string") {
|
|
398
|
+
const _v = Number(v);
|
|
399
|
+
if (isNaN(_v)) {
|
|
400
|
+
return v.toLowerCase();
|
|
401
|
+
} else {
|
|
402
|
+
return _v;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
return v;
|
|
406
|
+
},
|
|
407
|
+
type
|
|
408
|
+
);
|
|
409
|
+
sortedData = result;
|
|
410
|
+
}
|
|
411
|
+
return {
|
|
412
|
+
sortableColumns,
|
|
413
|
+
sortedData
|
|
414
|
+
};
|
|
415
|
+
}
|
|
416
|
+
function CardUI({
|
|
417
|
+
className,
|
|
418
|
+
data,
|
|
419
|
+
columns,
|
|
420
|
+
columnOptions,
|
|
421
|
+
rowKey,
|
|
422
|
+
cardOptions,
|
|
423
|
+
pagination,
|
|
424
|
+
nextuiPaginationProps,
|
|
425
|
+
onRowClick,
|
|
426
|
+
autoScrollToTop,
|
|
427
|
+
emptyContent,
|
|
428
|
+
isLoading,
|
|
429
|
+
loadingOptions,
|
|
430
|
+
loadingContent
|
|
431
|
+
}) {
|
|
432
|
+
const cardBoxRef = useRef(null);
|
|
433
|
+
return /* @__PURE__ */ React2__default.createElement("div", { className, ref: cardBoxRef }, /* @__PURE__ */ React2__default.createElement("div", { className: cn("space-y-2", cardOptions == null ? void 0 : cardOptions.boxClassName) }, isLoading ? loadingContent ? /* @__PURE__ */ React2__default.createElement(Card, { className: cn("w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400", cardOptions == null ? void 0 : cardOptions.cardClassName) }, loadingContent) : /* @__PURE__ */ React2__default.createElement(DefaultLoading, { loadingOptions }) : data.length > 0 ? data.map((item, index) => {
|
|
434
|
+
return /* @__PURE__ */ React2__default.createElement(
|
|
435
|
+
Card,
|
|
436
|
+
{
|
|
437
|
+
key: item[rowKey] || index,
|
|
438
|
+
className: cn("w-full shadow-sm p-4", cardOptions == null ? void 0 : cardOptions.cardClassName),
|
|
439
|
+
isPressable: !!onRowClick,
|
|
440
|
+
onPress: () => {
|
|
441
|
+
onRowClick == null ? void 0 : onRowClick(item);
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
columns.map((column, i) => {
|
|
445
|
+
const option = columnOptions == null ? void 0 : columnOptions[column.key];
|
|
446
|
+
return /* @__PURE__ */ React2__default.createElement("div", { className: "w-full", key: column.key }, /* @__PURE__ */ React2__default.createElement("div", { className: cn("w-full", cardOptions == null ? void 0 : cardOptions.itemClassName) }, /* @__PURE__ */ React2__default.createElement("div", { className: cn("font-meidum text-xs text-foreground-400", option == null ? void 0 : option.labelClassName) }, column.label), /* @__PURE__ */ React2__default.createElement("div", { className: cn("text-xs", option == null ? void 0 : option.valueClassName) }, column.render ? column.render(item) : renderFieldValue(item[column.key]))), (cardOptions == null ? void 0 : cardOptions.showDivider) && i !== columns.length - 1 && /* @__PURE__ */ React2__default.createElement(Divider, { className: cn("my-2", cardOptions == null ? void 0 : cardOptions.dividerClassName) }));
|
|
447
|
+
})
|
|
448
|
+
);
|
|
449
|
+
}) : /* @__PURE__ */ React2__default.createElement(Card, { className: cn("w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400", cardOptions == null ? void 0 : cardOptions.cardClassName) }, emptyContent)), pagination.total > pagination.limit && /* @__PURE__ */ React2__default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React2__default.createElement(
|
|
450
|
+
Pagination,
|
|
451
|
+
__spreadValues({
|
|
452
|
+
className: "mt-2",
|
|
453
|
+
showControls: true,
|
|
454
|
+
showShadow: true,
|
|
455
|
+
size: "sm",
|
|
456
|
+
radius: "sm",
|
|
457
|
+
color: "primary",
|
|
458
|
+
initialPage: 1,
|
|
459
|
+
total: Math.ceil(pagination.total / pagination.limit),
|
|
460
|
+
page: pagination.page,
|
|
461
|
+
onChange: (currentPage) => {
|
|
462
|
+
pagination.setData({
|
|
463
|
+
page: currentPage
|
|
464
|
+
});
|
|
465
|
+
if (autoScrollToTop && cardBoxRef.current) {
|
|
466
|
+
scrollIntoTop(cardBoxRef.current);
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
}, nextuiPaginationProps)
|
|
470
|
+
)));
|
|
471
|
+
}
|
|
472
|
+
function DefaultLoading({ loadingOptions }) {
|
|
473
|
+
const type = (loadingOptions == null ? void 0 : loadingOptions.type) || "skeleton";
|
|
474
|
+
const skeletonOptions = loadingOptions == null ? void 0 : loadingOptions.skeleton;
|
|
475
|
+
const spinnerOptions = loadingOptions == null ? void 0 : loadingOptions.spinner;
|
|
476
|
+
const spinnerProps = (spinnerOptions == null ? void 0 : spinnerOptions.spinnerProps) || {};
|
|
477
|
+
if (type === "skeleton") {
|
|
478
|
+
return /* @__PURE__ */ React2__default.createElement(SkeletonBox, { className: cn("mt-2 flex-col", skeletonOptions == null ? void 0 : skeletonOptions.boxClassName), skClassName: cn("h-[30px] rounded", skeletonOptions == null ? void 0 : skeletonOptions.skeletonClassName), line: (skeletonOptions == null ? void 0 : skeletonOptions.line) || 5 });
|
|
479
|
+
}
|
|
480
|
+
return /* @__PURE__ */ React2__default.createElement("div", { className: cn("w-full h-[100px] flex justify-center items-center", spinnerOptions == null ? void 0 : spinnerOptions.boxClassName) }, /* @__PURE__ */ React2__default.createElement(Spinner, __spreadValues({ size: "sm", color: "primary" }, spinnerProps)), /* @__PURE__ */ React2__default.createElement("div", { className: cn("ml-2 text-[#64748B] text-sm", spinnerOptions == null ? void 0 : spinnerOptions.textClassName) }, (spinnerOptions == null ? void 0 : spinnerOptions.text) || "Loading..."));
|
|
481
|
+
}
|
|
482
|
+
function scrollIntoTop(target) {
|
|
483
|
+
if (target) {
|
|
484
|
+
const { top } = target.getBoundingClientRect();
|
|
485
|
+
window.scrollTo({
|
|
486
|
+
top: top + window.scrollY - 100,
|
|
487
|
+
behavior: "smooth"
|
|
488
|
+
});
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
export { JSONTable };
|
|
493
|
+
//# sourceMappingURL=out.js.map
|
|
494
|
+
//# sourceMappingURL=chunk-A62VM3EE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../components/JSONTable/index.tsx","../components/ui/dropdown-menu.tsx"],"names":["React","sortableColumnsDefaultValue","columns","keys","_a","sortedData"],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n Card,\n Divider,\n Pagination as NextuiPagination,\n PaginationProps,\n SlotsToClasses,\n Spinner,\n SpinnerProps,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n TableSlots,\n} from '@nextui-org/react';\nimport { ChevronDown, ChevronUp, ChevronsUpDown } from \"lucide-react\";\nimport { observer } from \"mobx-react-lite\";\nimport { PaginationState } from \"../../store/standard/PaginationState\";\nimport { SkeletonBox } from \"../Common/SkeletonBox\";\nimport { _ } from \"../../lib/lodash\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';\n\nexport type HeaderKeys<T extends Record<string, any>> = Array<keyof T | '$actions'>;\n\nexport type ColumnOptions<T> = {\n [key in keyof T]?: {\n label?: React.ReactNode;\n hidden?: boolean;\n sortable?: boolean;\n sortKey?: string;\n order?: number;\n render?: (item: T) => any;\n labelClassName?: string;\n valueClassName?: string;\n };\n} & {\n $actions?: {\n label?: React.ReactNode;\n hidden?: boolean;\n sortable?: boolean;\n sortKey?: string;\n order?: number;\n render?: (item: T) => any;\n labelClassName?: string;\n valueClassName?: string;\n };\n};\n\nexport type Column<T> = {\n key: string;\n label: React.ReactNode;\n render?: (item: T) => any;\n};\n\nexport type ExtendedTable<U> = {\n key: string;\n columns: Column<U>[];\n};\n\nexport type CardOptions = {\n boxClassName?: string;\n cardClassName?: string;\n itemClassName?: string;\n showDivider?: boolean;\n dividerClassName?: string;\n};\n\ntype LoadingOptions = {\n type?: 'skeleton' | 'spinner';\n skeleton?: {\n boxClassName?: string;\n skeletonClassName?: string;\n line?: number;\n };\n spinner?: {\n boxClassName?: string;\n spinnerProps?: SpinnerProps;\n text?: string;\n textClassName?: string;\n };\n};\n\nexport interface JSONTableProps<T extends Record<string, any>> {\n className?: string;\n classNames?: SlotsToClasses<TableSlots>;\n rowKey?: keyof T;\n dataSource: T[];\n headerKeys?: HeaderKeys<T>;\n columnOptions?: ColumnOptions<T>;\n isServerPaging?: boolean;\n pagination?: PaginationState;\n nextuiPaginationProps?: PaginationProps | {};\n onRowClick?: (item: T) => void;\n rowCss?: string | ((item: T) => string | undefined);\n asCard?: boolean;\n cardOptions?: CardOptions;\n autoScrollToTop?: boolean;\n emptyContent?: React.ReactNode;\n isLoading?: boolean;\n loadingOptions?: LoadingOptions;\n loadingContent?: React.ReactNode;\n isHeaderSticky?: boolean;\n sortingUIOptions?: {\n dropdownTriggerBtnClassName?: string;\n dropdownContentClassName?: string;\n dropdownItemClassName?: string;\n titles?: {\n asc?: string;\n desc?: string;\n none?: string;\n };\n };\n extendedTableOptions?: {\n key: keyof T;\n columnOptions: ColumnOptions<any>;\n }[];\n}\n\nexport const JSONTable = observer(<T extends Record<string, any>>(props: JSONTableProps<T>) => {\n const {\n className,\n classNames = {},\n dataSource,\n columnOptions,\n headerKeys,\n isServerPaging,\n pagination = new PaginationState({\n page: 1,\n limit: 8,\n }),\n nextuiPaginationProps = {},\n rowKey = 'id',\n onRowClick,\n rowCss,\n asCard = false,\n cardOptions = {\n boxClassName: '',\n cardClassName: '',\n itemClassName: '',\n showDivider: true,\n dividerClassName: '',\n },\n autoScrollToTop = false,\n emptyContent = 'No Data',\n isLoading = false,\n loadingOptions,\n loadingContent,\n isHeaderSticky = false,\n sortingUIOptions,\n extendedTableOptions = [],\n } = props;\n\n const tableBoxRef = useRef<HTMLElement>(null);\n\n const { columns, sortableColumnsDefaultValue } = useMemo(() => {\n const firstData = dataSource[0];\n\n const allKeys = firstData ? Object.keys(firstData) : [];\n const keys = headerKeys ? headerKeys : columnOptions ? allKeys.filter((key) => !columnOptions[key]?.hidden) : allKeys;\n if (!keys.includes('$actions') && columnOptions && columnOptions['$actions']) {\n keys.push('$actions');\n }\n\n const sortableColumnsDefaultValue: { [k: string]: 'asc' | 'desc' | 'none' } = {};\n\n // @ts-ignore\n const columns: Column<T>[] = keys.map((key: string) => {\n const sortable = columnOptions?.[key]?.sortable;\n if (sortable) {\n sortableColumnsDefaultValue[key] = 'none';\n }\n return {\n key,\n label: columnOptions?.[key]?.label || (key === '$actions' ? '' : key),\n render: columnOptions?.[key]?.render,\n };\n });\n\n if (!headerKeys && columnOptions) {\n columns.sort((a, b) => {\n const aOrder = columnOptions[a.key]?.order || 0;\n const bOrder = columnOptions[b.key]?.order || 0;\n return bOrder - aOrder;\n });\n }\n\n const extendedTables = firstData\n ? extendedTableOptions\n .filter((item) => {\n return Array.isArray(firstData[item.key]);\n })\n .map((item) => {\n const index = columns.findIndex((c) => c.key === item.key);\n if (index > -1) {\n columns.splice(index, 1);\n }\n const keys = Object.keys(item.columnOptions);\n return {\n key: item.key as string,\n columns: keys.map((k) => {\n const option = item.columnOptions[k];\n return {\n key: k,\n label: option?.label || k,\n render: option?.render,\n };\n }),\n };\n })\n : [];\n\n return {\n columns,\n extendedTables,\n sortableColumnsDefaultValue,\n };\n }, [dataSource, columnOptions]);\n\n const [sortableColumnsMap, setSortableColumnsMap] = useState<{ [k: string]: 'asc' | 'desc' | 'none' }>({});\n const [sortedData, setSortedData] = useState<T[]>(dataSource);\n\n useEffect(() => {\n setSortableColumnsMap(sortableColumnsDefaultValue);\n }, [sortableColumnsDefaultValue]);\n\n useEffect(() => {\n setSortedData(dataSource);\n if (!isServerPaging) {\n pagination.setData({\n total: dataSource.length,\n });\n }\n }, [dataSource]);\n\n const data = isServerPaging ? sortedData : sortedData.slice(pagination.offset, pagination.offset + pagination.limit);\n\n if (asCard) {\n return (\n <CardUI\n className={className}\n rowKey={rowKey}\n data={data}\n columns={columns}\n columnOptions={columnOptions}\n cardOptions={cardOptions}\n pagination={pagination}\n nextuiPaginationProps={nextuiPaginationProps}\n onRowClick={onRowClick}\n autoScrollToTop={autoScrollToTop}\n emptyContent={emptyContent}\n isLoading={isLoading}\n loadingOptions={loadingOptions}\n loadingContent={loadingContent}\n />\n );\n }\n\n return (\n <>\n <Table\n removeWrapper\n isHeaderSticky={isHeaderSticky}\n className={cn('relative w-full overflow-auto h-[400px]', className)}\n classNames={classNames}\n ref={tableBoxRef}\n >\n <TableHeader columns={columns}>\n {columns.map((item) => (\n <TableColumn key={item.key}>\n <div className=\"flex items-center\">\n <span>{item.label}</span>\n {!!sortableColumnsMap[item.key] && (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <button className={cn('outline-none p-1', sortingUIOptions?.dropdownTriggerBtnClassName)}>\n {sortableColumnsMap[item.key] === 'desc' && <ChevronDown size={14} />}\n {sortableColumnsMap[item.key] === 'asc' && <ChevronUp size={14} />}\n {sortableColumnsMap[item.key] === 'none' && <ChevronsUpDown size={14} />}\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className={cn('p-2 space-y-1 min-w-[4rem]', sortingUIOptions?.dropdownContentClassName)} collisionPadding={10} sideOffset={5}>\n <DropdownMenuItem\n className={cn('text-xs font-bold cursor-pointer', sortingUIOptions?.dropdownItemClassName)}\n onClick={() => {\n const { sortableColumns, sortedData } = sortData({\n type: 'asc',\n key: item.key,\n sortKey: columnOptions?.[item.key]?.sortKey,\n sortableColumnsMap,\n dataSource,\n });\n setSortableColumnsMap(sortableColumns);\n setSortedData(sortedData);\n }}\n >\n {sortingUIOptions?.titles?.asc || 'ASC'}\n </DropdownMenuItem>\n <DropdownMenuItem\n className={cn('text-xs font-bold cursor-pointer', sortingUIOptions?.dropdownItemClassName)}\n onClick={() => {\n const { sortableColumns, sortedData } = sortData({\n type: 'desc',\n key: item.key,\n sortKey: columnOptions?.[item.key]?.sortKey,\n sortableColumnsMap,\n dataSource,\n });\n setSortableColumnsMap(sortableColumns);\n setSortedData(sortedData);\n }}\n >\n {sortingUIOptions?.titles?.desc || 'DESC'}\n </DropdownMenuItem>\n <DropdownMenuItem\n className={cn('text-xs font-bold cursor-pointer', sortingUIOptions?.dropdownItemClassName)}\n onClick={() => {\n const { sortableColumns, sortedData } = sortData({\n type: 'none',\n key: item.key,\n sortKey: columnOptions?.[item.key]?.sortKey,\n sortableColumnsMap,\n dataSource,\n });\n setSortableColumnsMap(sortableColumns);\n setSortedData(sortedData);\n }}\n >\n {sortingUIOptions?.titles?.none || 'NONE'}\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </TableColumn>\n ))}\n </TableHeader>\n {isLoading ? (\n <TableBody emptyContent={loadingContent || DefaultLoading({ loadingOptions })}>{[]}</TableBody>\n ) : data.length > 0 ? (\n <TableBody>\n {data.map((item, index) => {\n return (\n <TableRow\n key={item[rowKey] || index}\n className={cn('', typeof rowCss === 'function' ? rowCss(item) : rowCss)}\n onClick={() => {\n onRowClick?.(item);\n }}\n >\n {columns.map((column) => {\n return <TableCell key={column.key}>{column.render ? column.render(item) : renderFieldValue(item[column.key])}</TableCell>;\n })}\n </TableRow>\n );\n })}\n </TableBody>\n ) : (\n <TableBody emptyContent={emptyContent}>{[]}</TableBody>\n )}\n </Table>\n {pagination.total > pagination.limit && (\n <div className=\"flex justify-center\">\n <NextuiPagination\n className=\"mt-2\"\n showControls\n showShadow\n size=\"sm\"\n radius=\"sm\"\n color=\"primary\"\n initialPage={1}\n total={Math.ceil(pagination.total / pagination.limit)}\n page={pagination.page}\n onChange={(currentPage) => {\n pagination.setData({\n page: currentPage,\n });\n if (autoScrollToTop && tableBoxRef.current) {\n scrollIntoTop(tableBoxRef.current);\n }\n }}\n {...nextuiPaginationProps}\n />\n </div>\n )}\n </>\n );\n});\n\nfunction renderFieldValue(v: any) {\n if (typeof v == 'string' || typeof v == 'number') {\n return v;\n }\n if (v == null) {\n return null;\n }\n return JSON.stringify(v);\n}\n\nfunction sortData<T>({\n sortKey,\n key,\n type,\n sortableColumnsMap,\n dataSource,\n}: {\n sortKey: string | undefined;\n key: string;\n type: 'asc' | 'desc' | 'none';\n sortableColumnsMap: {\n [k: string]: 'asc' | 'desc' | 'none';\n };\n dataSource: T[];\n}) {\n const sortableColumns: { [k: string]: 'asc' | 'desc' | 'none' } = {};\n Object.keys(sortableColumnsMap).map((k) => {\n sortableColumns[k] = k === key ? type : 'none';\n });\n let sortedData = dataSource;\n if (type !== 'none') {\n const result = _.orderBy(\n dataSource,\n (o) => {\n const v = _.get(o, sortKey || key);\n if (v == null) {\n return type === 'desc' ? '' : v;\n }\n if (typeof v === 'string') {\n const _v = Number(v);\n if (isNaN(_v)) {\n return v.toLowerCase();\n } else {\n return _v;\n }\n }\n return v;\n },\n type,\n );\n sortedData = result;\n }\n return {\n sortableColumns,\n sortedData,\n };\n}\n\nfunction CardUI<T>({\n className,\n data,\n columns,\n columnOptions,\n rowKey,\n cardOptions,\n pagination,\n nextuiPaginationProps,\n onRowClick,\n autoScrollToTop,\n emptyContent,\n isLoading,\n loadingOptions,\n loadingContent,\n}: {\n className?: string;\n data: T[];\n columns: Column<T>[];\n columnOptions?: ColumnOptions<T>;\n rowKey: string | number | symbol;\n cardOptions?: CardOptions;\n pagination: PaginationState;\n nextuiPaginationProps: PaginationProps | {};\n onRowClick?: (item: T) => void;\n autoScrollToTop?: boolean;\n emptyContent?: React.ReactNode;\n isLoading?: boolean;\n loadingOptions?: LoadingOptions;\n loadingContent?: React.ReactNode;\n}) {\n const cardBoxRef = useRef<HTMLDivElement>(null);\n return (\n <div className={className} ref={cardBoxRef}>\n <div className={cn('space-y-2', cardOptions?.boxClassName)}>\n {isLoading ? (\n loadingContent ? (\n <Card className={cn('w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400', cardOptions?.cardClassName)}>{loadingContent}</Card>\n ) : (\n <DefaultLoading loadingOptions={loadingOptions} />\n )\n ) : data.length > 0 ? (\n data.map((item, index) => {\n return (\n <Card\n key={item[rowKey] || index}\n className={cn('w-full shadow-sm p-4', cardOptions?.cardClassName)}\n isPressable={!!onRowClick}\n onPress={() => {\n onRowClick?.(item);\n }}\n >\n {columns.map((column, i) => {\n const option = columnOptions?.[column.key];\n return (\n <div className=\"w-full\" key={column.key}>\n <div className={cn('w-full', cardOptions?.itemClassName)}>\n <div className={cn('font-meidum text-xs text-foreground-400', option?.labelClassName)}>{column.label}</div>\n <div className={cn('text-xs', option?.valueClassName)}>{column.render ? column.render(item) : renderFieldValue(item[column.key])}</div>\n </div>\n {cardOptions?.showDivider && i !== columns.length - 1 && <Divider className={cn('my-2', cardOptions?.dividerClassName)} />}\n </div>\n );\n })}\n </Card>\n );\n })\n ) : (\n <Card className={cn('w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400', cardOptions?.cardClassName)}>{emptyContent}</Card>\n )}\n </div>\n {pagination.total > pagination.limit && (\n <div className=\"flex justify-center\">\n <NextuiPagination\n className='mt-2'\n showControls\n showShadow\n size=\"sm\"\n radius=\"sm\"\n color=\"primary\"\n initialPage={1}\n total={Math.ceil(pagination.total / pagination.limit)}\n page={pagination.page}\n onChange={(currentPage) => {\n pagination.setData({\n page: currentPage,\n });\n if (autoScrollToTop && cardBoxRef.current) {\n scrollIntoTop(cardBoxRef.current);\n }\n }}\n {...nextuiPaginationProps}\n />\n </div>\n )}\n </div>\n );\n}\n\nfunction DefaultLoading({ loadingOptions }: { loadingOptions?: LoadingOptions }) {\n const type = loadingOptions?.type || 'skeleton';\n const skeletonOptions = loadingOptions?.skeleton;\n const spinnerOptions = loadingOptions?.spinner;\n const spinnerProps = spinnerOptions?.spinnerProps || {};\n\n if (type === 'skeleton') {\n return <SkeletonBox className={cn('mt-2 flex-col', skeletonOptions?.boxClassName)} skClassName={cn('h-[30px] rounded', skeletonOptions?.skeletonClassName)} line={skeletonOptions?.line || 5} />;\n }\n\n return (\n <div className={cn('w-full h-[100px] flex justify-center items-center', spinnerOptions?.boxClassName)}>\n <Spinner size=\"sm\" color=\"primary\" {...spinnerProps} />\n <div className={cn('ml-2 text-[#64748B] text-sm', spinnerOptions?.textClassName)}>{spinnerOptions?.text || 'Loading...'}</div>\n </div>\n );\n}\n\nfunction scrollIntoTop(target: HTMLElement) {\n if (target) {\n const { top } = target.getBoundingClientRect();\n window.scrollTo({\n top: top + window.scrollY - 100,\n behavior: 'smooth',\n });\n }\n}\n\nfunction CollapseBody<T>({\n data,\n rowKey,\n columns,\n extendedTables,\n rowCss,\n}: {\n data: T[];\n rowKey: string | number | symbol;\n columns: Column<T>[];\n extendedTables: ExtendedTable<any>[];\n rowCss?: string | ((item: T) => string | undefined);\n}) {\n return (\n <TableBody>\n {data.map((item, index) => {\n return <CollapseBodyRow key={item[rowKey] || index} item={item} columns={columns} extendedTables={extendedTables} rowCss={rowCss} />;\n })}\n </TableBody>\n );\n}\n\nfunction CollapseBodyRow<T>({ item, columns, extendedTables, rowCss }: { item: T; columns: Column<T>[]; extendedTables: ExtendedTable<any>[]; rowCss?: string | ((item: T) => string | undefined) }) {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <>\n <TableRow\n className={cn('text-xs cursor-pointer hover:bg-[#f6f6f9] dark:hover:bg-[#19191c]', typeof rowCss === 'function' ? rowCss(item) : rowCss)}\n onClick={(e: any) => {\n const { nodeName } = e.target;\n if (nodeName === 'TD' || nodeName === 'svg') {\n setIsOpen((v) => !v);\n }\n }}\n >\n {columns.map((column) => {\n return (\n <TableCell key={column.key} className=\"max-w-[200px] overflow-auto\">\n {column.render ? column.render(item) : renderFieldValue(item[column.key])}\n </TableCell>\n );\n })}\n </TableRow>\n <TableRow className={cn(isOpen ? 'table-row' : 'hidden')}>\n <TableCell colSpan={columns.length}>\n {extendedTables.map((ex) => {\n const exColumns = ex.columns;\n const exRow = item[ex.key];\n return (\n <Table className=\"mt-[10px]\" key={ex.key}>\n <TableHeader>\n {exColumns.map((exC) => {\n return (\n <TableColumn key={exC.key} className=\"text-xs text-[#64748B] dark:text-gray-300\">\n {exC.label}\n </TableColumn>\n );\n })}\n </TableHeader>\n <TableBody>\n {exRow.map((exItem) => (\n <TableRow className=\"text-xs hover:bg-[#f6f6f9] dark:hover:bg-[#19191c]\" key={exItem.key}>\n {exColumns.map((exC) => {\n return (\n <TableCell key={exC.key} className=\"max-w-[200px] overflow-auto\">\n {exC.render\n ? exC.render({\n ...exItem,\n $parent: item,\n })\n : renderFieldValue(exItem[exC.key])}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </Table>\n );\n })}\n </TableCell>\n </TableRow>\n </>\n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\";\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuArrow = DropdownMenuPrimitive.Arrow\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRight className=\"ml-auto h-4 w-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md bg-white dark:bg-[#18181B] border dark:border-none p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-lg bg-white dark:bg-[#18181B] border dark:border-[#3e3e3e] p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <Circle className=\"h-2 w-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-sm font-semibold\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n DropdownMenuArrow,\n}\n"]}
|
package/dist/jsontable.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SlotsToClasses, TableSlots, PaginationProps,
|
|
2
|
+
import { SlotsToClasses, TableSlots, PaginationProps, SpinnerProps } from '@nextui-org/react';
|
|
3
3
|
import { P as PaginationState } from './PaginationState-c19e621a.js';
|
|
4
4
|
|
|
5
5
|
type HeaderKeys<T extends Record<string, any>> = Array<keyof T | '$actions'>;
|
|
@@ -77,8 +77,9 @@ interface JSONTableProps<T extends Record<string, any>> {
|
|
|
77
77
|
loadingContent?: React.ReactNode;
|
|
78
78
|
isHeaderSticky?: boolean;
|
|
79
79
|
sortingUIOptions?: {
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
dropdownTriggerBtnClassName?: string;
|
|
81
|
+
dropdownContentClassName?: string;
|
|
82
|
+
dropdownItemClassName?: string;
|
|
82
83
|
titles?: {
|
|
83
84
|
asc?: string;
|
|
84
85
|
desc?: string;
|
package/dist/jsontable.mjs
CHANGED
package/dist/metrics.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ValueFormatter, CustomTooltipProps } from '@tremor/react';
|
|
2
|
+
import { ValueFormatter, CurveType, Color, CustomTooltipProps } from '@tremor/react';
|
|
3
3
|
|
|
4
4
|
interface ChartBox {
|
|
5
5
|
title?: React.ReactNode;
|
|
@@ -34,8 +34,8 @@ type LineChartCard = ChartBox & {
|
|
|
34
34
|
type?: 'LineChartCard';
|
|
35
35
|
categories?: string[];
|
|
36
36
|
index?: string;
|
|
37
|
-
curveType?:
|
|
38
|
-
colors?: (
|
|
37
|
+
curveType?: CurveType;
|
|
38
|
+
colors?: (Color | string)[];
|
|
39
39
|
showLegend?: boolean;
|
|
40
40
|
showGridLines?: boolean;
|
|
41
41
|
showXAxis?: boolean;
|
|
@@ -45,6 +45,7 @@ type LineChartCard = ChartBox & {
|
|
|
45
45
|
showAnimation?: boolean;
|
|
46
46
|
autoMinValue?: boolean;
|
|
47
47
|
valueFormatter?: ValueFormatter;
|
|
48
|
+
customTooltip?: React.ComponentType<CustomTooltipProps>;
|
|
48
49
|
};
|
|
49
50
|
declare const LineChartCard: (props: LineChartCard) => React.JSX.Element;
|
|
50
51
|
|
|
@@ -52,8 +53,8 @@ type AreaChartCard = ChartBox & {
|
|
|
52
53
|
type?: 'AreaChartCard';
|
|
53
54
|
categories?: string[];
|
|
54
55
|
index?: string;
|
|
55
|
-
curveType?:
|
|
56
|
-
colors?: (
|
|
56
|
+
curveType?: CurveType;
|
|
57
|
+
colors?: (Color | string)[];
|
|
57
58
|
showLegend?: boolean;
|
|
58
59
|
showGridLines?: boolean;
|
|
59
60
|
stack?: boolean;
|