pixelize-design-library 2.2.113 → 2.2.114
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.
|
@@ -35,9 +35,10 @@ var TableActions_1 = __importDefault(require("./TableActions"));
|
|
|
35
35
|
var lucide_react_1 = require("lucide-react");
|
|
36
36
|
var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
|
|
37
37
|
var TableBody = function (_a) {
|
|
38
|
+
var _b, _c, _d;
|
|
38
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
40
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
40
|
-
var
|
|
41
|
+
var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
|
|
41
42
|
var toggleRowExpansion = function (rowIndex) {
|
|
42
43
|
setExpandedRows(function (prev) {
|
|
43
44
|
var newSet = new Set(prev);
|
|
@@ -77,9 +78,9 @@ var TableBody = function (_a) {
|
|
|
77
78
|
return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
|
|
78
79
|
}
|
|
79
80
|
if (data.length === 0) {
|
|
80
|
-
return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.
|
|
81
|
+
return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
|
|
81
82
|
react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
|
|
82
|
-
react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
|
|
83
|
+
react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
|
|
83
84
|
react_2.default.createElement("p", null, "No data found")))));
|
|
84
85
|
}
|
|
85
86
|
return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
|
|
@@ -29,6 +29,7 @@ export type LeftFilterPaneProps = {
|
|
|
29
29
|
onApply?: (selected: any) => void;
|
|
30
30
|
onClear?: () => void;
|
|
31
31
|
theme: any;
|
|
32
|
+
isApplyLoading?: boolean;
|
|
32
33
|
};
|
|
33
|
-
declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
34
|
+
declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
34
35
|
export default LeftFilterPane;
|
|
@@ -58,9 +58,9 @@ var SelectOperationControls_1 = require("./SelectOperationControls");
|
|
|
58
58
|
var CompactSelect_1 = __importDefault(require("./CompactSelect"));
|
|
59
59
|
var LeftFilterPane = function (_a) {
|
|
60
60
|
var _b, _c;
|
|
61
|
-
var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
61
|
+
var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _f = _a.isApplyLoading, isApplyLoading = _f === void 0 ? false : _f;
|
|
62
|
+
var _g = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _g[0], setIsSearching = _g[1];
|
|
63
|
+
var _h = (0, react_1.useState)({}), localSelected = _h[0], setLocalSelected = _h[1];
|
|
64
64
|
var searchRef = (0, react_1.useRef)(null);
|
|
65
65
|
(0, react_1.useEffect)(function () {
|
|
66
66
|
setLocalSelected(selectedProp || {});
|
|
@@ -148,6 +148,15 @@ var LeftFilterPane = function (_a) {
|
|
|
148
148
|
.map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); })
|
|
149
149
|
.filter(function (sec) { return (sec.items || []).length > 0; });
|
|
150
150
|
}, [search, sections]);
|
|
151
|
+
var hasActiveFilters = (0, react_1.useMemo)(function () {
|
|
152
|
+
return Object.entries(localSelected).some(function (_a) {
|
|
153
|
+
var key = _a[0], value = _a[1];
|
|
154
|
+
if (key === "search") {
|
|
155
|
+
return !!(value && typeof value === "string" && value.trim() !== "");
|
|
156
|
+
}
|
|
157
|
+
return Array.isArray(value) && value.length > 0;
|
|
158
|
+
});
|
|
159
|
+
}, [localSelected]);
|
|
151
160
|
var handleApply = function () {
|
|
152
161
|
onApply === null || onApply === void 0 ? void 0 : onApply(selected);
|
|
153
162
|
};
|
|
@@ -309,12 +318,8 @@ var LeftFilterPane = function (_a) {
|
|
|
309
318
|
}))))));
|
|
310
319
|
}))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
|
|
311
320
|
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")))),
|
|
312
|
-
react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
|
|
321
|
+
hasActiveFilters && (react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
|
|
313
322
|
react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
|
|
314
|
-
react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary",
|
|
315
|
-
// bg={theme.colors?.red?.[500]}
|
|
316
|
-
color: "white", size: "sm", onClick: handleApply,
|
|
317
|
-
// _hover={{ bg: theme.colors?.red?.[600] }}
|
|
318
|
-
fontSize: "xs" }, "Apply"))));
|
|
323
|
+
react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading }, "Apply")))));
|
|
319
324
|
};
|
|
320
325
|
exports.default = LeftFilterPane;
|
|
@@ -113,8 +113,8 @@ function Table(_a) {
|
|
|
113
113
|
var controlsHeight = 45;
|
|
114
114
|
var estimatedRowHeight = 45;
|
|
115
115
|
var actualRows = _filteredData.length;
|
|
116
|
-
var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : 5;
|
|
117
|
-
var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : 10;
|
|
116
|
+
var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : (actualRows === 0 ? 1 : 5);
|
|
117
|
+
var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
|
|
118
118
|
var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
|
|
119
119
|
(0, react_1.useEffect)(function () {
|
|
120
120
|
if (!autoFitViewport)
|
|
@@ -148,7 +148,7 @@ function Table(_a) {
|
|
|
148
148
|
return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
|
|
149
149
|
react_1.default.createElement(react_2.Flex, { align: "start" },
|
|
150
150
|
react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.25 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500], style: { height: controlsHeight + tableMaxH } },
|
|
151
|
-
react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler })),
|
|
151
|
+
react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading })),
|
|
152
152
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
153
153
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, flexWrap: "nowrap", bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
|
|
154
154
|
filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
|