pixelize-design-library 2.2.116 → 2.2.118
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/Header/components/desktopMenu.js +10 -2
- package/dist/Components/Header/components/mobileMenu.js +15 -3
- package/dist/Components/ProductCard/ProductPrice.js +25 -17
- package/dist/Components/SearchSelect/SearchSelect.js +7 -4
- package/dist/Components/Table/Components/TableBody.d.ts +1 -1
- package/dist/Components/Table/Components/TableBody.js +2 -2
- package/dist/Components/Table/Components/TableLoading.d.ts +3 -1
- package/dist/Components/Table/Components/TableLoading.js +3 -3
- package/dist/Components/Table/Table.d.ts +1 -1
- package/dist/Components/Table/Table.js +21 -7
- package/dist/Components/Table/TableProps.d.ts +2 -1
- package/package.json +1 -1
|
@@ -19,7 +19,11 @@ var DesktopMenu = function (_a) {
|
|
|
19
19
|
// bg={isActive(item.href) ? activeBg : "transparent"}
|
|
20
20
|
borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
|
|
21
21
|
react_2.default.createElement(react_1.VStack, { spacing: 0 },
|
|
22
|
-
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.
|
|
22
|
+
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm",
|
|
23
|
+
// backdropFilter="saturate(180%) blur(6px)"
|
|
24
|
+
// bg="whiteAlpha.800"
|
|
25
|
+
// color="gray.800"
|
|
26
|
+
px: 2, py: 0.5 }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
|
|
23
27
|
react_2.default.createElement(react_1.Text, null, item.label))),
|
|
24
28
|
hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
|
|
25
29
|
react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
|
|
@@ -27,7 +31,11 @@ var DesktopMenu = function (_a) {
|
|
|
27
31
|
var _a, _b, _c, _d;
|
|
28
32
|
return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
|
|
29
33
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
30
|
-
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.
|
|
34
|
+
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm",
|
|
35
|
+
// backdropFilter="saturate(180%) blur(6px)"
|
|
36
|
+
// bg="whiteAlpha.800"
|
|
37
|
+
// color="gray.800"
|
|
38
|
+
px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
|
|
31
39
|
react_2.default.createElement(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor } }, subItem.label))));
|
|
32
40
|
})))))));
|
|
33
41
|
})));
|
|
@@ -26,7 +26,11 @@ var MobileMenu = function (_a) {
|
|
|
26
26
|
: "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
|
|
27
27
|
react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
|
|
28
28
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
29
|
-
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.
|
|
29
|
+
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm",
|
|
30
|
+
// backdropFilter="saturate(180%) blur(6px)"
|
|
31
|
+
// bg="whiteAlpha.800"
|
|
32
|
+
// color="gray.800"
|
|
33
|
+
px: 2, py: 0.5 }, item.badge.label)),
|
|
30
34
|
react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
|
|
31
35
|
react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
|
|
32
36
|
react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
|
|
@@ -37,13 +41,21 @@ var MobileMenu = function (_a) {
|
|
|
37
41
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
38
42
|
}, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
|
|
39
43
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
40
|
-
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.
|
|
44
|
+
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm",
|
|
45
|
+
// backdropFilter="saturate(180%) blur(6px)"
|
|
46
|
+
// bg="whiteAlpha.800"
|
|
47
|
+
// color="gray.800"
|
|
48
|
+
px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
|
|
41
49
|
react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
|
|
42
50
|
react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
|
|
43
51
|
react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
|
|
44
52
|
}))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
|
|
45
53
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
46
|
-
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.
|
|
54
|
+
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm",
|
|
55
|
+
// backdropFilter="saturate(180%) blur(6px)"
|
|
56
|
+
// bg="whiteAlpha.800"
|
|
57
|
+
// color="gray.800"
|
|
58
|
+
px: 2, py: 0.5 }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
|
|
47
59
|
react_2.default.createElement(react_1.Text, null, item.label))));
|
|
48
60
|
}),
|
|
49
61
|
rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
|
|
@@ -113,31 +113,39 @@ var ProductPrice = function (_a) {
|
|
|
113
113
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
|
|
114
114
|
}, [selected, onSelect]);
|
|
115
115
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
116
|
-
isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px,
|
|
117
|
-
|
|
116
|
+
isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px,
|
|
117
|
+
// py={cfg.py}
|
|
118
|
+
rounded: "md", display: "inline-block", w: "100%" },
|
|
119
|
+
react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px,
|
|
120
|
+
// py={cfg.py}
|
|
121
|
+
rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
|
|
118
122
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
119
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "
|
|
123
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label)),
|
|
120
124
|
react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
|
|
121
125
|
!isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
122
|
-
react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "
|
|
126
|
+
react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
|
|
123
127
|
var discounted = getDiscountedPrice(option);
|
|
124
128
|
var isSelected = selected.var_id === option.var_id;
|
|
125
|
-
return (react_1.default.createElement(react_2.Grid, { key: option.var_id, px:
|
|
129
|
+
return (react_1.default.createElement(react_2.Grid, { key: option.var_id, px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: function () {
|
|
126
130
|
setSelected(option);
|
|
127
131
|
setIsOpen(false);
|
|
128
|
-
}, templateColumns: { base: '1fr auto', md: '1fr auto' },
|
|
129
|
-
|
|
132
|
+
}, templateColumns: { base: '1fr auto', md: '1fr auto' },
|
|
133
|
+
// columnGap={{ base: 2, md: 3 }}
|
|
134
|
+
// rowGap={{ base: 1.5, md: 2 }}
|
|
135
|
+
alignItems: "center" },
|
|
136
|
+
react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0 },
|
|
130
137
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
131
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label)),
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
"
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
"
|
|
139
|
-
|
|
140
|
-
|
|
138
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
|
|
139
|
+
react_1.default.createElement(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left" },
|
|
140
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
|
|
141
|
+
option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF"))),
|
|
142
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },
|
|
143
|
+
"\u20B9",
|
|
144
|
+
discounted),
|
|
145
|
+
option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap" },
|
|
146
|
+
"\u20B9",
|
|
147
|
+
option.price)))),
|
|
148
|
+
react_1.default.createElement(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: "white", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none" }, isSelected && (react_1.default.createElement(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })))));
|
|
141
149
|
})))),
|
|
142
150
|
react_1.default.createElement(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" } },
|
|
143
151
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0 },
|
|
@@ -210,7 +210,7 @@ var SearchSelect = function (_a) {
|
|
|
210
210
|
return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
|
|
211
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 })),
|
|
212
212
|
react_1.default.createElement(react_2.InputGroup, { size: size },
|
|
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
|
|
213
|
+
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, pr: "2rem", position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error
|
|
214
214
|
? theme.colors.semantic.error[500]
|
|
215
215
|
: focused
|
|
216
216
|
? theme.colors.primary[500]
|
|
@@ -237,13 +237,16 @@ var SearchSelect = function (_a) {
|
|
|
237
237
|
? item.label.slice(0, chip.maxText) + "…"
|
|
238
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" })); })
|
|
239
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
|
|
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, display: "flex", alignItems: "center", flex: "1", minW: 0 },
|
|
241
|
+
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)" }))),
|
|
241
242
|
(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" })),
|
|
242
|
-
(
|
|
243
|
+
(isOpen || inputValue || !selectedValues.length) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1",
|
|
244
|
+
// minW="5rem"
|
|
245
|
+
minW: "0", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
|
|
243
246
|
setFocused(true);
|
|
244
247
|
setIsOpen(true);
|
|
245
248
|
}, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })),
|
|
246
|
-
react_1.default.createElement(react_2.Box, {
|
|
249
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1 },
|
|
247
250
|
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" },
|
|
248
251
|
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: {
|
|
249
252
|
bg: "transparent",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TableBodyPageProps } from "../TableProps";
|
|
3
|
-
declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
|
|
3
|
+
declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, }: TableBodyPageProps) => React.JSX.Element;
|
|
4
4
|
export default TableBody;
|
|
@@ -36,7 +36,7 @@ var lucide_react_1 = require("lucide-react");
|
|
|
36
36
|
var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
|
|
37
37
|
var TableBody = function (_a) {
|
|
38
38
|
var _b, _c, _d;
|
|
39
|
-
var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
|
|
39
|
+
var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows;
|
|
40
40
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
41
41
|
var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
|
|
42
42
|
var toggleRowExpansion = function (rowIndex) {
|
|
@@ -75,7 +75,7 @@ var TableBody = function (_a) {
|
|
|
75
75
|
(isContent ? 1 : 0) +
|
|
76
76
|
(isLink ? 1 : 0);
|
|
77
77
|
if (isLoading) {
|
|
78
|
-
return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
|
|
78
|
+
return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
|
|
79
79
|
}
|
|
80
80
|
if (data.length === 0) {
|
|
81
81
|
return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const TableLoading: () => React.JSX.Element;
|
|
3
3
|
export default TableLoading;
|
|
4
|
-
export declare const TableBodyLoading: ({ noOfColumns, borderColor, }: {
|
|
4
|
+
export declare const TableBodyLoading: ({ noOfColumns, borderColor, rowsCount, rowHeight, }: {
|
|
5
5
|
noOfColumns: number;
|
|
6
6
|
borderColor: string;
|
|
7
|
+
rowsCount?: number | undefined;
|
|
8
|
+
rowHeight?: number | undefined;
|
|
7
9
|
}) => React.JSX.Element;
|
|
@@ -31,10 +31,10 @@ var TableLoading = function () {
|
|
|
31
31
|
};
|
|
32
32
|
exports.default = TableLoading;
|
|
33
33
|
var TableBodyLoading = function (_a) {
|
|
34
|
-
var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor;
|
|
35
|
-
return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length:
|
|
34
|
+
var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor, _b = _a.rowsCount, rowsCount = _b === void 0 ? 4 : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? 45 : _c;
|
|
35
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: rowsCount }).map(function (_, index) {
|
|
36
36
|
return (react_1.default.createElement(react_2.Tr, { key: index },
|
|
37
|
-
react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor) },
|
|
37
|
+
react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor), px: 2, pt: 2, pb: 0, height: "".concat(rowHeight, "px"), boxSizing: "border-box" },
|
|
38
38
|
react_1.default.createElement(react_2.Skeleton, { height: "15px", variant: "shine" }))));
|
|
39
39
|
})));
|
|
40
40
|
};
|
|
@@ -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, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar }: 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, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows }: TableProps): React.JSX.Element;
|
|
@@ -54,7 +54,7 @@ function Table(_a) {
|
|
|
54
54
|
name: "",
|
|
55
55
|
page: "",
|
|
56
56
|
orgId: "",
|
|
57
|
-
} : _2, _3 = _a.paginationMode, paginationMode = _3 === void 0 ? "client" : _3, _4 = _a.noOfRowsPerPage, noOfRowsPerPage = _4 === void 0 ? 50 : _4, _5 = _a.totalRecords, totalRecords = _5 === void 0 ? 0 : _5, onPagination = _a.onPagination, _6 = _a.isTableSettings, isTableSettings = _6 === void 0 ? false : _6, 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
|
|
57
|
+
} : _2, _3 = _a.paginationMode, paginationMode = _3 === void 0 ? "client" : _3, _4 = _a.noOfRowsPerPage, noOfRowsPerPage = _4 === void 0 ? 50 : _4, _5 = _a.totalRecords, totalRecords = _5 === void 0 ? 0 : _5, onPagination = _a.onPagination, _6 = _a.isTableSettings, isTableSettings = _6 === void 0 ? false : _6, 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
|
|
58
58
|
// onColumnFilter
|
|
59
59
|
;
|
|
60
60
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
@@ -113,7 +113,12 @@ function Table(_a) {
|
|
|
113
113
|
var controlsHeight = 45;
|
|
114
114
|
var estimatedRowHeight = 45;
|
|
115
115
|
var actualRows = _filteredData.length;
|
|
116
|
-
var
|
|
116
|
+
var loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
|
|
117
|
+
var minRows = typeof minVisibleRows === "number"
|
|
118
|
+
? Math.max(0, minVisibleRows)
|
|
119
|
+
: (actualRows === 0
|
|
120
|
+
? 1
|
|
121
|
+
: ((filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 5 : actualRows));
|
|
117
122
|
var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
|
|
118
123
|
var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
|
|
119
124
|
(0, react_1.useEffect)(function () {
|
|
@@ -130,11 +135,14 @@ function Table(_a) {
|
|
|
130
135
|
window.addEventListener("resize", compute);
|
|
131
136
|
return function () { return window.removeEventListener("resize", compute); };
|
|
132
137
|
}, [autoFitViewport]);
|
|
133
|
-
var
|
|
138
|
+
var heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
|
|
139
|
+
var isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
|
|
140
|
+
var rowsHeight = (heightRowsCount * estimatedRowHeight) + estimatedRowHeight;
|
|
134
141
|
var dynamicMaxH = Math.min(500, rowsHeight);
|
|
135
142
|
var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
|
|
136
|
-
var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : fittedMaxH;
|
|
143
|
+
var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
|
|
137
144
|
var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
|
|
145
|
+
var compactScrollbarPadding = isCompactRows ? 4 : 0;
|
|
138
146
|
var sidebarActiveCount = (0, react_1.useMemo)(function () {
|
|
139
147
|
if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
|
|
140
148
|
return 0;
|
|
@@ -183,9 +191,12 @@ function Table(_a) {
|
|
|
183
191
|
react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
|
|
184
192
|
react_1.default.createElement(react_2.PopoverBody, { p: 0 },
|
|
185
193
|
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, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))))))),
|
|
186
|
-
react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
|
|
194
|
+
react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
|
|
187
195
|
'&::-webkit-scrollbar': {
|
|
188
196
|
width: '6px',
|
|
197
|
+
height: isCompactRows ? '0px' : '6px',
|
|
198
|
+
},
|
|
199
|
+
'&:hover::-webkit-scrollbar': {
|
|
189
200
|
height: '6px',
|
|
190
201
|
},
|
|
191
202
|
'&::-webkit-scrollbar-track': {
|
|
@@ -199,7 +210,10 @@ function Table(_a) {
|
|
|
199
210
|
'&::-webkit-scrollbar-thumb:hover': {
|
|
200
211
|
background: theme.colors.gray[500],
|
|
201
212
|
},
|
|
202
|
-
scrollbarWidth: 'thin',
|
|
213
|
+
scrollbarWidth: isCompactRows ? 'none' : 'thin',
|
|
214
|
+
'&:hover': {
|
|
215
|
+
scrollbarWidth: 'thin',
|
|
216
|
+
},
|
|
203
217
|
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
204
218
|
} },
|
|
205
219
|
react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
|
|
@@ -223,6 +237,6 @@ function Table(_a) {
|
|
|
223
237
|
? false
|
|
224
238
|
: "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
|
|
225
239
|
react_1.default.createElement(react_3.Tbody, null,
|
|
226
|
-
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 : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
|
|
240
|
+
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 : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
|
|
227
241
|
}
|
|
228
242
|
exports.default = Table;
|
|
@@ -30,6 +30,7 @@ export type TableProps = {
|
|
|
30
30
|
minVisibleRows?: number;
|
|
31
31
|
maxVisibleRows?: number;
|
|
32
32
|
autoFitViewport?: boolean;
|
|
33
|
+
loadingSkeletonRows?: number;
|
|
33
34
|
headerActions?: HeaderActionsProps;
|
|
34
35
|
onGlobalSearch?: (searchVal: string) => void;
|
|
35
36
|
onColumnFilter?: (filters: Record<string, any>) => void;
|
|
@@ -106,7 +107,7 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
|
|
|
106
107
|
setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
|
|
107
108
|
columnsSearch: Record<string, string>;
|
|
108
109
|
};
|
|
109
|
-
export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
|
|
110
|
+
export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze"> & {
|
|
110
111
|
startRow: number;
|
|
111
112
|
endRow: number;
|
|
112
113
|
columnWidths: number[];
|