pixelize-design-library 2.2.111 → 2.2.113
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/FilterSidebar/FilterSidebar.d.ts +1 -0
- package/dist/Components/FilterSidebar/FilterSidebar.js +20 -19
- package/dist/Components/Table/CompactSelect.js +14 -13
- package/dist/Components/Table/LeftFilterPane.d.ts +9 -2
- package/dist/Components/Table/LeftFilterPane.js +191 -167
- package/dist/Components/Table/Table.js +36 -14
- package/package.json +1 -1
|
@@ -26,6 +26,7 @@ export type FilterSidebarProps = {
|
|
|
26
26
|
sidebarOptions: FilterSection[];
|
|
27
27
|
selected?: SelectedFilters;
|
|
28
28
|
onChange?: (selected: SelectedFilters) => void;
|
|
29
|
+
onApply?: (selected: SelectedFilters) => void;
|
|
29
30
|
maxVisible?: number;
|
|
30
31
|
width?: string | number;
|
|
31
32
|
variant?: "minimal" | "cards";
|
|
@@ -194,25 +194,26 @@ var FilterSidebar = function (_a) {
|
|
|
194
194
|
react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
|
|
195
195
|
currentMin,
|
|
196
196
|
range.unit ? " ".concat(range.unit) : "")))),
|
|
197
|
-
react_1.default.createElement(react_2.
|
|
198
|
-
react_1.default.createElement(react_2.
|
|
199
|
-
react_1.default.createElement(react_2.
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
react_1.default.createElement(
|
|
197
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
198
|
+
react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600 },
|
|
199
|
+
react_1.default.createElement(react_2.PopoverBody, { p: 0 },
|
|
200
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "min-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
|
|
201
|
+
var min = v;
|
|
202
|
+
var max = currentMax;
|
|
203
|
+
var nextVal = [Math.min(min, max), Math.max(min, max)];
|
|
204
|
+
setInternalSelected(function (prev) {
|
|
205
|
+
var _a;
|
|
206
|
+
var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
|
|
207
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(next);
|
|
208
|
+
return next;
|
|
209
|
+
});
|
|
210
|
+
setOpenPrice({});
|
|
211
|
+
} },
|
|
212
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
|
|
213
|
+
v,
|
|
214
|
+
range.unit ? " ".concat(range.unit) : ""),
|
|
215
|
+
currentMin === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
|
|
216
|
+
react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); })))))),
|
|
216
217
|
react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
|
|
217
218
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
218
219
|
react_1.default.createElement(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: function () { return setOpenPrice({ id: section.id, target: "max" }); }, gap: 2, overflow: "hidden" },
|
|
@@ -41,18 +41,19 @@ var CompactSelect = function (_a) {
|
|
|
41
41
|
react_1.default.createElement(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? "".concat(height, "px") : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: function () { return setIsOpen(function (prev) { return !prev; }); } },
|
|
42
42
|
react_1.default.createElement(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left" }, (value === null || value === void 0 ? void 0 : value.label) || placeholder),
|
|
43
43
|
isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 12 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 12 }))),
|
|
44
|
-
react_1.default.createElement(react_2.
|
|
45
|
-
react_1.default.createElement(react_2.
|
|
46
|
-
react_1.default.createElement(react_2.
|
|
47
|
-
react_1.default.createElement(react_2.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
react_1.default.createElement(react_2.
|
|
44
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
45
|
+
react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600 },
|
|
46
|
+
react_1.default.createElement(react_2.PopoverBody, { p: 2 },
|
|
47
|
+
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
|
|
48
|
+
react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
|
|
49
|
+
react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
|
|
50
|
+
filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
|
|
51
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
|
|
52
|
+
setIsOpen(false);
|
|
53
|
+
setQuery("");
|
|
54
|
+
} },
|
|
55
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
|
|
56
|
+
filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
|
|
57
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results"))))))))));
|
|
57
58
|
};
|
|
58
59
|
exports.default = CompactSelect;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
export type FilterItem = {
|
|
3
3
|
id: string;
|
|
4
4
|
label: string;
|
|
5
|
-
type?: "text" | "select";
|
|
5
|
+
type?: "text" | "select" | "user";
|
|
6
6
|
option?: {
|
|
7
7
|
id: string;
|
|
8
8
|
label: string;
|
|
@@ -15,13 +15,20 @@ export type FilterSection = {
|
|
|
15
15
|
initiallyExpanded?: boolean;
|
|
16
16
|
radio?: boolean;
|
|
17
17
|
};
|
|
18
|
+
export type SelectedFilterItem = {
|
|
19
|
+
id: string;
|
|
20
|
+
condition?: string;
|
|
21
|
+
value?: any;
|
|
22
|
+
type?: "text" | "select" | "user";
|
|
23
|
+
};
|
|
18
24
|
export type LeftFilterPaneProps = {
|
|
19
25
|
title?: string;
|
|
20
26
|
height?: number | string;
|
|
21
27
|
sections: FilterSection[];
|
|
28
|
+
selected?: Record<string, any>;
|
|
22
29
|
onApply?: (selected: any) => void;
|
|
23
30
|
onClear?: () => void;
|
|
24
31
|
theme: any;
|
|
25
32
|
};
|
|
26
|
-
declare const LeftFilterPane: ({ title, height, sections, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
33
|
+
declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
27
34
|
export default LeftFilterPane;
|
|
@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
33
|
__setModuleDefault(result, mod);
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
36
45
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
46
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
47
|
};
|
|
@@ -49,25 +58,57 @@ var SelectOperationControls_1 = require("./SelectOperationControls");
|
|
|
49
58
|
var CompactSelect_1 = __importDefault(require("./CompactSelect"));
|
|
50
59
|
var LeftFilterPane = function (_a) {
|
|
51
60
|
var _b, _c;
|
|
52
|
-
var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ?
|
|
53
|
-
var _f = (0, react_1.useState)(
|
|
54
|
-
var _g = (0, react_1.useState)(
|
|
55
|
-
var _h = (0, react_1.useState)({}), selected = _h[0], setSelected = _h[1];
|
|
56
|
-
var _j = (0, react_1.useState)({}), textFilters = _j[0], setTextFilters = _j[1];
|
|
57
|
-
var _k = (0, react_1.useState)({}), userSelects = _k[0], setUserSelects = _k[1];
|
|
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 _f = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _f[0], setIsSearching = _f[1];
|
|
63
|
+
var _g = (0, react_1.useState)({}), localSelected = _g[0], setLocalSelected = _g[1];
|
|
58
64
|
var searchRef = (0, react_1.useRef)(null);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
65
|
+
(0, react_1.useEffect)(function () {
|
|
66
|
+
setLocalSelected(selectedProp || {});
|
|
67
|
+
if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search) {
|
|
68
|
+
setIsSearching(true);
|
|
69
|
+
}
|
|
70
|
+
}, [selectedProp]);
|
|
71
|
+
var selected = localSelected;
|
|
72
|
+
var search = selected.search || "";
|
|
73
|
+
var setSelected = function (updater) {
|
|
74
|
+
setLocalSelected(function (prev) {
|
|
75
|
+
var next = typeof updater === 'function' ? updater(prev) : updater;
|
|
76
|
+
return next;
|
|
64
77
|
});
|
|
65
78
|
};
|
|
66
|
-
var
|
|
67
|
-
|
|
79
|
+
var setSearch = function (val) {
|
|
80
|
+
setSelected(function (prev) { return (__assign(__assign({}, prev), { search: val })); });
|
|
81
|
+
};
|
|
82
|
+
var updateItem = function (sectionId, itemId, updates) {
|
|
83
|
+
setSelected(function (prev) {
|
|
68
84
|
var _a;
|
|
69
|
-
var
|
|
70
|
-
|
|
85
|
+
var sectionItems = prev[sectionId] || [];
|
|
86
|
+
var index = sectionItems.findIndex(function (i) { return i.id === itemId; });
|
|
87
|
+
if (index === -1)
|
|
88
|
+
return prev;
|
|
89
|
+
var newSectionItems = __spreadArray([], sectionItems, true);
|
|
90
|
+
newSectionItems[index] = __assign(__assign({}, newSectionItems[index]), updates);
|
|
91
|
+
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = newSectionItems, _a));
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
var setTextOperator = function (sectionId, itemId, operator) {
|
|
95
|
+
updateItem(sectionId, itemId, { condition: operator });
|
|
96
|
+
};
|
|
97
|
+
var setTextValue = function (sectionId, itemId, value) {
|
|
98
|
+
updateItem(sectionId, itemId, { value: value });
|
|
99
|
+
};
|
|
100
|
+
var toggleItem = function (sectionId, itemId, checked, type) {
|
|
101
|
+
setSelected(function (prev) {
|
|
102
|
+
var _a, _b;
|
|
103
|
+
var sectionItems = prev[sectionId] || [];
|
|
104
|
+
if (checked) {
|
|
105
|
+
if (sectionItems.some(function (i) { return i.id === itemId; }))
|
|
106
|
+
return prev;
|
|
107
|
+
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = __spreadArray(__spreadArray([], sectionItems, true), [{ id: itemId, type: type, condition: (type === "select" || type === "user") ? "is" : "contains", value: "" }], false), _a));
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = sectionItems.filter(function (i) { return i.id !== itemId; }), _b));
|
|
111
|
+
}
|
|
71
112
|
});
|
|
72
113
|
};
|
|
73
114
|
var formatHeaderLabel = function (label) {
|
|
@@ -94,9 +135,8 @@ var LeftFilterPane = function (_a) {
|
|
|
94
135
|
(0, react_3.useOutsideClick)({
|
|
95
136
|
ref: searchRef,
|
|
96
137
|
handler: function () {
|
|
97
|
-
if (isSearching) {
|
|
138
|
+
if (isSearching && !search.trim()) {
|
|
98
139
|
setIsSearching(false);
|
|
99
|
-
setSearch("");
|
|
100
140
|
}
|
|
101
141
|
},
|
|
102
142
|
});
|
|
@@ -104,58 +144,19 @@ var LeftFilterPane = function (_a) {
|
|
|
104
144
|
if (!search.trim())
|
|
105
145
|
return sections;
|
|
106
146
|
var q = search.toLowerCase();
|
|
107
|
-
return sections
|
|
147
|
+
return sections
|
|
148
|
+
.map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); })
|
|
149
|
+
.filter(function (sec) { return (sec.items || []).length > 0; });
|
|
108
150
|
}, [search, sections]);
|
|
109
|
-
var toggleItem = function (sectionId, itemId, checked) {
|
|
110
|
-
setSelected(function (prev) {
|
|
111
|
-
var _a;
|
|
112
|
-
var cur = new Set(prev[sectionId] || []);
|
|
113
|
-
if (checked)
|
|
114
|
-
cur.add(itemId);
|
|
115
|
-
else
|
|
116
|
-
cur.delete(itemId);
|
|
117
|
-
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(cur), _a));
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
151
|
var handleApply = function () {
|
|
121
|
-
|
|
122
|
-
sections.forEach(function (sec) {
|
|
123
|
-
var picked = selected[sec.id] || [];
|
|
124
|
-
if (!picked.length)
|
|
125
|
-
return;
|
|
126
|
-
var list = [];
|
|
127
|
-
picked.forEach(function (itemId) {
|
|
128
|
-
var _a, _b;
|
|
129
|
-
var def = (sec.items || []).find(function (i) { return i.id === itemId; });
|
|
130
|
-
var entry = { id: itemId };
|
|
131
|
-
if ((def === null || def === void 0 ? void 0 : def.type) === "text") {
|
|
132
|
-
var tf = textFilters[itemId];
|
|
133
|
-
if (tf && String(tf.value || "").length > 0) {
|
|
134
|
-
entry.condition = tf.operator || "contains";
|
|
135
|
-
entry.value = String(tf.value);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
else if ((def === null || def === void 0 ? void 0 : def.type) === "select") {
|
|
139
|
-
var tf = textFilters[itemId];
|
|
140
|
-
var op = (tf === null || tf === void 0 ? void 0 : tf.operator) || "is";
|
|
141
|
-
var sel = (_b = (_a = userSelects[itemId]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : tf === null || tf === void 0 ? void 0 : tf.value;
|
|
142
|
-
if (sel !== undefined && sel !== null && String(sel).length > 0) {
|
|
143
|
-
entry.condition = op;
|
|
144
|
-
entry.value = String(sel);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
list.push(entry);
|
|
148
|
-
});
|
|
149
|
-
embeddedSelected[sec.id] = list;
|
|
150
|
-
});
|
|
151
|
-
var payload = { selected: embeddedSelected };
|
|
152
|
-
onApply === null || onApply === void 0 ? void 0 : onApply(payload);
|
|
152
|
+
onApply === null || onApply === void 0 ? void 0 : onApply(selected);
|
|
153
153
|
};
|
|
154
154
|
var handleClear = function () {
|
|
155
|
-
|
|
155
|
+
var clearedState = { search: "" };
|
|
156
|
+
setLocalSelected(clearedState);
|
|
156
157
|
onClear === null || onClear === void 0 ? void 0 : onClear();
|
|
158
|
+
onApply === null || onApply === void 0 ? void 0 : onApply(clearedState);
|
|
157
159
|
};
|
|
158
|
-
var hasSelection = (0, react_1.useMemo)(function () { return Object.values(selected).some(function (arr) { return (arr || []).length > 0; }); }, [selected]);
|
|
159
160
|
return (react_1.default.createElement(react_2.Box, { width: "180px", height: height, bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column" },
|
|
160
161
|
react_1.default.createElement(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200" }, !isSearching ? (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between" },
|
|
161
162
|
react_1.default.createElement(react_2.Text, { fontWeight: "semibold", fontSize: "sm" }, title),
|
|
@@ -169,112 +170,124 @@ var LeftFilterPane = function (_a) {
|
|
|
169
170
|
setSearch("");
|
|
170
171
|
setIsSearching(false);
|
|
171
172
|
} }))))))),
|
|
172
|
-
react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" },
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
overflow: "hidden",
|
|
182
|
-
textOverflow: "ellipsis",
|
|
183
|
-
} }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
173
|
+
react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" }, filteredSections.length > 0 ? (filteredSections.length > 1 ? (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections
|
|
174
|
+
.map(function (s, i) { return (s.initiallyExpanded ? i : -1); })
|
|
175
|
+
.filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
|
|
176
|
+
var _a;
|
|
177
|
+
return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
|
|
178
|
+
react_1.default.createElement("h2", null,
|
|
179
|
+
react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
|
|
180
|
+
(sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
181
|
+
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
184
182
|
whiteSpace: "nowrap",
|
|
185
183
|
overflow: "hidden",
|
|
186
184
|
textOverflow: "ellipsis",
|
|
187
|
-
} }, formatHeaderLabel(sec.label))),
|
|
188
|
-
react_1.default.createElement(react_2.AccordionIcon, null))),
|
|
189
|
-
react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
190
|
-
react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && selected[sec.id][0]) || "", onChange: function (val) {
|
|
191
|
-
return setSelected(function (prev) {
|
|
192
|
-
var _a;
|
|
193
|
-
return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [val] : [], _a)));
|
|
194
|
-
});
|
|
195
|
-
}, options: (sec.items || []).map(function (it) { return ({
|
|
196
|
-
label: it.label,
|
|
197
|
-
id: it.id,
|
|
198
|
-
}); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
|
|
199
|
-
((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })),
|
|
200
|
-
(function () {
|
|
201
|
-
var _a;
|
|
202
|
-
var curr = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); });
|
|
203
|
-
if ((curr === null || curr === void 0 ? void 0 : curr.type) !== "select")
|
|
204
|
-
return null;
|
|
205
|
-
var opts = curr.selectOption || curr.option || [];
|
|
206
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
207
|
-
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: ((_a = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _a === void 0 ? void 0 : _a.operator) || "is", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
208
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
209
|
-
react_1.default.createElement(CompactSelect_1.default, { placeholder: curr.label, size: "xs", height: "22px", options: opts, value: userSelects[((selected[sec.id] && selected[sec.id][0]) || "")], onSelect: function (option) {
|
|
210
|
-
var _a;
|
|
211
|
-
setUserSelects(function (prev) {
|
|
212
|
-
var _a;
|
|
213
|
-
return (__assign(__assign({}, prev), (_a = {}, _a[((selected[sec.id] && selected[sec.id][0]) || "")] = option, _a)));
|
|
214
|
-
});
|
|
215
|
-
if (option) {
|
|
216
|
-
setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), String(option.id));
|
|
217
|
-
setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), ((_a = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _a === void 0 ? void 0 : _a.operator) || "is");
|
|
218
|
-
}
|
|
219
|
-
} }))));
|
|
220
|
-
})())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
221
|
-
var _a, _b, _c;
|
|
222
|
-
var checked = (selected[sec.id] || []).includes(it.id);
|
|
223
|
-
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
224
|
-
react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
|
|
225
|
-
'.chakra-checkbox__control': {
|
|
226
|
-
width: '12px',
|
|
227
|
-
height: '12px',
|
|
228
|
-
mt: '2px',
|
|
229
|
-
},
|
|
230
|
-
'.chakra-checkbox__label': {
|
|
231
|
-
lineHeight: '1rem',
|
|
232
|
-
whiteSpace: 'normal',
|
|
233
|
-
wordBreak: 'break-word',
|
|
234
|
-
},
|
|
235
|
-
} }),
|
|
236
|
-
checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "contains", value: ((_b = textFilters[it.id]) === null || _b === void 0 ? void 0 : _b.value) || "", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, onValueChange: function (val) { return setTextValue(it.id, val); } })),
|
|
237
|
-
checked && it.type === "select" && (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
238
|
-
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: ((_c = textFilters[it.id]) === null || _c === void 0 ? void 0 : _c.operator) || "is", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
239
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
240
|
-
react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: userSelects[it.id], onSelect: function (option) {
|
|
241
|
-
var _a;
|
|
242
|
-
setUserSelects(function (prev) {
|
|
243
|
-
var _a;
|
|
244
|
-
return (__assign(__assign({}, prev), (_a = {}, _a[it.id] = option, _a)));
|
|
245
|
-
});
|
|
246
|
-
if (option) {
|
|
247
|
-
setTextValue(it.id, String(option.id));
|
|
248
|
-
setTextOperator(it.id, ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "is");
|
|
249
|
-
}
|
|
250
|
-
} }))))));
|
|
251
|
-
}))))));
|
|
252
|
-
}))) : (filteredSections.map(function (sec) {
|
|
253
|
-
var _a, _b, _c;
|
|
254
|
-
return (react_1.default.createElement(react_2.Box, { key: sec.id },
|
|
255
|
-
react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" }, (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
256
|
-
react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
185
|
+
} }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
257
186
|
whiteSpace: "nowrap",
|
|
258
187
|
overflow: "hidden",
|
|
259
188
|
textOverflow: "ellipsis",
|
|
260
|
-
} }, formatHeaderLabel(sec.label)))
|
|
189
|
+
} }, formatHeaderLabel(sec.label))),
|
|
190
|
+
react_1.default.createElement(react_2.AccordionIcon, null))),
|
|
191
|
+
react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
192
|
+
react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && ((_a = selected[sec.id][0]) === null || _a === void 0 ? void 0 : _a.id)) || "", onChange: function (val) {
|
|
193
|
+
var item = (sec.items || []).find(function (i) { return i.id === val; });
|
|
194
|
+
setSelected(function (prev) {
|
|
195
|
+
var _a;
|
|
196
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }] : [], _a)));
|
|
197
|
+
});
|
|
198
|
+
}, options: (sec.items || []).map(function (it) { return ({
|
|
199
|
+
label: it.label,
|
|
200
|
+
id: it.id,
|
|
201
|
+
}); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
|
|
202
|
+
(function () {
|
|
203
|
+
var _a;
|
|
204
|
+
var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
|
|
205
|
+
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
|
|
206
|
+
return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
|
|
207
|
+
}
|
|
208
|
+
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
|
|
209
|
+
var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
|
|
210
|
+
var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
|
|
211
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
212
|
+
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
213
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
214
|
+
react_1.default.createElement(CompactSelect_1.default, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: function (option) {
|
|
215
|
+
setTextValue(sec.id, activeItem.id, option);
|
|
216
|
+
} }))));
|
|
217
|
+
}
|
|
218
|
+
return null;
|
|
219
|
+
})())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
220
|
+
var sectionItems = selected[sec.id] || [];
|
|
221
|
+
var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
|
|
222
|
+
var checked = !!activeItem;
|
|
223
|
+
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
224
|
+
react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked, it.type); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
|
|
225
|
+
'.chakra-checkbox__control': {
|
|
226
|
+
width: '12px',
|
|
227
|
+
height: '12px',
|
|
228
|
+
mt: '2px',
|
|
229
|
+
},
|
|
230
|
+
'.chakra-checkbox__label': {
|
|
231
|
+
lineHeight: '1rem',
|
|
232
|
+
whiteSpace: 'normal',
|
|
233
|
+
wordBreak: 'break-word',
|
|
234
|
+
},
|
|
235
|
+
} }),
|
|
236
|
+
checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
|
|
237
|
+
(it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
238
|
+
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
239
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
240
|
+
react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) {
|
|
241
|
+
setTextValue(sec.id, it.id, option);
|
|
242
|
+
} }))))));
|
|
243
|
+
}))))));
|
|
244
|
+
}))) : (filteredSections.map(function (sec) {
|
|
245
|
+
var _a;
|
|
246
|
+
return (react_1.default.createElement(react_2.Box, { key: sec.id },
|
|
247
|
+
react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" }, (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
248
|
+
react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
261
249
|
whiteSpace: "nowrap",
|
|
262
250
|
overflow: "hidden",
|
|
263
251
|
textOverflow: "ellipsis",
|
|
264
|
-
} }, formatHeaderLabel(sec.label)))),
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
252
|
+
} }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
253
|
+
whiteSpace: "nowrap",
|
|
254
|
+
overflow: "hidden",
|
|
255
|
+
textOverflow: "ellipsis",
|
|
256
|
+
} }, formatHeaderLabel(sec.label)))),
|
|
257
|
+
react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
258
|
+
react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && ((_a = selected[sec.id][0]) === null || _a === void 0 ? void 0 : _a.id)) || "", onChange: function (val) {
|
|
259
|
+
var item = (sec.items || []).find(function (i) { return i.id === val; });
|
|
260
|
+
setSelected(function (prev) {
|
|
261
|
+
var _a;
|
|
262
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }] : [], _a)));
|
|
263
|
+
});
|
|
264
|
+
}, options: (sec.items || []).map(function (it) { return ({
|
|
265
|
+
label: it.label,
|
|
266
|
+
id: it.id,
|
|
267
|
+
}); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
|
|
268
|
+
(function () {
|
|
269
|
+
var _a;
|
|
270
|
+
var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
|
|
271
|
+
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
|
|
272
|
+
return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
|
|
273
|
+
}
|
|
274
|
+
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
|
|
275
|
+
var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
|
|
276
|
+
var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
|
|
277
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
278
|
+
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
279
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
280
|
+
react_1.default.createElement(CompactSelect_1.default, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: function (option) {
|
|
281
|
+
setTextValue(sec.id, activeItem.id, option);
|
|
282
|
+
} }))));
|
|
283
|
+
}
|
|
284
|
+
return null;
|
|
285
|
+
})())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
286
|
+
var sectionItems = selected[sec.id] || [];
|
|
287
|
+
var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
|
|
288
|
+
var checked = !!activeItem;
|
|
289
|
+
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
290
|
+
react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked, it.type); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
|
|
278
291
|
'.chakra-checkbox__control': {
|
|
279
292
|
width: '12px',
|
|
280
293
|
height: '12px',
|
|
@@ -285,12 +298,23 @@ var LeftFilterPane = function (_a) {
|
|
|
285
298
|
whiteSpace: 'normal',
|
|
286
299
|
wordBreak: 'break-word',
|
|
287
300
|
},
|
|
288
|
-
} })
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
301
|
+
} }),
|
|
302
|
+
checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
|
|
303
|
+
(it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
304
|
+
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
|
|
305
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
306
|
+
react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) {
|
|
307
|
+
setTextValue(sec.id, it.id, option);
|
|
308
|
+
} }))))));
|
|
309
|
+
}))))));
|
|
310
|
+
}))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
|
|
311
|
+
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 },
|
|
313
|
+
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"))));
|
|
295
319
|
};
|
|
296
320
|
exports.default = LeftFilterPane;
|
|
@@ -46,30 +46,30 @@ var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
|
|
|
46
46
|
var lucide_react_1 = require("lucide-react");
|
|
47
47
|
var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
|
|
48
48
|
function Table(_a) {
|
|
49
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
50
|
-
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading,
|
|
49
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
50
|
+
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _y = _a.isCheckbox, isCheckbox = _y === void 0 ? false : _y, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _z = _a.noBorders, noBorders = _z === void 0 ? false : _z, _0 = _a.isPagination, isPagination = _0 === void 0 ? true : _0, onRowClick = _a.onRowClick, selections = _a.selections, _1 = _a.isActionFreeze, isActionFreeze = _1 === void 0 ? true : _1, _2 = _a.preferences, preferences = _2 === void 0 ? {
|
|
51
51
|
url: "",
|
|
52
52
|
token: "",
|
|
53
53
|
key: "",
|
|
54
54
|
name: "",
|
|
55
55
|
page: "",
|
|
56
56
|
orgId: "",
|
|
57
|
-
} :
|
|
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
|
|
58
58
|
// onColumnFilter
|
|
59
59
|
;
|
|
60
60
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
61
|
-
var
|
|
61
|
+
var _7 = (0, react_1.useState)({}), columnsSearch = _7[0], setColumnsSearch = _7[1];
|
|
62
62
|
var tableContainerRef = (0, react_1.useRef)(null);
|
|
63
|
-
var
|
|
63
|
+
var _8 = (0, react_1.useState)(500), viewportAvailableH = _8[0], setViewportAvailableH = _8[1];
|
|
64
64
|
var isServerPagination = paginationMode === "server";
|
|
65
|
-
var
|
|
65
|
+
var _9 = (0, usePreferences_1.useGetPreferences)({
|
|
66
66
|
baseUrl: preferences.url,
|
|
67
67
|
page: preferences.page,
|
|
68
68
|
key: preferences.key,
|
|
69
69
|
name: preferences.name,
|
|
70
70
|
authToken: preferences.token,
|
|
71
71
|
orgId: preferences.orgId,
|
|
72
|
-
}), tablePreferencesData =
|
|
72
|
+
}), tablePreferencesData = _9.preferences, loading = _9.loading;
|
|
73
73
|
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
74
74
|
baseUrl: preferences.url,
|
|
75
75
|
page: preferences.page,
|
|
@@ -87,7 +87,7 @@ function Table(_a) {
|
|
|
87
87
|
}
|
|
88
88
|
return {};
|
|
89
89
|
}, [tablePreferencesData]);
|
|
90
|
-
var
|
|
90
|
+
var _10 = (0, useTable_1.default)({
|
|
91
91
|
tableBorderColor: tableBorderColor,
|
|
92
92
|
data: data,
|
|
93
93
|
isPagination: isPagination,
|
|
@@ -100,7 +100,7 @@ function Table(_a) {
|
|
|
100
100
|
totalRecords: totalRecords,
|
|
101
101
|
isServerPagination: isServerPagination,
|
|
102
102
|
onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
|
|
103
|
-
}), tableData =
|
|
103
|
+
}), tableData = _10.tableData, isContent = _10.isContent, isLink = _10.isLink, headerRefs = _10.headerRefs, columnWidths = _10.columnWidths, handleSort = _10.handleSort, handleCheckbox = _10.handleCheckbox, filteredData = _10.filteredData, startRow = _10.startRow, endRow = _10.endRow, selection = _10.selection, columnsSort = _10.columnsSort, currentPage = _10.currentPage, pages = _10.pages, rowsPerPage = _10.rowsPerPage, handlePageSizeChange = _10.handlePageSizeChange, setCurrentPage = _10.setCurrentPage, columnsList = _10.columnsList, handleColumnPreferences = _10.handleColumnPreferences;
|
|
104
104
|
var _filteredData = (0, react_1.useMemo)(function () {
|
|
105
105
|
return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
|
|
106
106
|
}, [columnsSearch, filteredData]);
|
|
@@ -135,14 +135,36 @@ function Table(_a) {
|
|
|
135
135
|
var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
|
|
136
136
|
var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : fittedMaxH;
|
|
137
137
|
var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
|
|
138
|
+
var sidebarActiveCount = (0, react_1.useMemo)(function () {
|
|
139
|
+
if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
|
|
140
|
+
return 0;
|
|
141
|
+
return Object.entries(filterSidebar.selected).reduce(function (acc, _a) {
|
|
142
|
+
var key = _a[0], items = _a[1];
|
|
143
|
+
if (key === "search")
|
|
144
|
+
return acc; // Don't count search in active filter count
|
|
145
|
+
return acc + (Array.isArray(items) ? items.length : 0);
|
|
146
|
+
}, 0);
|
|
147
|
+
}, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
|
|
138
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 },
|
|
139
149
|
react_1.default.createElement(react_2.Flex, { align: "start" },
|
|
140
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 } },
|
|
141
|
-
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 : [], onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.
|
|
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 })),
|
|
142
152
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
143
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]) },
|
|
144
154
|
filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
145
|
-
react_1.default.createElement(
|
|
155
|
+
react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
|
|
156
|
+
react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.primary) === null || _l === void 0 ? void 0 : _l[500] : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
|
|
157
|
+
sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
|
|
158
|
+
var _a;
|
|
159
|
+
e.stopPropagation();
|
|
160
|
+
if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
|
|
161
|
+
filterSidebar.onClearAllHandler();
|
|
162
|
+
}
|
|
163
|
+
else {
|
|
164
|
+
(_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
|
|
165
|
+
}
|
|
166
|
+
}, _hover: { bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.red) === null || _s === void 0 ? void 0 : _s[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
|
|
167
|
+
react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
|
|
146
168
|
react_1.default.createElement(Divider_1.default, null))),
|
|
147
169
|
react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
|
|
148
170
|
isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -157,7 +179,7 @@ function Table(_a) {
|
|
|
157
179
|
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 }))),
|
|
158
180
|
(isPagination || isServerPagination) && isCompactHeader && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
|
|
159
181
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
160
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (
|
|
182
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.text) === null || _u === void 0 ? void 0 : _u[500] }) })),
|
|
161
183
|
react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
|
|
162
184
|
react_1.default.createElement(react_2.PopoverBody, { p: 0 },
|
|
163
185
|
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 }))))))),
|
|
@@ -195,12 +217,12 @@ function Table(_a) {
|
|
|
195
217
|
},
|
|
196
218
|
} },
|
|
197
219
|
react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
|
|
198
|
-
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (
|
|
220
|
+
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
|
|
199
221
|
? true
|
|
200
222
|
: selection.length === 0
|
|
201
223
|
? false
|
|
202
224
|
: "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
|
|
203
225
|
react_1.default.createElement(react_3.Tbody, null,
|
|
204
|
-
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 : (
|
|
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 }))))))));
|
|
205
227
|
}
|
|
206
228
|
exports.default = Table;
|