@yeverlibs/ds 1.0.4 → 1.0.6
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/index.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +95 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +96 -49
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -529,6 +529,10 @@ type TableProps<T> = {
|
|
|
529
529
|
noBackground?: boolean
|
|
530
530
|
linkAccessor?: (row: T) => string
|
|
531
531
|
isLink?: boolean
|
|
532
|
+
// Funções opcionais para gerenciamento de URL
|
|
533
|
+
getUrlParam?: (key: string, defaultValue?: string | number) => string | number
|
|
534
|
+
updateUrlParam?: (key: string, value: string) => void
|
|
535
|
+
getPathname?: () => string | null
|
|
532
536
|
}
|
|
533
537
|
|
|
534
538
|
declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -529,6 +529,10 @@ type TableProps<T> = {
|
|
|
529
529
|
noBackground?: boolean
|
|
530
530
|
linkAccessor?: (row: T) => string
|
|
531
531
|
isLink?: boolean
|
|
532
|
+
// Funções opcionais para gerenciamento de URL
|
|
533
|
+
getUrlParam?: (key: string, defaultValue?: string | number) => string | number
|
|
534
|
+
updateUrlParam?: (key: string, value: string) => void
|
|
535
|
+
getPathname?: () => string | null
|
|
532
536
|
}
|
|
533
537
|
|
|
534
538
|
declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -6165,6 +6165,26 @@ var Skeleton = ({ className }) => {
|
|
|
6165
6165
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-gray-200", className) });
|
|
6166
6166
|
};
|
|
6167
6167
|
var RESET_PAGE = 1;
|
|
6168
|
+
var defaultUpdateUrlParam = (key, value) => {
|
|
6169
|
+
if (typeof window === "undefined") return;
|
|
6170
|
+
const params = new URLSearchParams(window.location.search);
|
|
6171
|
+
if (value) {
|
|
6172
|
+
params.set(key, value);
|
|
6173
|
+
} else {
|
|
6174
|
+
params.delete(key);
|
|
6175
|
+
}
|
|
6176
|
+
const queryString = params.toString();
|
|
6177
|
+
const newUrl = queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname;
|
|
6178
|
+
window.history.replaceState(null, "", newUrl);
|
|
6179
|
+
};
|
|
6180
|
+
var defaultGetUrlParam = (key, defaultValue = "") => {
|
|
6181
|
+
if (typeof window === "undefined") return defaultValue;
|
|
6182
|
+
const params = new URLSearchParams(window.location.search);
|
|
6183
|
+
const value = params.get(key);
|
|
6184
|
+
if (value === null) return defaultValue;
|
|
6185
|
+
if (typeof defaultValue === "number") return Number(value) || defaultValue;
|
|
6186
|
+
return value;
|
|
6187
|
+
};
|
|
6168
6188
|
var TableContent = ({
|
|
6169
6189
|
columns,
|
|
6170
6190
|
data,
|
|
@@ -6180,9 +6200,11 @@ var TableContent = ({
|
|
|
6180
6200
|
onPaginateAction,
|
|
6181
6201
|
noPagination,
|
|
6182
6202
|
wrapperClassName,
|
|
6183
|
-
noBackground = false
|
|
6203
|
+
noBackground = false,
|
|
6204
|
+
getUrlParam,
|
|
6205
|
+
updateUrlParam,
|
|
6206
|
+
getPathname
|
|
6184
6207
|
}) => {
|
|
6185
|
-
const pathname = navigation.usePathname();
|
|
6186
6208
|
const actionMenuRef = React107.useRef(null);
|
|
6187
6209
|
const [visibleActionRow, setVisibleActionRow] = React107.useState(null);
|
|
6188
6210
|
const [isLoading, setIsLoading] = React107.useState(false);
|
|
@@ -6190,20 +6212,29 @@ var TableContent = ({
|
|
|
6190
6212
|
const [searchQuery, setSearchQuery] = React107.useState("");
|
|
6191
6213
|
const [itemsPerPage, setItemsPerPage] = React107.useState(10);
|
|
6192
6214
|
const [selectedRows, setSelectedRows] = React107.useState(/* @__PURE__ */ new Set());
|
|
6193
|
-
const
|
|
6194
|
-
const
|
|
6195
|
-
|
|
6196
|
-
const
|
|
6215
|
+
const getUrlParamValue = getUrlParam || defaultGetUrlParam;
|
|
6216
|
+
const updateUrlParamValue = updateUrlParam || defaultUpdateUrlParam;
|
|
6217
|
+
getUrlParamValue("perPage", 10);
|
|
6218
|
+
const page = getUrlParamValue("page", 1);
|
|
6219
|
+
getUrlParamValue("search", "");
|
|
6220
|
+
const handlePagination = React107.useCallback(async () => {
|
|
6221
|
+
if (!onPaginateAction) return;
|
|
6222
|
+
setIsLoading(true);
|
|
6223
|
+
await onPaginateAction();
|
|
6224
|
+
setIsLoading(false);
|
|
6225
|
+
}, [onPaginateAction]);
|
|
6197
6226
|
React107.useEffect(() => {
|
|
6198
6227
|
setCurrentPage(page);
|
|
6199
6228
|
}, [page]);
|
|
6200
6229
|
React107.useEffect(() => {
|
|
6201
|
-
|
|
6202
|
-
|
|
6230
|
+
if (typeof window === "undefined") return;
|
|
6231
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
6232
|
+
if (searchParams.toString().length > 0) {
|
|
6203
6233
|
onPaginateAction?.();
|
|
6204
6234
|
}
|
|
6205
|
-
}, []);
|
|
6235
|
+
}, [onPaginateAction]);
|
|
6206
6236
|
React107.useEffect(() => {
|
|
6237
|
+
if (typeof window === "undefined") return;
|
|
6207
6238
|
const shouldReset = document.cookie.includes("reset-table-params=true");
|
|
6208
6239
|
if (shouldReset) {
|
|
6209
6240
|
document.cookie = "reset-table-params=; max-age=0; path=/";
|
|
@@ -6219,38 +6250,39 @@ var TableContent = ({
|
|
|
6219
6250
|
}
|
|
6220
6251
|
window.history.replaceState({}, "", url);
|
|
6221
6252
|
}
|
|
6222
|
-
}, [
|
|
6253
|
+
}, []);
|
|
6223
6254
|
React107.useEffect(() => {
|
|
6224
|
-
if (!
|
|
6225
|
-
|
|
6226
|
-
|
|
6227
|
-
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
|
|
6235
|
-
|
|
6236
|
-
|
|
6237
|
-
|
|
6238
|
-
|
|
6239
|
-
|
|
6240
|
-
setIsLoading(false);
|
|
6241
|
-
};
|
|
6255
|
+
if (!getUrlParam && typeof window === "undefined") return;
|
|
6256
|
+
const urlPerPage = getUrlParamValue("perPage", 10);
|
|
6257
|
+
const urlSearch = getUrlParamValue("search", "");
|
|
6258
|
+
if (urlPerPage !== itemsPerPage) {
|
|
6259
|
+
setItemsPerPage(urlPerPage);
|
|
6260
|
+
if (onPaginateAction) {
|
|
6261
|
+
handlePagination();
|
|
6262
|
+
}
|
|
6263
|
+
}
|
|
6264
|
+
if (urlSearch !== searchQuery) {
|
|
6265
|
+
setSearchQuery(urlSearch);
|
|
6266
|
+
if (onPaginateAction) {
|
|
6267
|
+
handlePagination();
|
|
6268
|
+
}
|
|
6269
|
+
}
|
|
6270
|
+
}, [itemsPerPage, searchQuery, handlePagination, getUrlParam, getUrlParamValue, onPaginateAction]);
|
|
6242
6271
|
const totalPages = pagination ? Math.ceil(pagination.total / itemsPerPage) : 1;
|
|
6243
|
-
const paginatedData = data;
|
|
6272
|
+
const paginatedData = data || [];
|
|
6244
6273
|
const visibleColumns = columns.filter((column) => !hiddenColumns.includes(column.accessor));
|
|
6245
6274
|
const headersWithContent = visibleColumns.filter((column) => column.Header);
|
|
6275
|
+
if (visibleColumns.length === 0 && columns.length > 0) {
|
|
6276
|
+
console.warn("Table: Todas as colunas est\xE3o ocultas. Verifique a prop hiddenColumns.");
|
|
6277
|
+
}
|
|
6246
6278
|
const handleSearch = (e) => {
|
|
6247
6279
|
setSearchQuery(e.target.value);
|
|
6248
6280
|
};
|
|
6249
6281
|
const handleSearchSubmit = () => {
|
|
6250
|
-
|
|
6251
|
-
|
|
6252
|
-
|
|
6253
|
-
|
|
6282
|
+
updateUrlParamValue("search", searchQuery);
|
|
6283
|
+
updateUrlParamValue("page", "1");
|
|
6284
|
+
setCurrentPage(1);
|
|
6285
|
+
handlePagination();
|
|
6254
6286
|
};
|
|
6255
6287
|
const handleClickOutside = React107.useCallback((event) => {
|
|
6256
6288
|
if (actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
|
|
@@ -6305,7 +6337,7 @@ var TableContent = ({
|
|
|
6305
6337
|
return cellValue;
|
|
6306
6338
|
}
|
|
6307
6339
|
};
|
|
6308
|
-
return isLink && linkHref ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6340
|
+
return isLink && linkHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: linkHref, className: "text-blue-600 hover:text-blue-800 underline", children: content() }) : content();
|
|
6309
6341
|
};
|
|
6310
6342
|
if (isLoading) {
|
|
6311
6343
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -6409,7 +6441,7 @@ var TableContent = ({
|
|
|
6409
6441
|
onChange: handleSelectAllRows
|
|
6410
6442
|
}
|
|
6411
6443
|
) }),
|
|
6412
|
-
headersWithContent.length === 1 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6444
|
+
headersWithContent.length === 1 && visibleColumns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6413
6445
|
"th",
|
|
6414
6446
|
{
|
|
6415
6447
|
colSpan: visibleColumns.length,
|
|
@@ -6423,10 +6455,10 @@ var TableContent = ({
|
|
|
6423
6455
|
style: { minWidth: columnWidths[index] },
|
|
6424
6456
|
children: column.Header ?? ""
|
|
6425
6457
|
},
|
|
6426
|
-
column.id || index
|
|
6458
|
+
column.id || `column-${index}`
|
|
6427
6459
|
))
|
|
6428
6460
|
] }) }),
|
|
6429
|
-
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData
|
|
6461
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData && paginatedData.length > 0 ? paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6430
6462
|
"tr",
|
|
6431
6463
|
{
|
|
6432
6464
|
className: cn(
|
|
@@ -6485,15 +6517,18 @@ var TableContent = ({
|
|
|
6485
6517
|
]
|
|
6486
6518
|
},
|
|
6487
6519
|
rowIndex
|
|
6488
|
-
)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan:
|
|
6520
|
+
)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: visibleColumns.length + (selectable ? 1 : 0), style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-6", children: [
|
|
6489
6521
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6490
|
-
|
|
6522
|
+
"img",
|
|
6491
6523
|
{
|
|
6492
6524
|
src: "/empty-table.svg",
|
|
6493
6525
|
width: 666,
|
|
6494
6526
|
height: 329,
|
|
6495
6527
|
alt: "Nenhum resultado encontrado",
|
|
6496
|
-
className: "mx-auto"
|
|
6528
|
+
className: "mx-auto",
|
|
6529
|
+
onError: (e) => {
|
|
6530
|
+
e.currentTarget.style.display = "none";
|
|
6531
|
+
}
|
|
6497
6532
|
}
|
|
6498
6533
|
),
|
|
6499
6534
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
|
|
@@ -6524,16 +6559,12 @@ var TableContent = ({
|
|
|
6524
6559
|
{
|
|
6525
6560
|
value: itemsPerPage,
|
|
6526
6561
|
onChange: async (e) => {
|
|
6527
|
-
if (!pathname) return;
|
|
6528
6562
|
const newPerPage = Number(e.target.value);
|
|
6529
6563
|
setItemsPerPage(newPerPage);
|
|
6530
6564
|
setCurrentPage(RESET_PAGE);
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
]).then(() => {
|
|
6535
|
-
handlePagination();
|
|
6536
|
-
});
|
|
6565
|
+
updateUrlParamValue("page", "1");
|
|
6566
|
+
updateUrlParamValue("perPage", String(newPerPage));
|
|
6567
|
+
handlePagination();
|
|
6537
6568
|
},
|
|
6538
6569
|
className: "block h-8 w-full cursor-pointer appearance-none rounded border border-gray-300 bg-white p-2 text-sm leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none",
|
|
6539
6570
|
children: [
|
|
@@ -6563,7 +6594,23 @@ var TableContent = ({
|
|
|
6563
6594
|
] }) });
|
|
6564
6595
|
};
|
|
6565
6596
|
var Table = (props) => {
|
|
6566
|
-
|
|
6597
|
+
if (!props.columns || props.columns.length === 0) {
|
|
6598
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6599
|
+
Box,
|
|
6600
|
+
{
|
|
6601
|
+
className: cn(
|
|
6602
|
+
"flex flex-col overflow-hidden",
|
|
6603
|
+
props.wrapperClassName,
|
|
6604
|
+
props.noBackground ? "bg-transparent border-none p-0" : ""
|
|
6605
|
+
),
|
|
6606
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { $as: "p", children: "Nenhuma coluna definida para a tabela." }) })
|
|
6607
|
+
}
|
|
6608
|
+
);
|
|
6609
|
+
}
|
|
6610
|
+
if (!props.data) {
|
|
6611
|
+
console.warn('Table: A prop "data" n\xE3o foi fornecida ou \xE9 undefined.');
|
|
6612
|
+
}
|
|
6613
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TableContent, { ...props });
|
|
6567
6614
|
};
|
|
6568
6615
|
var Tabs = ({ headers, children, noGap, active, alignDiv = "full" }) => {
|
|
6569
6616
|
const [activeTab, setActiveTab] = React107.useState(active || 0);
|