pixelize-design-library 2.3.4 → 2.3.5
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/Table/Table.d.ts +1 -1
- package/dist/Components/Table/Table.js +51 -36
- package/dist/Components/Table/TableProps.d.ts +1 -0
- package/dist/Components/Table/components/Pagination.js +21 -11
- package/dist/Components/Table/components/TableSearch.js +11 -6
- package/dist/Components/Table/settings/TableSettings.js +16 -11
- package/dist/Components/ToolTip/ToolTipProps.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TableProps } from "./TableProps";
|
|
3
|
-
export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupColors, onAddItem, emptyState, }: TableProps): React.JSX.Element;
|
|
3
|
+
export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): React.JSX.Element;
|
|
@@ -75,33 +75,34 @@ var Divider_1 = __importDefault(require("../Divider/Divider"));
|
|
|
75
75
|
var TableSearch_1 = __importDefault(require("./components/TableSearch"));
|
|
76
76
|
var ActiveFilters_1 = __importDefault(require("./filters/ActiveFilters"));
|
|
77
77
|
var Button_1 = __importDefault(require("../Button/Button"));
|
|
78
|
+
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
78
79
|
var lucide_react_1 = require("lucide-react");
|
|
79
80
|
var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
|
|
80
81
|
function Table(_a) {
|
|
81
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
|
|
82
|
-
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading,
|
|
82
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
|
|
83
|
+
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _17 = _a.isCheckbox, isCheckbox = _17 === void 0 ? false : _17, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _18 = _a.noBorders, noBorders = _18 === void 0 ? false : _18, _19 = _a.isPagination, isPagination = _19 === void 0 ? true : _19, onRowClick = _a.onRowClick, selections = _a.selections, _20 = _a.isActionFreeze, isActionFreeze = _20 === void 0 ? true : _20, _21 = _a.preferences, preferences = _21 === void 0 ? {
|
|
83
84
|
url: "",
|
|
84
85
|
token: "",
|
|
85
86
|
key: "",
|
|
86
87
|
name: "",
|
|
87
88
|
page: "",
|
|
88
89
|
orgId: "",
|
|
89
|
-
} :
|
|
90
|
+
} : _21, _22 = _a.paginationMode, paginationMode = _22 === void 0 ? "client" : _22, _23 = _a.infiniteScroll, infiniteScroll = _23 === void 0 ? false : _23, hasMore = _a.hasMore, _24 = _a.isLoadingMore, isLoadingMore = _24 === void 0 ? false : _24, _25 = _a.groupLoadMore, groupLoadMore = _25 === void 0 ? false : _25, _26 = _a.loadMoreText, loadMoreText = _26 === void 0 ? "Load more" : _26, _27 = _a.loadMorePosition, loadMorePosition = _27 === void 0 ? "top" : _27, loadMoreChunkSize = _a.loadMoreChunkSize, _28 = _a.noOfRowsPerPage, noOfRowsPerPage = _28 === void 0 ? 50 : _28, _29 = _a.totalRecords, totalRecords = _29 === void 0 ? 0 : _29, onPagination = _a.onPagination, _30 = _a.isTableSettings, isTableSettings = _30 === void 0 ? false : _30, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _31 = _a.density, density = _31 === void 0 ? "normal" : _31, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState, onRefresh = _a.onRefresh;
|
|
90
91
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
91
|
-
var
|
|
92
|
+
var _32 = (0, react_1.useState)({}), columnsSearch = _32[0], setColumnsSearch = _32[1];
|
|
92
93
|
var tableContainerRef = (0, react_1.useRef)(null);
|
|
93
|
-
var
|
|
94
|
+
var _33 = (0, react_2.useDisclosure)(), isFilterModalOpen = _33.isOpen, onFilterModalOpen = _33.onOpen, onFilterModalClose = _33.onClose;
|
|
94
95
|
var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
|
|
95
|
-
var
|
|
96
|
+
var _34 = (0, react_1.useState)(500), viewportAvailableH = _34[0], setViewportAvailableH = _34[1];
|
|
96
97
|
var isServerPagination = paginationMode === "server";
|
|
97
|
-
var
|
|
98
|
+
var _35 = (0, usePreferences_1.useGetPreferences)({
|
|
98
99
|
baseUrl: preferences.url,
|
|
99
100
|
page: preferences.page,
|
|
100
101
|
key: preferences.key,
|
|
101
102
|
name: preferences.name,
|
|
102
103
|
authToken: preferences.token,
|
|
103
104
|
orgId: preferences.orgId,
|
|
104
|
-
}), tablePreferencesData =
|
|
105
|
+
}), tablePreferencesData = _35.preferences, loading = _35.loading;
|
|
105
106
|
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
106
107
|
baseUrl: preferences.url,
|
|
107
108
|
page: preferences.page,
|
|
@@ -119,7 +120,7 @@ function Table(_a) {
|
|
|
119
120
|
}
|
|
120
121
|
return {};
|
|
121
122
|
}, [tablePreferencesData]);
|
|
122
|
-
var
|
|
123
|
+
var _36 = (0, useTable_1.default)({
|
|
123
124
|
tableBorderColor: tableBorderColor,
|
|
124
125
|
data: data,
|
|
125
126
|
isPagination: isPagination,
|
|
@@ -133,17 +134,17 @@ function Table(_a) {
|
|
|
133
134
|
isServerPagination: isServerPagination,
|
|
134
135
|
onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
|
|
135
136
|
defaultVisibleColumns: defaultVisibleColumns,
|
|
136
|
-
}), tableData =
|
|
137
|
+
}), tableData = _36.tableData, isContent = _36.isContent, isLink = _36.isLink, headerRefs = _36.headerRefs, columnWidths = _36.columnWidths, handleSort = _36.handleSort, handleCheckbox = _36.handleCheckbox, filteredData = _36.filteredData, startRow = _36.startRow, endRow = _36.endRow, selection = _36.selection, columnsSort = _36.columnsSort, currentPage = _36.currentPage, pages = _36.pages, rowsPerPage = _36.rowsPerPage, handlePageSizeChange = _36.handlePageSizeChange, setCurrentPage = _36.setCurrentPage, columnsList = _36.columnsList, handleColumnPreferences = _36.handleColumnPreferences, isSelecting = _36.isSelecting, selectAllRowsRef = _36.selectAllRowsRef;
|
|
137
138
|
// Density + grouping are managed here so the Table Settings tabs can change +
|
|
138
139
|
// persist them (seeded from the prop / saved preferences when they load).
|
|
139
|
-
var
|
|
140
|
+
var _37 = (0, react_1.useState)(density), densityState = _37[0], setDensityState = _37[1];
|
|
140
141
|
// Grouping is chosen by the user in Table Settings > Group and persisted to
|
|
141
142
|
// preferences (`json.groupBy`); there is no `groupBy` prop.
|
|
142
|
-
var
|
|
143
|
+
var _38 = (0, react_1.useState)(undefined), groupByState = _38[0], setGroupByState = _38[1];
|
|
143
144
|
// Grouped "Load more" accumulates pages here so loading more ADDS rows to the
|
|
144
145
|
// groups (server pagination replaces `data` each fetch). Reset on fresh loads
|
|
145
146
|
// (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
|
|
146
|
-
var
|
|
147
|
+
var _39 = (0, react_1.useState)([]), accumulatedRows = _39[0], setAccumulatedRows = _39[1];
|
|
147
148
|
var pendingLoadMoreRef = (0, react_1.useRef)(false);
|
|
148
149
|
// Pages loaded so far (1 = the initial page). The next page is derived from this
|
|
149
150
|
// counter — NOT from the deduped row count — so overlapping rows across pages
|
|
@@ -408,37 +409,51 @@ function Table(_a) {
|
|
|
408
409
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
409
410
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], borderBottom: "0.063rem solid ".concat((_m = theme.colors.border) === null || _m === void 0 ? void 0 : _m[500]) },
|
|
410
411
|
filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
411
|
-
react_1.default.createElement(
|
|
412
|
-
react_1.default.createElement(
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
412
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Filter", placement: "top" },
|
|
413
|
+
react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
|
|
414
|
+
react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500] : (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.text) === null || _r === void 0 ? void 0 : _r[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
|
|
415
|
+
color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500],
|
|
416
|
+
} }),
|
|
417
|
+
sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
|
|
418
|
+
var _a;
|
|
419
|
+
e.stopPropagation();
|
|
420
|
+
if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
|
|
421
|
+
filterSidebar.onClearAllHandler();
|
|
422
|
+
}
|
|
423
|
+
else {
|
|
424
|
+
(_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
|
|
425
|
+
}
|
|
426
|
+
}, _hover: { bg: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.red) === null || _x === void 0 ? void 0 : _x[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
|
|
427
|
+
react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 }))))),
|
|
424
428
|
react_1.default.createElement(Divider_1.default, null))),
|
|
425
429
|
react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
|
|
426
430
|
isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
427
431
|
react_1.default.createElement(Divider_1.default, null),
|
|
428
432
|
react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols, group) { return handleSettingsSave(cols, group); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }))),
|
|
433
|
+
onRefresh && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
434
|
+
react_1.default.createElement(Divider_1.default, null),
|
|
435
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Refresh", placement: "top" },
|
|
436
|
+
react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
|
|
437
|
+
color: theme.colors.primary[500],
|
|
438
|
+
transform: "scale(1.1)"
|
|
439
|
+
}, onClick: onRefresh },
|
|
440
|
+
react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16, className: isLoading ? "animate-spin" : "" }))))),
|
|
429
441
|
headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
430
442
|
react_1.default.createElement(Divider_1.default, null),
|
|
431
443
|
react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
|
|
432
444
|
react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
|
|
433
445
|
react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
|
|
434
446
|
groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
|
|
435
|
-
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (
|
|
447
|
+
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
|
|
436
448
|
canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
|
|
437
|
-
(isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement(
|
|
449
|
+
(isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement("div", null,
|
|
438
450
|
react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
|
|
439
451
|
(isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
|
|
440
452
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
441
|
-
react_1.default.createElement(
|
|
453
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Pagination", placement: "top", openDelay: 300 },
|
|
454
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_1 = (_0 = theme.colors) === null || _0 === void 0 ? void 0 : _0.text) === null || _1 === void 0 ? void 0 : _1[500], _hover: {
|
|
455
|
+
color: (_3 = (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.primary) === null || _3 === void 0 ? void 0 : _3[500]
|
|
456
|
+
} }))),
|
|
442
457
|
react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
|
|
443
458
|
react_1.default.createElement(react_2.PopoverBody, { p: 0 },
|
|
444
459
|
react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))))))),
|
|
@@ -485,14 +500,14 @@ function Table(_a) {
|
|
|
485
500
|
zIndex: 999,
|
|
486
501
|
},
|
|
487
502
|
} },
|
|
488
|
-
react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (
|
|
489
|
-
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (
|
|
503
|
+
react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_6 = (_5 = (_4 = theme.colors.table) === null || _4 === void 0 ? void 0 : _4.hover) === null || _5 === void 0 ? void 0 : _5[200]) !== null && _6 !== void 0 ? _6 : (_7 = theme.colors.secondary) === null || _7 === void 0 ? void 0 : _7[50] },
|
|
504
|
+
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
|
|
490
505
|
react_1.default.createElement(react_3.Tbody, null,
|
|
491
|
-
react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (
|
|
506
|
+
react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
|
|
492
507
|
canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
|
|
493
|
-
react_1.default.createElement(react_2.Spinner, { size: "sm", color: (
|
|
494
|
-
react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (
|
|
495
|
-
groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((
|
|
496
|
-
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (
|
|
508
|
+
react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_11 = (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.primary) === null || _11 === void 0 ? void 0 : _11[500] }),
|
|
509
|
+
react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, "Loading more\u2026")))),
|
|
510
|
+
groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_14 = theme.colors.border) === null || _14 === void 0 ? void 0 : _14[500]) },
|
|
511
|
+
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_16 = (_15 = theme.colors) === null || _15 === void 0 ? void 0 : _15.text) === null || _16 === void 0 ? void 0 : _16[500] }, groupLoadMoreCaption)),
|
|
497
512
|
canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))))))));
|
|
498
513
|
}
|
|
@@ -32,10 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
35
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
39
|
var react_1 = __importStar(require("react"));
|
|
37
40
|
var react_2 = require("@chakra-ui/react");
|
|
38
41
|
var table_1 = require("../../../Utils/table");
|
|
42
|
+
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
43
|
+
var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
|
|
39
44
|
var lucide_react_1 = require("lucide-react");
|
|
40
45
|
var Pagination = react_1.default.memo(function (_a) {
|
|
41
46
|
var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
|
|
@@ -44,6 +49,7 @@ var Pagination = react_1.default.memo(function (_a) {
|
|
|
44
49
|
? paginationSelectOptions
|
|
45
50
|
: (0, table_1.pageSizeCalculation)(dataLength);
|
|
46
51
|
}, [paginationSelectOptions, dataLength]);
|
|
52
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
47
53
|
// const isLeftDisabled = currentPage === 0;
|
|
48
54
|
// const isRightDisabled = currentPage >= pages - 1;
|
|
49
55
|
var isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
@@ -53,16 +59,20 @@ var Pagination = react_1.default.memo(function (_a) {
|
|
|
53
59
|
!paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
|
|
54
60
|
computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
|
|
55
61
|
dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },
|
|
56
|
-
react_1.default.createElement(
|
|
57
|
-
react_1.default.createElement(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
react_1.default.createElement(
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
react_1.default.createElement(ToolTip_1.default, { label: "First", placement: "top", openDelay: 300 },
|
|
63
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); }, _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {} },
|
|
64
|
+
react_1.default.createElement(lucide_react_1.ChevronsLeft, null))),
|
|
65
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Previous", placement: "top", openDelay: 300 },
|
|
66
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); }, _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {} },
|
|
67
|
+
react_1.default.createElement(lucide_react_1.ChevronLeft, null))),
|
|
68
|
+
react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500] }, paginationText),
|
|
69
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Next", placement: "top", openDelay: 300 },
|
|
70
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
|
|
71
|
+
return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
|
|
72
|
+
}, _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {} },
|
|
73
|
+
react_1.default.createElement(lucide_react_1.ChevronRight, null))),
|
|
74
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Last", placement: "top", openDelay: 300 },
|
|
75
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); }, _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {} },
|
|
76
|
+
react_1.default.createElement(lucide_react_1.ChevronsRight, null)))))));
|
|
67
77
|
});
|
|
68
78
|
exports.default = Pagination;
|
|
@@ -32,18 +32,22 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
35
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
39
|
var react_1 = __importStar(require("react"));
|
|
37
40
|
var react_2 = require("@chakra-ui/react");
|
|
38
41
|
var lucide_react_1 = require("lucide-react");
|
|
39
42
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
40
43
|
var table_1 = require("../../../Utils/table");
|
|
44
|
+
var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
|
|
41
45
|
var TableSearch = function (_a) {
|
|
42
|
-
var _b, _c, _d, _e;
|
|
46
|
+
var _b, _c, _d, _e, _f;
|
|
43
47
|
var onSearch = _a.onSearch;
|
|
44
48
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
45
|
-
var
|
|
46
|
-
var
|
|
49
|
+
var _g = (0, react_1.useState)(false), showInput = _g[0], setShowInput = _g[1];
|
|
50
|
+
var _h = (0, react_1.useState)(""), query = _h[0], setQuery = _h[1];
|
|
47
51
|
var handleSearchClick = function () {
|
|
48
52
|
setShowInput(function (prev) { return !prev; });
|
|
49
53
|
if (showInput) {
|
|
@@ -61,10 +65,11 @@ var TableSearch = function (_a) {
|
|
|
61
65
|
handleDebounce(value);
|
|
62
66
|
};
|
|
63
67
|
return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "2" },
|
|
64
|
-
!showInput && (react_1.default.createElement(
|
|
68
|
+
!showInput && (react_1.default.createElement(ToolTip_1.default, { label: "Search", placement: "top", openDelay: 300 },
|
|
69
|
+
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], onClick: handleSearchClick, _hover: { color: (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } }))),
|
|
65
70
|
showInput ? (react_1.default.createElement(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease" },
|
|
66
|
-
react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (
|
|
71
|
+
react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500], _focus: { borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[500] }, autoFocus: true }),
|
|
67
72
|
react_1.default.createElement(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem" },
|
|
68
|
-
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: (
|
|
73
|
+
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500], cursor: "pointer", onClick: handleSearchClick })))) : null));
|
|
69
74
|
};
|
|
70
75
|
exports.default = TableSearch;
|
|
@@ -63,6 +63,7 @@ var ManageColumns_1 = __importDefault(require("./ManageColumns"));
|
|
|
63
63
|
var Button_1 = __importDefault(require("../../Button/Button"));
|
|
64
64
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
65
65
|
var lucide_react_1 = require("lucide-react");
|
|
66
|
+
var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
|
|
66
67
|
var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
|
|
67
68
|
var DENSITY_OPTIONS = [
|
|
68
69
|
{ value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
|
|
@@ -70,15 +71,15 @@ var DENSITY_OPTIONS = [
|
|
|
70
71
|
{ value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
|
|
71
72
|
];
|
|
72
73
|
var TableSettings = function (_a) {
|
|
73
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
74
|
-
var columns = _a.columns, onSave = _a.onSave,
|
|
74
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
75
|
+
var columns = _a.columns, onSave = _a.onSave, _r = _a.density, density = _r === void 0 ? "normal" : _r, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy;
|
|
75
76
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
76
77
|
var childInputMethodsRef = (0, react_2.useRef)({});
|
|
77
|
-
var
|
|
78
|
-
var
|
|
79
|
-
var
|
|
78
|
+
var _s = (0, react_2.useState)(false), settingsOpen = _s[0], setSettingsOpen = _s[1];
|
|
79
|
+
var _t = (0, react_2.useState)(0), selectedIndex = _t[0], setSelectedIndex = _t[1];
|
|
80
|
+
var _u = (0, react_2.useState)(columns), items = _u[0], setItems = _u[1];
|
|
80
81
|
// Group selection is applied on Save (not live), per "click Apply to group".
|
|
81
|
-
var
|
|
82
|
+
var _v = (0, react_2.useState)(groupBy), selectedGroup = _v[0], setSelectedGroup = _v[1];
|
|
82
83
|
var handleSave = (0, react_2.useCallback)(function () {
|
|
83
84
|
onSave(items, selectedGroup);
|
|
84
85
|
setSettingsOpen(false);
|
|
@@ -103,16 +104,20 @@ var TableSettings = function (_a) {
|
|
|
103
104
|
_hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
|
|
104
105
|
};
|
|
105
106
|
return (react_2.default.createElement(react_1.Box, null,
|
|
106
|
-
react_2.default.createElement(
|
|
107
|
-
react_2.default.createElement(
|
|
107
|
+
react_2.default.createElement(ToolTip_1.default, { label: "Table Settings", placement: "top", openDelay: 300 },
|
|
108
|
+
react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500], _hover: {
|
|
109
|
+
transform: "scale(1.1)",
|
|
110
|
+
color: (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500]
|
|
111
|
+
} },
|
|
112
|
+
react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem" }))),
|
|
108
113
|
react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
|
|
109
114
|
react_2.default.createElement(react_1.ModalOverlay, null),
|
|
110
|
-
react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (
|
|
115
|
+
react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], overflow: "hidden" },
|
|
111
116
|
react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }),
|
|
112
117
|
react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0 },
|
|
113
118
|
react_2.default.createElement(react_1.Box, { pt: 4, px: 4 },
|
|
114
119
|
react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
|
|
115
|
-
react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (
|
|
120
|
+
react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.border) === null || _o === void 0 ? void 0 : _o[200] },
|
|
116
121
|
react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Density"),
|
|
117
122
|
react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Manage Columns"),
|
|
118
123
|
react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Group"))),
|
|
@@ -158,7 +163,7 @@ var TableSettings = function (_a) {
|
|
|
158
163
|
react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
|
|
159
164
|
react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left" }, opt.label)));
|
|
160
165
|
})))))),
|
|
161
|
-
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (
|
|
166
|
+
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.border) === null || _q === void 0 ? void 0 : _q[200], pt: 3, pb: 3, px: 4 },
|
|
162
167
|
react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
|
|
163
168
|
react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
|
|
164
169
|
};
|
|
@@ -2,5 +2,5 @@ import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
|
|
|
2
2
|
export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
styles?: React.CSSProperties;
|
|
5
|
-
placement
|
|
5
|
+
placement?: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
|
|
6
6
|
};
|