pixelize-design-library 2.1.65 → 2.1.67
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/KaTable/CustomHeader.d.ts +14 -0
- package/dist/Components/KaTable/CustomHeader.js +69 -0
- package/dist/Components/KaTable/KaTable.d.ts +13 -0
- package/dist/Components/KaTable/KaTable.js +111 -0
- package/dist/Components/KaTable/KaTableProps.d.ts +23 -0
- package/dist/Components/KaTable/KaTableProps.js +2 -0
- package/dist/Components/KaTable/SelectionCell.d.ts +8 -0
- package/dist/Components/KaTable/SelectionCell.js +38 -0
- package/dist/Components/KaTable/SelectionHeader.d.ts +3 -0
- package/dist/Components/KaTable/SelectionHeader.js +56 -0
- package/dist/Components/KaTable/ka-table.css +27 -0
- package/dist/Components/KaTable/useMergedChildComponents.d.ts +14 -0
- package/dist/Components/KaTable/useMergedChildComponents.js +224 -0
- package/dist/Components/KanbanBoard/AccountCard.d.ts +2 -2
- package/dist/Components/KanbanBoard/AccountCard.js +20 -34
- package/dist/Components/KanbanBoard/KanbanBoard.js +56 -35
- package/dist/Components/KanbanBoard/MeasuredItem.d.ts +8 -0
- package/dist/Components/KanbanBoard/MeasuredItem.js +68 -0
- package/dist/Components/Table/Table.css +16 -0
- package/dist/Components/Table/Table.d.ts +1 -1
- package/dist/Components/Table/Table.js +11 -10
- package/dist/Pages/KaTableExample.d.ts +3 -0
- package/dist/Pages/KaTableExample.js +259 -0
- package/dist/Pages/datePick.js +4 -1
- package/dist/Pages/kanbanboard.js +6 -6
- package/dist/Pages/table.js +4 -1
- package/dist/Theme/Default/fonts.d.ts +35 -0
- package/dist/Theme/Default/fonts.js +37 -0
- package/dist/Utils/table.js +82 -10
- package/package.json +1 -1
- package/dist/index.d.mts +0 -1468
- package/dist/index.mjs +0 -263
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -39,15 +28,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
29
|
var react_1 = __importStar(require("react"));
|
|
41
30
|
var react_2 = require("@chakra-ui/react");
|
|
42
|
-
var dnd_1 = require("@hello-pangea/dnd");
|
|
43
31
|
var lucide_react_1 = require("lucide-react");
|
|
44
32
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
45
33
|
var AccountRow_1 = __importDefault(require("./AccountRow"));
|
|
46
34
|
var excludeKeys = ["id", "details"];
|
|
47
35
|
var AccountCard = function (_a) {
|
|
48
|
-
var
|
|
36
|
+
var _b, _c, _d, _e, _f, _g;
|
|
37
|
+
var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen, _h = _a.isExpanded, isExpanded = _h === void 0 ? false : _h, onToggleExpand = _a.onToggleExpand;
|
|
49
38
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
50
|
-
var
|
|
39
|
+
var _j = (0, react_1.useState)(false), showMore = _j[0], setShowMore = _j[1];
|
|
51
40
|
var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
|
|
52
41
|
var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
|
|
53
42
|
// Handle the show more/less toggle
|
|
@@ -55,25 +44,22 @@ var AccountCard = function (_a) {
|
|
|
55
44
|
setShowMore(!showMore);
|
|
56
45
|
onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
|
|
57
46
|
};
|
|
58
|
-
return (react_1.default.createElement(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
react_1.default.createElement(react_2.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
react_1.default.createElement(react_2.
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
react_1.default.createElement(react_2.Tooltip, { label: "Open" },
|
|
76
|
-
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer" }))))))));
|
|
77
|
-
}));
|
|
47
|
+
return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[500], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, mt: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "100px" },
|
|
48
|
+
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[700] },
|
|
49
|
+
visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
|
|
50
|
+
react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
|
|
51
|
+
react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
|
|
52
|
+
react_1.default.createElement(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center" },
|
|
53
|
+
keys.length > 4 && (react_1.default.createElement(react_2.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "sm", fontWeight: "medium", cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 2 },
|
|
54
|
+
"Show ",
|
|
55
|
+
isExpanded ? "less" : "more",
|
|
56
|
+
" ",
|
|
57
|
+
isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 14 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 14 }))),
|
|
58
|
+
react_1.default.createElement(react_2.Spacer, null),
|
|
59
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
60
|
+
react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
|
|
61
|
+
react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer" })),
|
|
62
|
+
react_1.default.createElement(react_2.Tooltip, { label: "Open" },
|
|
63
|
+
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer" })))))));
|
|
78
64
|
};
|
|
79
65
|
exports.default = AccountCard;
|
|
@@ -54,9 +54,7 @@ var react_window_1 = require("react-window");
|
|
|
54
54
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
55
55
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
56
56
|
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
57
|
-
|
|
58
|
-
var BASE_ROW_HEIGHT = 180;
|
|
59
|
-
var EXPANDED_ROW_HEIGHT = 280;
|
|
57
|
+
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
60
58
|
var KanbanBoard = function (_a) {
|
|
61
59
|
var _b;
|
|
62
60
|
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
|
|
@@ -69,40 +67,56 @@ var KanbanBoard = function (_a) {
|
|
|
69
67
|
md: "17.5rem",
|
|
70
68
|
lg: "19rem",
|
|
71
69
|
});
|
|
72
|
-
//
|
|
70
|
+
// track expanded cards
|
|
73
71
|
var _f = (0, react_1.useState)({}), expanded = _f[0], setExpanded = _f[1];
|
|
74
|
-
// ref for
|
|
72
|
+
// ref for lists
|
|
75
73
|
var listRefs = (0, react_1.useRef)({});
|
|
76
74
|
var containerRef = (0, react_1.useRef)(null);
|
|
77
|
-
//
|
|
75
|
+
// store measured heights
|
|
76
|
+
var _g = (0, react_1.useState)({}), sizes = _g[0], setSizes = _g[1];
|
|
77
|
+
// update height for an item
|
|
78
|
+
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
79
|
+
var key = "".concat(colId, "-").concat(index);
|
|
80
|
+
setSizes(function (prev) {
|
|
81
|
+
var _a;
|
|
82
|
+
if (prev[key] === size)
|
|
83
|
+
return prev;
|
|
84
|
+
return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
|
|
85
|
+
});
|
|
86
|
+
if (listRefs.current[colId]) {
|
|
87
|
+
listRefs.current[colId].resetAfterIndex(index);
|
|
88
|
+
}
|
|
89
|
+
}, []);
|
|
90
|
+
var getItemSize = function (index, _items, colId) {
|
|
91
|
+
var key = "".concat(colId, "-").concat(index);
|
|
92
|
+
return sizes[key] || 180; // default until measured
|
|
93
|
+
};
|
|
94
|
+
// Calculate container height
|
|
78
95
|
(0, react_1.useEffect)(function () {
|
|
79
96
|
var calculateHeight = function () {
|
|
80
97
|
var _a;
|
|
81
98
|
if (containerRef.current) {
|
|
82
|
-
var headerHeight = ((_a = document.querySelector(
|
|
83
|
-
var availableHeight = window.innerHeight - headerHeight - 100;
|
|
99
|
+
var headerHeight = ((_a = document.querySelector("header")) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
|
|
100
|
+
var availableHeight = window.innerHeight - headerHeight - 100;
|
|
84
101
|
setContainerHeight(Math.max(500, availableHeight));
|
|
85
102
|
}
|
|
86
103
|
};
|
|
87
104
|
calculateHeight();
|
|
88
|
-
window.addEventListener(
|
|
89
|
-
return function () {
|
|
90
|
-
window.removeEventListener('resize', calculateHeight);
|
|
91
|
-
};
|
|
105
|
+
window.addEventListener("resize", calculateHeight);
|
|
106
|
+
return function () { return window.removeEventListener("resize", calculateHeight); };
|
|
92
107
|
}, []);
|
|
93
108
|
// toggle expand/collapse
|
|
94
109
|
var toggleExpand = function (id, colId, index) {
|
|
95
110
|
setExpanded(function (prev) {
|
|
96
111
|
var _a;
|
|
97
112
|
var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
|
|
98
|
-
// tell react-window to recompute sizes
|
|
99
113
|
if (listRefs.current[colId]) {
|
|
100
114
|
listRefs.current[colId].resetAfterIndex(index);
|
|
101
115
|
}
|
|
102
116
|
return newExpanded;
|
|
103
117
|
});
|
|
104
118
|
};
|
|
105
|
-
//
|
|
119
|
+
// drag handler
|
|
106
120
|
var onDragEnd = function (result) {
|
|
107
121
|
var _a, _b;
|
|
108
122
|
var source = result.source, destination = result.destination;
|
|
@@ -137,20 +151,17 @@ var KanbanBoard = function (_a) {
|
|
|
137
151
|
var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
|
|
138
152
|
onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
|
|
139
153
|
};
|
|
140
|
-
//
|
|
154
|
+
// row renderer
|
|
141
155
|
var Row = function (_a) {
|
|
142
156
|
var index = _a.index, style = _a.style, data = _a.data;
|
|
143
|
-
var items = data.items, colId = data.colId;
|
|
157
|
+
var items = data.items, colId = data.colId, placeholder = data.placeholder;
|
|
144
158
|
var account = items[index];
|
|
145
|
-
return (react_1.default.createElement("div", { style: style },
|
|
146
|
-
react_1.default.createElement(
|
|
147
|
-
react_1.default.createElement(
|
|
159
|
+
return (react_1.default.createElement("div", { style: __assign(__assign({}, style), { marginBottom: 12 }) },
|
|
160
|
+
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
161
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
162
|
+
react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); } }))); })),
|
|
163
|
+
index === items.length - 1 && placeholder));
|
|
148
164
|
};
|
|
149
|
-
// ✅ dynamic row size calculator
|
|
150
|
-
var getItemSize = (0, react_1.useCallback)(function (index, items) {
|
|
151
|
-
var account = items[index];
|
|
152
|
-
return expanded[account.id] ? EXPANDED_ROW_HEIGHT : BASE_ROW_HEIGHT;
|
|
153
|
-
}, [expanded]);
|
|
154
165
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
155
166
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
156
167
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
@@ -163,10 +174,12 @@ var KanbanBoard = function (_a) {
|
|
|
163
174
|
})
|
|
164
175
|
: Object.entries(columns).map(function (_a) {
|
|
165
176
|
var colId = _a[0], column = _a[1];
|
|
166
|
-
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided,
|
|
177
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
167
178
|
var item = column.items[rubric.source.index];
|
|
168
|
-
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
169
|
-
react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
|
|
179
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
|
|
180
|
+
react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
|
|
181
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
182
|
+
} })));
|
|
170
183
|
} }, function (provided, snapshot) {
|
|
171
184
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
172
185
|
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
@@ -174,16 +187,24 @@ var KanbanBoard = function (_a) {
|
|
|
174
187
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
175
188
|
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
176
189
|
: "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight, "px") }),
|
|
177
|
-
react_1.default.createElement(react_2.Flex, { width: "
|
|
190
|
+
react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between" },
|
|
178
191
|
react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
|
|
179
192
|
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
|
|
180
|
-
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflow: "auto", width: "100%" },
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
193
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflow: "auto", width: "100%" }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
194
|
+
if (el)
|
|
195
|
+
listRefs.current[colId] = el;
|
|
196
|
+
}, height: containerHeight - 100, itemCount: column.items.length, itemSize: function (index) {
|
|
197
|
+
return getItemSize(index, column.items, colId);
|
|
198
|
+
}, width: "100%", itemData: {
|
|
199
|
+
items: column.items,
|
|
200
|
+
colId: colId,
|
|
201
|
+
placeholder: provided.placeholder,
|
|
202
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, { height: "100%", overflow: "auto" },
|
|
203
|
+
column.items.map(function (account, index) { return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { marginBottom: 12 }) }),
|
|
204
|
+
react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
205
|
+
return toggleExpand(account.id, colId, index);
|
|
206
|
+
} }))); })); }),
|
|
207
|
+
provided.placeholder)))));
|
|
187
208
|
}));
|
|
188
209
|
})))));
|
|
189
210
|
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
var react_1 = __importStar(require("react"));
|
|
27
|
+
var MeasuredItem = function (_a) {
|
|
28
|
+
var index = _a.index, setSize = _a.setSize, children = _a.children;
|
|
29
|
+
var ref = (0, react_1.useRef)(null);
|
|
30
|
+
var prevHeight = (0, react_1.useRef)(null);
|
|
31
|
+
// measure function
|
|
32
|
+
var measure = function () {
|
|
33
|
+
if (ref.current) {
|
|
34
|
+
var height = Math.round(ref.current.getBoundingClientRect().height);
|
|
35
|
+
if (prevHeight.current !== height) {
|
|
36
|
+
prevHeight.current = height;
|
|
37
|
+
setSize(index, height);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
42
|
+
// initial measure
|
|
43
|
+
measure();
|
|
44
|
+
// ResizeObserver to capture any content changes (collapse/expand)
|
|
45
|
+
var ro;
|
|
46
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
47
|
+
ro = new ResizeObserver(function () {
|
|
48
|
+
measure();
|
|
49
|
+
});
|
|
50
|
+
if (ref.current)
|
|
51
|
+
ro.observe(ref.current);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
// fallback: window resize
|
|
55
|
+
window.addEventListener("resize", measure);
|
|
56
|
+
}
|
|
57
|
+
return function () {
|
|
58
|
+
if (ro && ref.current)
|
|
59
|
+
ro.unobserve(ref.current);
|
|
60
|
+
if (!ro)
|
|
61
|
+
window.removeEventListener("resize", measure);
|
|
62
|
+
};
|
|
63
|
+
// We intentionally do not add children to deps to avoid extra runs; ResizeObserver catches updates.
|
|
64
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
+
}, [index, setSize]);
|
|
66
|
+
return react_1.default.createElement("div", { ref: ref }, children);
|
|
67
|
+
};
|
|
68
|
+
exports.default = MeasuredItem;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.table_wrapper {
|
|
2
|
+
width: 100%;
|
|
3
|
+
border-collapse: collapse;
|
|
4
|
+
/* table-layout: fixed; */
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.table_wrapper th .resize-handle {
|
|
8
|
+
position: absolute;
|
|
9
|
+
top: 0;
|
|
10
|
+
right: 0;
|
|
11
|
+
width: 8px;
|
|
12
|
+
height: 100%;
|
|
13
|
+
cursor: col-resize;
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
z-index: 999;
|
|
16
|
+
}
|
|
@@ -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, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch,
|
|
3
|
+
export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, }: TableProps): React.JSX.Element;
|
|
@@ -34,6 +34,7 @@ var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
|
|
|
34
34
|
var TableBody_1 = __importDefault(require("./Components/TableBody"));
|
|
35
35
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
36
36
|
var useTable_1 = __importDefault(require("./Components/useTable"));
|
|
37
|
+
var table_1 = require("../../Utils/table");
|
|
37
38
|
var usePreferences_1 = require("../../Hooks/usePreferences");
|
|
38
39
|
var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
|
|
39
40
|
var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
|
|
@@ -41,14 +42,14 @@ var Divider_1 = __importDefault(require("../Divider/Divider"));
|
|
|
41
42
|
var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
|
|
42
43
|
function Table(_a) {
|
|
43
44
|
var _b, _c, _d, _e, _f, _g;
|
|
44
|
-
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch
|
|
45
|
+
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch;
|
|
45
46
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
46
47
|
var _w = (0, react_1.useState)({}), columnsSearch = _w[0], setColumnsSearch = _w[1];
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}, [columnsSearch, onColumnFilter]);
|
|
48
|
+
// useEffect(() => {
|
|
49
|
+
// if (onColumnFilter) {
|
|
50
|
+
// onColumnFilter(columnsSearch);
|
|
51
|
+
// }
|
|
52
|
+
// }, [columnsSearch, onColumnFilter]);
|
|
52
53
|
var isServerPagination = paginationMode === "server";
|
|
53
54
|
var _x = (0, usePreferences_1.useGetPreferences)({
|
|
54
55
|
baseUrl: preferencesUrl,
|
|
@@ -86,9 +87,9 @@ function Table(_a) {
|
|
|
86
87
|
totalRecords: totalRecords,
|
|
87
88
|
isServerPagination: isServerPagination,
|
|
88
89
|
}), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
var _filteredData = (0, react_1.useMemo)(function () {
|
|
91
|
+
return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
|
|
92
|
+
}, [columnsSearch, filteredData]);
|
|
92
93
|
(0, react_1.useEffect)(function () {
|
|
93
94
|
if (onPagination) {
|
|
94
95
|
onPagination(currentPage + 1, noOfRowsPerPage);
|
|
@@ -128,6 +129,6 @@ function Table(_a) {
|
|
|
128
129
|
? false
|
|
129
130
|
: "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
|
|
130
131
|
react_1.default.createElement(react_3.Tbody, null,
|
|
131
|
-
react_1.default.createElement(TableBody_1.default, { data:
|
|
132
|
+
react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
|
|
132
133
|
}
|
|
133
134
|
exports.default = Table;
|