pixelize-design-library 2.2.29 → 2.2.31
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/Input/TextInput.js +2 -2
- package/dist/Components/Input/TextInput.styles.js +2 -0
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +108 -121
- package/dist/Components/NavigationBar/NavigationBar.d.ts +1 -1
- package/dist/Components/NavigationBar/NavigationBar.js +13 -4
- package/dist/Components/NavigationBar/NavigationBarProps.d.ts +1 -1
- package/dist/Components/Notification/Notification.js +17 -11
- package/dist/Components/Notification/NotificationProps.d.ts +1 -0
- package/dist/Components/SearchSelect/SearchSelect.d.ts +3 -3
- package/dist/Components/SearchSelect/SearchSelect.js +43 -25
- package/dist/Components/Table/Table.d.ts +1 -1
- package/dist/Components/Table/Table.js +27 -19
- package/dist/Components/Table/TableProps.d.ts +8 -5
- package/dist/Hooks/usePreferences.d.ts +2 -1
- package/dist/Hooks/usePreferences.js +8 -5
- package/package.json +1 -1
|
@@ -58,9 +58,9 @@ var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
58
58
|
return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
|
|
59
59
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
|
|
60
60
|
react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
|
|
61
|
-
inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),
|
|
61
|
+
inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputLeftIcon)),
|
|
62
62
|
react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
|
|
63
|
-
inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle), inputRightIcon))),
|
|
63
|
+
inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputRightIcon))),
|
|
64
64
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
65
65
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
66
66
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { KanbanBoardProps } from "./KanbanBoardProps";
|
|
3
|
-
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading,
|
|
3
|
+
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, virtualization, }: KanbanBoardProps) => React.JSX.Element;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -53,19 +53,14 @@ var lucide_react_1 = require("lucide-react");
|
|
|
53
53
|
var react_window_1 = require("react-window");
|
|
54
54
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
55
55
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
56
|
-
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
57
56
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
58
57
|
var KanbanBoard = function (_a) {
|
|
59
|
-
var _b, _c, _d, _e;
|
|
60
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete,
|
|
58
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
59
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, virtualization = _a.virtualization;
|
|
61
60
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var _k = (0, react_1.useState)(0), maxScroll = _k[0], setMaxScroll = _k[1];
|
|
66
|
-
var _l = (0, react_1.useState)(0), containerWidth = _l[0], setContainerWidth = _l[1];
|
|
67
|
-
var _m = (0, react_1.useState)(0), contentWidth = _m[0], setContentWidth = _m[1];
|
|
68
|
-
var _o = (0, react_1.useState)(null), hoveredColumn = _o[0], setHoveredColumn = _o[1];
|
|
61
|
+
var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
|
|
62
|
+
var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
|
|
63
|
+
var _m = (0, react_1.useState)(null), hoveredColumn = _m[0], setHoveredColumn = _m[1];
|
|
69
64
|
// Responsive column width
|
|
70
65
|
var columnWidth = (0, react_2.useBreakpointValue)({
|
|
71
66
|
base: "16rem",
|
|
@@ -73,13 +68,12 @@ var KanbanBoard = function (_a) {
|
|
|
73
68
|
lg: "19rem",
|
|
74
69
|
});
|
|
75
70
|
// track expanded cards
|
|
76
|
-
var
|
|
71
|
+
var _o = (0, react_1.useState)({}), expanded = _o[0], setExpanded = _o[1];
|
|
77
72
|
// ref for lists
|
|
78
73
|
var listRefs = (0, react_1.useRef)({});
|
|
79
74
|
var containerRef = (0, react_1.useRef)(null);
|
|
80
|
-
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
81
75
|
// store measured heights
|
|
82
|
-
var
|
|
76
|
+
var _p = (0, react_1.useState)({}), sizes = _p[0], setSizes = _p[1];
|
|
83
77
|
// update height for an item
|
|
84
78
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
85
79
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -97,67 +91,20 @@ var KanbanBoard = function (_a) {
|
|
|
97
91
|
var key = "".concat(colId, "-").concat(index);
|
|
98
92
|
return (sizes[key] || 180) + 12; // Add margin to the measured height
|
|
99
93
|
};
|
|
100
|
-
// Calculate container
|
|
94
|
+
// Calculate container height
|
|
101
95
|
(0, react_1.useEffect)(function () {
|
|
102
96
|
var calculateDimensions = function () {
|
|
103
|
-
var _a;
|
|
104
|
-
var scrollContainer = scrollContainerRef.current;
|
|
105
|
-
if (scrollContainer) {
|
|
106
|
-
var containerWidth_1 = scrollContainer.clientWidth;
|
|
107
|
-
var contentWidth_1 = scrollContainer.scrollWidth;
|
|
108
|
-
var newMaxScroll = Math.max(0, contentWidth_1 - containerWidth_1);
|
|
109
|
-
setContainerWidth(containerWidth_1);
|
|
110
|
-
setContentWidth(contentWidth_1);
|
|
111
|
-
setMaxScroll(newMaxScroll);
|
|
112
|
-
// Update scroll position based on current scroll
|
|
113
|
-
setScrollPosition(scrollContainer.scrollLeft);
|
|
114
|
-
}
|
|
115
97
|
if (containerRef.current) {
|
|
116
|
-
var
|
|
117
|
-
var availableHeight = window.innerHeight - headerHeight - 100;
|
|
98
|
+
var availableHeight = window.innerHeight - 100;
|
|
118
99
|
setContainerHeight(Math.max(500, availableHeight));
|
|
119
100
|
}
|
|
120
101
|
};
|
|
121
102
|
calculateDimensions();
|
|
122
103
|
window.addEventListener("resize", calculateDimensions);
|
|
123
|
-
// Recalculate when columns change
|
|
124
|
-
var timeoutId = setTimeout(calculateDimensions, 100);
|
|
125
104
|
return function () {
|
|
126
105
|
window.removeEventListener("resize", calculateDimensions);
|
|
127
|
-
clearTimeout(timeoutId);
|
|
128
|
-
};
|
|
129
|
-
}, [columns, isLoading]);
|
|
130
|
-
// Handle scroll events
|
|
131
|
-
(0, react_1.useEffect)(function () {
|
|
132
|
-
var scrollContainer = scrollContainerRef.current;
|
|
133
|
-
if (!scrollContainer)
|
|
134
|
-
return;
|
|
135
|
-
var handleScroll = function () {
|
|
136
|
-
setScrollPosition(scrollContainer.scrollLeft);
|
|
137
106
|
};
|
|
138
|
-
|
|
139
|
-
return function () { return scrollContainer.removeEventListener("scroll", handleScroll); };
|
|
140
|
-
}, []);
|
|
141
|
-
var handleCustomScroll = function (e) {
|
|
142
|
-
var scrollContainer = scrollContainerRef.current;
|
|
143
|
-
if (!scrollContainer || maxScroll <= 0)
|
|
144
|
-
return;
|
|
145
|
-
var rect = e.currentTarget.getBoundingClientRect();
|
|
146
|
-
var clickX = e.clientX - rect.left;
|
|
147
|
-
var scrollbarWidth = rect.width;
|
|
148
|
-
// Calculate the scroll position directly
|
|
149
|
-
var scrollPercentage = clickX / scrollbarWidth;
|
|
150
|
-
var newScroll = scrollPercentage * maxScroll;
|
|
151
|
-
// Use scrollLeft for instant scrolling
|
|
152
|
-
scrollContainer.scrollLeft = newScroll;
|
|
153
|
-
};
|
|
154
|
-
// Calculate scrollbar thumb width and position
|
|
155
|
-
var scrollbarThumbWidth = maxScroll > 0 && containerWidth > 0
|
|
156
|
-
? Math.max(30, (containerWidth / contentWidth) * 100)
|
|
157
|
-
: 100;
|
|
158
|
-
var scrollbarThumbPosition = maxScroll > 0
|
|
159
|
-
? (scrollPosition / maxScroll) * (100 - Math.max(30, scrollbarThumbWidth))
|
|
160
|
-
: 0;
|
|
107
|
+
}, [isLoading]);
|
|
161
108
|
// toggle expand/collapse
|
|
162
109
|
var toggleExpand = function (id, colId, index) {
|
|
163
110
|
setExpanded(function (prev) {
|
|
@@ -216,63 +163,103 @@ var KanbanBoard = function (_a) {
|
|
|
216
163
|
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); } }))); }))),
|
|
217
164
|
index === items.length - 1 && placeholder));
|
|
218
165
|
};
|
|
219
|
-
return (react_1.default.createElement(
|
|
220
|
-
react_1.default.createElement(
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
"
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
:
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
166
|
+
return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
167
|
+
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden" },
|
|
168
|
+
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
|
|
169
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
170
|
+
sx: {
|
|
171
|
+
"&::-webkit-scrollbar": {
|
|
172
|
+
height: "6px", // Consistent size - 6px
|
|
173
|
+
},
|
|
174
|
+
"&::-webkit-scrollbar-track": {
|
|
175
|
+
background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100],
|
|
176
|
+
borderRadius: "3px",
|
|
177
|
+
margin: "0 4px", // Add gap on sides
|
|
178
|
+
},
|
|
179
|
+
"&::-webkit-scrollbar-thumb": {
|
|
180
|
+
background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[400],
|
|
181
|
+
borderRadius: "3px",
|
|
182
|
+
border: "1px solid ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[100]),
|
|
183
|
+
},
|
|
184
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
185
|
+
background: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500],
|
|
186
|
+
},
|
|
187
|
+
// For Firefox
|
|
188
|
+
scrollbarWidth: "thin",
|
|
189
|
+
scrollbarColor: "".concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], " ").concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100]),
|
|
190
|
+
} }, isLoading
|
|
191
|
+
? Array.from({ length: 5 }).map(function (_, idx) {
|
|
192
|
+
var _a, _b;
|
|
193
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
|
|
194
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
195
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
196
|
+
})
|
|
197
|
+
: Object.entries(columns).map(function (_a) {
|
|
198
|
+
var colId = _a[0], column = _a[1];
|
|
199
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
200
|
+
var item = column.items[rubric.source.index];
|
|
201
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
|
|
202
|
+
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 () {
|
|
203
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
204
|
+
} })));
|
|
205
|
+
} }, function (provided, snapshot) {
|
|
206
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
207
|
+
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
|
|
208
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
209
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
210
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
211
|
+
: "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 - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
212
|
+
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", position: "relative" },
|
|
213
|
+
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),
|
|
214
|
+
hoveredColumn === colId && column.items.length > 0 && (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); }, transition: "color 0.2s ease" })),
|
|
215
|
+
!(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
|
|
216
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflowY: "auto", width: "100%", mr: 1,
|
|
217
|
+
/////LIST/////////////////////////////
|
|
218
|
+
sx: {
|
|
219
|
+
overflowY: "auto",
|
|
220
|
+
overflowX: "hidden",
|
|
221
|
+
/* === Firefox === */
|
|
222
|
+
scrollbarWidth: "thin",
|
|
223
|
+
scrollbarColor: "var(--chakra-colors-gray-300) transparent",
|
|
224
|
+
/* === Chrome, Edge, Safari === */
|
|
225
|
+
"&::-webkit-scrollbar": {
|
|
226
|
+
width: "6px !important",
|
|
227
|
+
height: "6px !important", // for horizontal scrollbar if any
|
|
228
|
+
},
|
|
229
|
+
"&::-webkit-scrollbar-track": {
|
|
230
|
+
background: "gray.100",
|
|
231
|
+
borderRadius: "3px",
|
|
232
|
+
marginTop: "4px",
|
|
233
|
+
marginBottom: "4px",
|
|
234
|
+
},
|
|
235
|
+
"&::-webkit-scrollbar-thumb": {
|
|
236
|
+
background: "gray.300",
|
|
237
|
+
borderRadius: "3px",
|
|
238
|
+
border: "1px solid",
|
|
239
|
+
borderColor: "gray.100",
|
|
240
|
+
},
|
|
241
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
242
|
+
background: "gray.400",
|
|
243
|
+
},
|
|
244
|
+
/* === Prevent scrollbar expansion in Chrome === */
|
|
245
|
+
"&": {
|
|
246
|
+
scrollbarGutter: "stable both-edges",
|
|
247
|
+
},
|
|
248
|
+
} }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
249
|
+
if (el)
|
|
250
|
+
listRefs.current[colId] = el;
|
|
251
|
+
}, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
|
|
252
|
+
items: column.items,
|
|
253
|
+
colId: colId,
|
|
254
|
+
placeholder: provided.placeholder,
|
|
255
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
256
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
257
|
+
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 }),
|
|
258
|
+
react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
259
|
+
return toggleExpand(account.id, colId, index);
|
|
260
|
+
} }))); }))); }),
|
|
261
|
+
provided.placeholder)))));
|
|
262
|
+
}));
|
|
263
|
+
})))));
|
|
277
264
|
};
|
|
278
265
|
exports.default = KanbanBoard;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { NavbarProps } from "./NavigationBarProps";
|
|
3
|
-
export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole }: NavbarProps): React.JSX.Element;
|
|
3
|
+
export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;
|
|
@@ -14,9 +14,7 @@ function NavBar(_a) {
|
|
|
14
14
|
return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
|
|
15
15
|
react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
|
|
16
16
|
react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
|
|
17
|
-
react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ?
|
|
18
|
-
react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" }) :
|
|
19
|
-
react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" })),
|
|
17
|
+
react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
|
|
20
18
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
|
|
21
19
|
react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
|
|
22
20
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
|
|
@@ -35,7 +33,18 @@ function NavBar(_a) {
|
|
|
35
33
|
navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
|
|
36
34
|
fontWeight: 500,
|
|
37
35
|
gap: theme.space["2"],
|
|
38
|
-
},
|
|
36
|
+
},
|
|
37
|
+
// _hover={{
|
|
38
|
+
// backgroundColor: theme.colors.primary["50"],
|
|
39
|
+
// }}
|
|
40
|
+
_focus: {
|
|
41
|
+
backgroundColor: "transparent", // remove focus highlight
|
|
42
|
+
// boxShadow: "none",
|
|
43
|
+
},
|
|
44
|
+
// _active={{
|
|
45
|
+
// backgroundColor: "transparent", // remove click highlight
|
|
46
|
+
// }}
|
|
47
|
+
_hover: {
|
|
39
48
|
backgroundColor: theme.colors.primary["50"],
|
|
40
49
|
} },
|
|
41
50
|
menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
|
|
@@ -28,7 +28,7 @@ var react_2 = require("@chakra-ui/react");
|
|
|
28
28
|
var lucide_react_1 = require("lucide-react");
|
|
29
29
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
30
30
|
var Notification = function (_a) {
|
|
31
|
-
var notification = _a.notification, onClose = _a.onClose;
|
|
31
|
+
var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick;
|
|
32
32
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
33
33
|
var bgColor = theme.colors.white;
|
|
34
34
|
var borderColor = theme.colors.gray[200];
|
|
@@ -95,19 +95,24 @@ var Notification = function (_a) {
|
|
|
95
95
|
return successColor; // Future
|
|
96
96
|
};
|
|
97
97
|
var TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
98
|
+
// const formattedStart =
|
|
99
|
+
// startDate?.toLocaleString("en-US", {
|
|
100
|
+
// day: "2-digit",
|
|
101
|
+
// month: "short",
|
|
102
|
+
// hour: "2-digit",
|
|
103
|
+
// minute: "2-digit",
|
|
104
|
+
// }) || "";
|
|
104
105
|
return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative" },
|
|
105
106
|
onClose && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: function (e) {
|
|
106
107
|
if (e.key === "Enter" || e.key === " ") {
|
|
107
108
|
e.preventDefault();
|
|
108
109
|
onClose();
|
|
109
110
|
}
|
|
110
|
-
}, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
|
|
111
|
+
}, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
|
|
112
|
+
bg: theme.colors.red[100],
|
|
113
|
+
color: theme.colors.red[500],
|
|
114
|
+
transform: "scale(1.1)",
|
|
115
|
+
}, transition: "all 0.2s ease" },
|
|
111
116
|
react_1.default.createElement(lucide_react_1.X, { size: 16 }))),
|
|
112
117
|
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
|
|
113
118
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
@@ -116,16 +121,17 @@ var Notification = function (_a) {
|
|
|
116
121
|
react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
|
|
117
122
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
|
|
118
123
|
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
|
|
119
|
-
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor }, notification.title),
|
|
124
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); } }, notification.title),
|
|
120
125
|
notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
|
|
121
126
|
react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
|
|
122
127
|
react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
|
|
123
128
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
124
129
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }),
|
|
125
|
-
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] },
|
|
130
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.dueDate)),
|
|
126
131
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
127
132
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }),
|
|
128
133
|
notification.host && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.host))),
|
|
129
|
-
|
|
134
|
+
showStatus &&
|
|
135
|
+
react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" })))));
|
|
130
136
|
};
|
|
131
137
|
exports.default = Notification;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { SearchSelectProps } from
|
|
3
|
-
declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon }: SearchSelectProps) => React.JSX.Element;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { SearchSelectProps } from "./SearchSelectProps";
|
|
3
|
+
declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => React.JSX.Element;
|
|
4
4
|
export default SearchSelect;
|
|
@@ -57,20 +57,20 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
|
57
57
|
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
58
58
|
var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
|
|
59
59
|
var normalizeSingleValue = function (val) {
|
|
60
|
-
if (typeof val ===
|
|
60
|
+
if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
|
|
61
61
|
return val;
|
|
62
62
|
}
|
|
63
63
|
return undefined;
|
|
64
64
|
};
|
|
65
65
|
var normalizeMultiValue = function (val) {
|
|
66
66
|
if (Array.isArray(val)) {
|
|
67
|
-
return val.filter(function (v) { return v && typeof v ===
|
|
67
|
+
return val.filter(function (v) { return v && typeof v === "object" && "id" in v && "label" in v; });
|
|
68
68
|
}
|
|
69
69
|
return [];
|
|
70
70
|
};
|
|
71
71
|
var SearchSelect = function (_a) {
|
|
72
72
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
73
|
-
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ?
|
|
73
|
+
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, _u = _a.height, height = _u === void 0 ? "2.75rem" : _u, _v = _a.size, size = _v === void 0 ? "md" : _v, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _w = _a.isSelectAll, isSelectAll = _w === void 0 ? false : _w, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
|
|
74
74
|
var _x = (0, react_1.useState)(searchQuery), inputValue = _x[0], setInputValue = _x[1];
|
|
75
75
|
var _y = (0, react_1.useState)(false), isOpen = _y[0], setIsOpen = _y[1];
|
|
76
76
|
var _z = (0, react_1.useState)(true), hasMore = _z[0], setHasMore = _z[1];
|
|
@@ -80,7 +80,11 @@ var SearchSelect = function (_a) {
|
|
|
80
80
|
var _0 = (0, react_1.useState)(false), focused = _0[0], setFocused = _0[1];
|
|
81
81
|
var _1 = (0, react_1.useState)(false), customSelectOpen = _1[0], setCustomSelectOpen = _1[1];
|
|
82
82
|
var customSelectRef = (0, react_1.useRef)(null);
|
|
83
|
-
var _2 = (0, react_1.useState)({
|
|
83
|
+
var _2 = (0, react_1.useState)({
|
|
84
|
+
top: 0,
|
|
85
|
+
left: 0,
|
|
86
|
+
width: 0,
|
|
87
|
+
}), customSelectPos = _2[0], setCustomSelectPos = _2[1];
|
|
84
88
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
85
89
|
(0, react_2.useOutsideClick)({
|
|
86
90
|
ref: containerRef,
|
|
@@ -126,7 +130,7 @@ var SearchSelect = function (_a) {
|
|
|
126
130
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
|
|
127
131
|
setIsOpen(false);
|
|
128
132
|
}
|
|
129
|
-
setInputValue(
|
|
133
|
+
setInputValue("");
|
|
130
134
|
};
|
|
131
135
|
var handleRemove = function (id) {
|
|
132
136
|
var updated = selectedValues.filter(function (v) { return v.id !== id; });
|
|
@@ -134,7 +138,7 @@ var SearchSelect = function (_a) {
|
|
|
134
138
|
};
|
|
135
139
|
var handleClearAll = function () {
|
|
136
140
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
|
|
137
|
-
setInputValue(
|
|
141
|
+
setInputValue("");
|
|
138
142
|
};
|
|
139
143
|
var handleSelectAll = function () {
|
|
140
144
|
var allSelected = filteredOptions.every(function (opt) {
|
|
@@ -148,7 +152,7 @@ var SearchSelect = function (_a) {
|
|
|
148
152
|
var filteredNotSelected = filteredOptions.filter(function (opt) { return !selectedValues.some(function (sel) { return sel.id === opt.id; }); });
|
|
149
153
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(__spreadArray(__spreadArray([], selectedValues, true), filteredNotSelected, true));
|
|
150
154
|
}
|
|
151
|
-
setInputValue(
|
|
155
|
+
setInputValue("");
|
|
152
156
|
};
|
|
153
157
|
var isSelected = function (id) {
|
|
154
158
|
return selectedValues.some(function (v) { return v.id === id; });
|
|
@@ -161,7 +165,10 @@ var SearchSelect = function (_a) {
|
|
|
161
165
|
return selectedValues.some(function (sel) { return sel.id === opt.id; });
|
|
162
166
|
});
|
|
163
167
|
var handleScroll = (0, react_1.useCallback)(function (e) {
|
|
164
|
-
if (!pagination ||
|
|
168
|
+
if (!pagination ||
|
|
169
|
+
!pagination.onScroll ||
|
|
170
|
+
pagination.scrollLoading ||
|
|
171
|
+
!hasMore)
|
|
165
172
|
return;
|
|
166
173
|
var target = e.currentTarget;
|
|
167
174
|
var nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
|
|
@@ -178,14 +185,14 @@ var SearchSelect = function (_a) {
|
|
|
178
185
|
(0, react_2.useOutsideClick)({
|
|
179
186
|
ref: customSelectRef,
|
|
180
187
|
handler: function (e) {
|
|
181
|
-
var dropdown = document.getElementById(
|
|
188
|
+
var dropdown = document.getElementById("custom-select-portal");
|
|
182
189
|
if (dropdown && dropdown.contains(e.target))
|
|
183
190
|
return;
|
|
184
191
|
setCustomSelectOpen(false);
|
|
185
192
|
},
|
|
186
193
|
});
|
|
187
194
|
var handleCustomSelect = function (item) {
|
|
188
|
-
if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) ===
|
|
195
|
+
if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === "function") {
|
|
189
196
|
insideSelect.onSelect(item);
|
|
190
197
|
}
|
|
191
198
|
setCustomSelectOpen(false);
|
|
@@ -203,7 +210,17 @@ var SearchSelect = function (_a) {
|
|
|
203
210
|
return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
|
|
204
211
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
|
|
205
212
|
react_1.default.createElement(react_2.InputGroup, { size: size },
|
|
206
|
-
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error
|
|
213
|
+
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error
|
|
214
|
+
? theme.colors.semantic.error[500]
|
|
215
|
+
: focused
|
|
216
|
+
? theme.colors.primary[500]
|
|
217
|
+
: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused
|
|
218
|
+
? error
|
|
219
|
+
? "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error)
|
|
220
|
+
: "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary)
|
|
221
|
+
: error
|
|
222
|
+
? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
|
|
223
|
+
: "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: function () { return setIsOpen(true); } },
|
|
207
224
|
insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
|
|
208
225
|
react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
|
|
209
226
|
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_h = (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
|
|
@@ -214,13 +231,14 @@ var SearchSelect = function (_a) {
|
|
|
214
231
|
handleCustomSelect(item);
|
|
215
232
|
} }, item.label)); })))))),
|
|
216
233
|
isMultiple
|
|
217
|
-
? selectedValues
|
|
218
|
-
|
|
234
|
+
? selectedValues
|
|
235
|
+
.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
|
|
236
|
+
.map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
|
|
237
|
+
? item.label.slice(0, chip.maxText) + "…"
|
|
219
238
|
: item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
|
|
220
|
-
: selectedValues.length === 1 &&
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
|
|
239
|
+
: selectedValues.length === 1 &&
|
|
240
|
+
!isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
|
|
241
|
+
(chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
|
|
224
242
|
(isMultiple || inputValue || !selectedValues.length || isOpen) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
|
|
225
243
|
setFocused(true);
|
|
226
244
|
setIsOpen(true);
|
|
@@ -228,10 +246,10 @@ var SearchSelect = function (_a) {
|
|
|
228
246
|
react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
|
|
229
247
|
isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
230
248
|
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
|
|
231
|
-
bg:
|
|
232
|
-
_hover: { bg:
|
|
233
|
-
_active: { bg:
|
|
234
|
-
_focus: { boxShadow:
|
|
249
|
+
bg: "transparent",
|
|
250
|
+
_hover: { bg: "transparent" },
|
|
251
|
+
_active: { bg: "transparent" },
|
|
252
|
+
_focus: { boxShadow: "none", bg: "transparent" },
|
|
235
253
|
} }))),
|
|
236
254
|
isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
|
|
237
255
|
e.preventDefault();
|
|
@@ -241,15 +259,15 @@ var SearchSelect = function (_a) {
|
|
|
241
259
|
isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
|
|
242
260
|
isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
|
|
243
261
|
react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
|
|
244
|
-
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ?
|
|
262
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? "Unselect All" : "Select All"))),
|
|
245
263
|
react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { p: 3, display: "flex", alignItems: "center", gap: 2 },
|
|
246
264
|
react_1.default.createElement(react_2.Spinner, { size: "sm" }),
|
|
247
|
-
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] :
|
|
265
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
|
|
248
266
|
isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
|
|
249
|
-
option.view ? react_1.default.createElement(react_1.default.Fragment, null, option.view) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
|
|
267
|
+
option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label)))); }))),
|
|
250
268
|
(addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
|
|
251
269
|
addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
|
|
252
|
-
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text ||
|
|
270
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || "Add New"))))),
|
|
253
271
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
|
|
254
272
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
|
|
255
273
|
};
|
|
@@ -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,
|
|
3
|
+
export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, }: TableProps): React.JSX.Element;
|
|
@@ -42,39 +42,47 @@ var Divider_1 = __importDefault(require("../Divider/Divider"));
|
|
|
42
42
|
var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
|
|
43
43
|
function Table(_a) {
|
|
44
44
|
var _b, _c, _d, _e, _f, _g;
|
|
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.
|
|
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.preferences, preferences = _m === void 0 ? {
|
|
46
|
+
url: "",
|
|
47
|
+
token: "",
|
|
48
|
+
key: "",
|
|
49
|
+
name: "",
|
|
50
|
+
page: "",
|
|
51
|
+
orgId: "",
|
|
52
|
+
} : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch;
|
|
46
53
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
47
|
-
var
|
|
54
|
+
var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
|
|
48
55
|
// useEffect(() => {
|
|
49
56
|
// if (onColumnFilter) {
|
|
50
57
|
// onColumnFilter(columnsSearch);
|
|
51
58
|
// }
|
|
52
59
|
// }, [columnsSearch, onColumnFilter]);
|
|
53
60
|
var isServerPagination = paginationMode === "server";
|
|
54
|
-
var
|
|
55
|
-
baseUrl:
|
|
56
|
-
page:
|
|
57
|
-
key:
|
|
58
|
-
name:
|
|
59
|
-
authToken:
|
|
60
|
-
|
|
61
|
+
var _t = (0, usePreferences_1.useGetPreferences)({
|
|
62
|
+
baseUrl: preferences.url,
|
|
63
|
+
page: preferences.page,
|
|
64
|
+
key: preferences.key,
|
|
65
|
+
name: preferences.name,
|
|
66
|
+
authToken: preferences.token,
|
|
67
|
+
orgId: preferences.orgId,
|
|
68
|
+
}), tablePreferencesData = _t.preferences, loading = _t.loading;
|
|
61
69
|
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
62
|
-
baseUrl:
|
|
63
|
-
page:
|
|
64
|
-
key:
|
|
65
|
-
name:
|
|
66
|
-
authToken:
|
|
70
|
+
baseUrl: preferences.url,
|
|
71
|
+
page: preferences.page,
|
|
72
|
+
key: preferences.key,
|
|
73
|
+
name: preferences.name,
|
|
74
|
+
authToken: preferences.token,
|
|
67
75
|
}).savePreferences;
|
|
68
76
|
var isTableLoading = (0, react_1.useMemo)(function () {
|
|
69
77
|
return loading || isLoading;
|
|
70
78
|
}, [loading, isLoading]);
|
|
71
79
|
var tablePreferences = (0, react_1.useMemo)(function () {
|
|
72
|
-
if (
|
|
73
|
-
return
|
|
80
|
+
if (tablePreferencesData === null || tablePreferencesData === void 0 ? void 0 : tablePreferencesData.length) {
|
|
81
|
+
return tablePreferencesData[0].json;
|
|
74
82
|
}
|
|
75
83
|
return {};
|
|
76
|
-
}, [
|
|
77
|
-
var
|
|
84
|
+
}, [tablePreferencesData]);
|
|
85
|
+
var _u = (0, useTable_1.default)({
|
|
78
86
|
tableBorderColor: tableBorderColor,
|
|
79
87
|
data: data,
|
|
80
88
|
isPagination: isPagination,
|
|
@@ -86,7 +94,7 @@ function Table(_a) {
|
|
|
86
94
|
noOfRowsPerPage: noOfRowsPerPage,
|
|
87
95
|
totalRecords: totalRecords,
|
|
88
96
|
isServerPagination: isServerPagination,
|
|
89
|
-
}), tableData =
|
|
97
|
+
}), tableData = _u.tableData, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage, columnsList = _u.columnsList, handleColumnPreferences = _u.handleColumnPreferences;
|
|
90
98
|
var _filteredData = (0, react_1.useMemo)(function () {
|
|
91
99
|
return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
|
|
92
100
|
}, [columnsSearch, filteredData]);
|
|
@@ -19,11 +19,6 @@ export type TableProps = {
|
|
|
19
19
|
selections?: (string | number)[];
|
|
20
20
|
onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
|
|
21
21
|
isActionFreeze?: boolean;
|
|
22
|
-
preferencesUrl?: string;
|
|
23
|
-
preferencesKey?: string;
|
|
24
|
-
preferencesName?: string;
|
|
25
|
-
preferencesPage?: string;
|
|
26
|
-
authToken?: string;
|
|
27
22
|
paginationMode?: "client" | "server";
|
|
28
23
|
noOfRowsPerPage?: number;
|
|
29
24
|
totalRecords?: number;
|
|
@@ -32,6 +27,14 @@ export type TableProps = {
|
|
|
32
27
|
headerActions?: HeaderActionsProps;
|
|
33
28
|
onGlobalSearch?: (searchVal: string) => void;
|
|
34
29
|
onColumnFilter?: (filters: Record<string, any>) => void;
|
|
30
|
+
preferences?: {
|
|
31
|
+
url: string;
|
|
32
|
+
token: string;
|
|
33
|
+
key?: string;
|
|
34
|
+
name?: string;
|
|
35
|
+
page?: string;
|
|
36
|
+
orgId?: string;
|
|
37
|
+
};
|
|
35
38
|
};
|
|
36
39
|
export type HeaderActionsProps = {
|
|
37
40
|
isDelete?: {
|
|
@@ -4,6 +4,7 @@ type PreferencesProps = {
|
|
|
4
4
|
page?: string;
|
|
5
5
|
name?: string;
|
|
6
6
|
authToken?: string;
|
|
7
|
+
orgId?: string;
|
|
7
8
|
};
|
|
8
9
|
type PreferencesResponseProps = {
|
|
9
10
|
json: Record<string, any>;
|
|
@@ -12,7 +13,7 @@ type PreferencesResponseProps = {
|
|
|
12
13
|
page: string;
|
|
13
14
|
preference_id: string;
|
|
14
15
|
};
|
|
15
|
-
declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, }: PreferencesProps) => {
|
|
16
|
+
declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, orgId, }: PreferencesProps) => {
|
|
16
17
|
preferences: PreferencesResponseProps[];
|
|
17
18
|
loading: boolean;
|
|
18
19
|
};
|
|
@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useSavePreferences = exports.useGetPreferences = void 0;
|
|
4
4
|
var react_1 = require("react");
|
|
5
5
|
var constructUrl = function (_a) {
|
|
6
|
-
var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name;
|
|
6
|
+
var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name, orgId = _a.orgId;
|
|
7
7
|
var params = new URLSearchParams();
|
|
8
|
+
if (orgId) {
|
|
9
|
+
params.append("orgId", orgId);
|
|
10
|
+
}
|
|
8
11
|
if (page) {
|
|
9
12
|
params.append("page", page);
|
|
10
13
|
}
|
|
@@ -18,15 +21,15 @@ var constructUrl = function (_a) {
|
|
|
18
21
|
return "".concat(baseUrl).concat(queryString ? "?".concat(queryString) : "");
|
|
19
22
|
};
|
|
20
23
|
var useGetPreferences = function (_a) {
|
|
21
|
-
var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
+
var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f, _g = _a.orgId, orgId = _g === void 0 ? "" : _g;
|
|
25
|
+
var _h = (0, react_1.useState)([]), preferences = _h[0], setPreferences = _h[1];
|
|
26
|
+
var _j = (0, react_1.useState)(false), loading = _j[0], setLoading = _j[1];
|
|
24
27
|
(0, react_1.useEffect)(function () {
|
|
25
28
|
if (!baseUrl) {
|
|
26
29
|
return;
|
|
27
30
|
}
|
|
28
31
|
setLoading(true);
|
|
29
|
-
var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name });
|
|
32
|
+
var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name, orgId: orgId });
|
|
30
33
|
fetch(url, {
|
|
31
34
|
headers: {
|
|
32
35
|
Authorization: authToken,
|