pixelize-design-library 2.2.125 → 2.2.127
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/Common/FormLabel.d.ts +1 -1
- package/dist/Components/Common/FormLabel.js +3 -3
- package/dist/Components/RadioButton/RadioButton.js +5 -4
- package/dist/Components/Table/LeftFilterPane.d.ts +2 -1
- package/dist/Components/Table/LeftFilterPane.js +130 -203
- package/dist/Components/Table/Table.js +27 -19
- package/dist/Components/Table/TableProps.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const TextLabel: ({ label,
|
|
2
|
+
export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, }: {
|
|
3
3
|
label: string;
|
|
4
4
|
id?: string | undefined;
|
|
5
5
|
isInformation?: boolean | undefined;
|
|
@@ -9,7 +9,7 @@ var react_2 = require("@chakra-ui/react");
|
|
|
9
9
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
10
10
|
var lucide_react_1 = require("lucide-react");
|
|
11
11
|
var TextLabel = function (_a) {
|
|
12
|
-
var label = _a.label,
|
|
12
|
+
var label = _a.label, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines;
|
|
13
13
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
14
14
|
var clampStyles = clampLines ? {
|
|
15
15
|
display: "-webkit-box",
|
|
@@ -19,8 +19,8 @@ var TextLabel = function (_a) {
|
|
|
19
19
|
textOverflow: "ellipsis",
|
|
20
20
|
whiteSpace: "normal",
|
|
21
21
|
} : {};
|
|
22
|
-
return (react_1.default.createElement(react_2.Box,
|
|
23
|
-
react_1.default.createElement(react_2.
|
|
22
|
+
return (react_1.default.createElement(react_2.Box, { as: "span" },
|
|
23
|
+
react_1.default.createElement(react_2.Box, { as: "span", color: theme.colors.gray[600], fontWeight: 400, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.875rem" },
|
|
24
24
|
react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
|
|
25
25
|
showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
26
26
|
react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
|
|
@@ -11,7 +11,10 @@ var FormLabel_1 = require("../Common/FormLabel");
|
|
|
11
11
|
var RadioButton = function (_a) {
|
|
12
12
|
var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, _b = _a.labelFontSize, labelFontSize = _b === void 0 ? "0.75rem" : _b, _c = _a.labelClampLines, labelClampLines = _c === void 0 ? 2 : _c, _d = _a.showLabelTooltip, showLabelTooltip = _d === void 0 ? (label || "").length > 18 : _d, _e = _a.labelTooltip, labelTooltip = _e === void 0 ? label : _e;
|
|
13
13
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
14
|
-
return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked,
|
|
14
|
+
return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
|
|
15
|
+
borderColor: theme.colors.primary[500],
|
|
16
|
+
backgroundColor: theme.colors.background[100],
|
|
17
|
+
}, sx: {
|
|
15
18
|
"&[data-checked]": {
|
|
16
19
|
backgroundColor: theme.colors.primary[500],
|
|
17
20
|
borderColor: theme.colors.primary[500]
|
|
@@ -21,8 +24,6 @@ var RadioButton = function (_a) {
|
|
|
21
24
|
borderColor: theme.colors.primary[500],
|
|
22
25
|
boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
|
|
23
26
|
},
|
|
24
|
-
// alignItems: "flex-start",
|
|
25
|
-
mt: "2px",
|
|
26
27
|
} },
|
|
27
28
|
react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
|
|
28
29
|
};
|
|
@@ -30,6 +31,6 @@ exports.RadioButton = RadioButton;
|
|
|
30
31
|
var RadioButtonGroup = function (_a) {
|
|
31
32
|
var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme, spacing = _a.spacing, _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "" : _c, labelFontSize = _a.labelFontSize, labelClampLines = _a.labelClampLines, showLabelTooltip = _a.showLabelTooltip;
|
|
32
33
|
return (react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
|
|
33
|
-
react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
|
|
34
|
+
react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem" }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
|
|
34
35
|
};
|
|
35
36
|
exports.RadioButtonGroup = RadioButtonGroup;
|
|
@@ -30,6 +30,7 @@ export type LeftFilterPaneProps = {
|
|
|
30
30
|
onClear?: () => void;
|
|
31
31
|
theme: any;
|
|
32
32
|
isApplyLoading?: boolean;
|
|
33
|
+
filterMode?: "sidebar" | "modal";
|
|
33
34
|
};
|
|
34
|
-
declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
35
|
+
declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, filterMode, }: LeftFilterPaneProps) => React.JSX.Element;
|
|
35
36
|
export default LeftFilterPane;
|
|
@@ -56,25 +56,97 @@ var RadioButton_1 = require("../RadioButton/RadioButton");
|
|
|
56
56
|
var TextOperationControls_1 = require("./TextOperationControls");
|
|
57
57
|
var SelectOperationControls_1 = require("./SelectOperationControls");
|
|
58
58
|
var CompactSelect_1 = __importDefault(require("./CompactSelect"));
|
|
59
|
+
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
60
|
+
var LABEL_MAX_LENGTH = 18;
|
|
61
|
+
function formatHeaderLabel(label) {
|
|
62
|
+
var text = (label || "").trim();
|
|
63
|
+
if (text.length <= LABEL_MAX_LENGTH)
|
|
64
|
+
return text;
|
|
65
|
+
var parts = text.split(/\s+/);
|
|
66
|
+
if (parts.length < 2)
|
|
67
|
+
return text;
|
|
68
|
+
var removable = new Set(["filters", "fields", "modules", "status", "action"]);
|
|
69
|
+
if (removable.has(parts[parts.length - 1].toLowerCase())) {
|
|
70
|
+
parts = parts.slice(0, -1);
|
|
71
|
+
}
|
|
72
|
+
while (parts.join(" ").length > LABEL_MAX_LENGTH && parts.length > 2) {
|
|
73
|
+
parts = parts.slice(0, -1);
|
|
74
|
+
}
|
|
75
|
+
return "".concat(parts.join(" "), "..");
|
|
76
|
+
}
|
|
77
|
+
var SectionLabel = function (_a) {
|
|
78
|
+
var label = _a.label, _b = _a.flex, flex = _b === void 0 ? false : _b, theme = _a.theme;
|
|
79
|
+
var needsTooltip = label.length > LABEL_MAX_LENGTH;
|
|
80
|
+
var content = (react_1.default.createElement(react_2.Box, { as: "span", flex: flex ? "1" : undefined, textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, formatHeaderLabel(label)));
|
|
81
|
+
if (!needsTooltip)
|
|
82
|
+
return content;
|
|
83
|
+
return (react_1.default.createElement(react_2.Tooltip, { label: label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" }, content));
|
|
84
|
+
};
|
|
85
|
+
var ActiveItemControls = function (_a) {
|
|
86
|
+
var activeItem = _a.activeItem, sec = _a.sec, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue;
|
|
87
|
+
if (!activeItem)
|
|
88
|
+
return null;
|
|
89
|
+
if (activeItem.type === "text") {
|
|
90
|
+
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); } }));
|
|
91
|
+
}
|
|
92
|
+
if (activeItem.type === "select" || activeItem.type === "user") {
|
|
93
|
+
var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
|
|
94
|
+
var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
|
|
95
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
96
|
+
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 }),
|
|
97
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
98
|
+
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) { return setTextValue(sec.id, activeItem.id, option); } }))));
|
|
99
|
+
}
|
|
100
|
+
return null;
|
|
101
|
+
};
|
|
102
|
+
var SectionContent = function (_a) {
|
|
103
|
+
var _b;
|
|
104
|
+
var sec = _a.sec, selected = _a.selected, toggleItem = _a.toggleItem, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue, setSelected = _a.setSelected;
|
|
105
|
+
if (sec.radio) {
|
|
106
|
+
var activeItem = (_b = selected[sec.id]) === null || _b === void 0 ? void 0 : _b[0];
|
|
107
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
108
|
+
react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) || "", onChange: function (val) {
|
|
109
|
+
var item = (sec.items || []).find(function (i) { return i.id === val; });
|
|
110
|
+
setSelected(function (prev) {
|
|
111
|
+
var _a;
|
|
112
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val
|
|
113
|
+
? [{ 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: "" }]
|
|
114
|
+
: [], _a)));
|
|
115
|
+
});
|
|
116
|
+
}, options: (sec.items || []).map(function (it) { return ({ label: it.label, id: it.id }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > LABEL_MAX_LENGTH; } }),
|
|
117
|
+
activeItem && (react_1.default.createElement(ActiveItemControls, { activeItem: activeItem, sec: sec, setTextOperator: setTextOperator, setTextValue: setTextValue }))));
|
|
118
|
+
}
|
|
119
|
+
return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
120
|
+
var sectionItems = selected[sec.id] || [];
|
|
121
|
+
var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
|
|
122
|
+
var checked = !!activeItem;
|
|
123
|
+
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
124
|
+
react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > LABEL_MAX_LENGTH, 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: {
|
|
125
|
+
".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
|
|
126
|
+
".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
|
|
127
|
+
} }),
|
|
128
|
+
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); } })),
|
|
129
|
+
checked && (it.type === "select" || it.type === "user") && (react_1.default.createElement(react_2.Box, null,
|
|
130
|
+
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" }),
|
|
131
|
+
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
132
|
+
react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) { return setTextValue(sec.id, it.id, option); } }))))));
|
|
133
|
+
})));
|
|
134
|
+
};
|
|
135
|
+
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
59
136
|
var LeftFilterPane = function (_a) {
|
|
60
137
|
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, _f = _a.isApplyLoading, isApplyLoading = _f === void 0 ? false : _f;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
138
|
+
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, _g = _a.filterMode, filterMode = _g === void 0 ? "sidebar" : _g;
|
|
139
|
+
var _h = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _h[0], setIsSearching = _h[1];
|
|
140
|
+
var _j = (0, react_1.useState)({}), localSelected = _j[0], setLocalSelected = _j[1];
|
|
64
141
|
var searchRef = (0, react_1.useRef)(null);
|
|
65
142
|
(0, react_1.useEffect)(function () {
|
|
66
143
|
setLocalSelected(selectedProp || {});
|
|
67
|
-
if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
|
|
144
|
+
if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
|
|
68
145
|
setIsSearching(true);
|
|
69
|
-
}
|
|
70
146
|
}, [selectedProp]);
|
|
71
|
-
var
|
|
72
|
-
var search = selected.search || "";
|
|
147
|
+
var search = localSelected.search || "";
|
|
73
148
|
var setSelected = function (updater) {
|
|
74
|
-
setLocalSelected(function (prev) {
|
|
75
|
-
var next = typeof updater === 'function' ? updater(prev) : updater;
|
|
76
|
-
return next;
|
|
77
|
-
});
|
|
149
|
+
setLocalSelected(function (prev) { return (typeof updater === "function" ? updater(prev) : updater); });
|
|
78
150
|
};
|
|
79
151
|
var setSearch = function (val) {
|
|
80
152
|
setSelected(function (prev) { return (__assign(__assign({}, prev), { search: val })); });
|
|
@@ -82,62 +154,39 @@ var LeftFilterPane = function (_a) {
|
|
|
82
154
|
var updateItem = function (sectionId, itemId, updates) {
|
|
83
155
|
setSelected(function (prev) {
|
|
84
156
|
var _a;
|
|
85
|
-
var
|
|
86
|
-
var
|
|
87
|
-
if (
|
|
157
|
+
var items = prev[sectionId] || [];
|
|
158
|
+
var idx = items.findIndex(function (i) { return i.id === itemId; });
|
|
159
|
+
if (idx === -1)
|
|
88
160
|
return prev;
|
|
89
|
-
var
|
|
90
|
-
|
|
91
|
-
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] =
|
|
161
|
+
var updated = __spreadArray([], items, true);
|
|
162
|
+
updated[idx] = __assign(__assign({}, updated[idx]), updates);
|
|
163
|
+
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = updated, _a));
|
|
92
164
|
});
|
|
93
165
|
};
|
|
94
166
|
var setTextOperator = function (sectionId, itemId, operator) {
|
|
95
|
-
updateItem(sectionId, itemId, { condition: operator });
|
|
167
|
+
return updateItem(sectionId, itemId, { condition: operator });
|
|
96
168
|
};
|
|
97
169
|
var setTextValue = function (sectionId, itemId, value) {
|
|
98
|
-
updateItem(sectionId, itemId, { value: value });
|
|
170
|
+
return updateItem(sectionId, itemId, { value: value });
|
|
99
171
|
};
|
|
100
172
|
var toggleItem = function (sectionId, itemId, checked, type) {
|
|
101
173
|
setSelected(function (prev) {
|
|
102
174
|
var _a, _b;
|
|
103
|
-
var
|
|
175
|
+
var items = prev[sectionId] || [];
|
|
104
176
|
if (checked) {
|
|
105
|
-
if (
|
|
177
|
+
if (items.some(function (i) { return i.id === itemId; }))
|
|
106
178
|
return prev;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
else {
|
|
110
|
-
return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = sectionItems.filter(function (i) { return i.id !== itemId; }), _b));
|
|
179
|
+
var condition = type === "select" || type === "user" ? "is" : "contains";
|
|
180
|
+
return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = __spreadArray(__spreadArray([], items, true), [{ id: itemId, type: type, condition: condition, value: "" }], false), _a));
|
|
111
181
|
}
|
|
182
|
+
return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = items.filter(function (i) { return i.id !== itemId; }), _b));
|
|
112
183
|
});
|
|
113
184
|
};
|
|
114
|
-
var formatHeaderLabel = function (label) {
|
|
115
|
-
var text = (label || "").trim();
|
|
116
|
-
var MAX = 18;
|
|
117
|
-
if (text.length <= MAX)
|
|
118
|
-
return text;
|
|
119
|
-
var removable = new Set(["filters", "fields", "modules", "status", "action"]);
|
|
120
|
-
var parts = text.split(/\s+/);
|
|
121
|
-
if (parts.length < 2)
|
|
122
|
-
return text;
|
|
123
|
-
var last = parts[parts.length - 1].toLowerCase();
|
|
124
|
-
if (removable.has(last)) {
|
|
125
|
-
parts = parts.slice(0, -1);
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
parts = parts.slice(0, -1);
|
|
129
|
-
}
|
|
130
|
-
while (parts.join(" ").length > MAX && parts.length > 2) {
|
|
131
|
-
parts = parts.slice(0, -1);
|
|
132
|
-
}
|
|
133
|
-
return "".concat(parts.join(" "), "..");
|
|
134
|
-
};
|
|
135
185
|
(0, react_3.useOutsideClick)({
|
|
136
186
|
ref: searchRef,
|
|
137
187
|
handler: function () {
|
|
138
|
-
if (isSearching && !search.trim())
|
|
188
|
+
if (isSearching && !search.trim())
|
|
139
189
|
setIsSearching(false);
|
|
140
|
-
}
|
|
141
190
|
},
|
|
142
191
|
});
|
|
143
192
|
var filteredSections = (0, react_1.useMemo)(function () {
|
|
@@ -151,174 +200,52 @@ var LeftFilterPane = function (_a) {
|
|
|
151
200
|
var hasActiveFilters = (0, react_1.useMemo)(function () {
|
|
152
201
|
return Object.entries(localSelected).some(function (_a) {
|
|
153
202
|
var key = _a[0], value = _a[1];
|
|
154
|
-
if (key === "search")
|
|
155
|
-
return !!(value && typeof value === "string" && value.trim()
|
|
156
|
-
}
|
|
203
|
+
if (key === "search")
|
|
204
|
+
return !!(value && typeof value === "string" && value.trim());
|
|
157
205
|
return Array.isArray(value) && value.length > 0;
|
|
158
206
|
});
|
|
159
207
|
}, [localSelected]);
|
|
160
|
-
var handleApply = function () {
|
|
161
|
-
onApply === null || onApply === void 0 ? void 0 : onApply(selected);
|
|
162
|
-
};
|
|
208
|
+
var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(localSelected); };
|
|
163
209
|
var handleClear = function () {
|
|
164
|
-
var
|
|
165
|
-
setLocalSelected(
|
|
210
|
+
var cleared = { search: "" };
|
|
211
|
+
setLocalSelected(cleared);
|
|
166
212
|
onClear === null || onClear === void 0 ? void 0 : onClear();
|
|
167
|
-
|
|
213
|
+
if (filterMode === "sidebar")
|
|
214
|
+
onApply === null || onApply === void 0 ? void 0 : onApply(cleared);
|
|
215
|
+
};
|
|
216
|
+
var sectionContentProps = { selected: localSelected, toggleItem: toggleItem, setTextOperator: setTextOperator, setTextValue: setTextValue, setSelected: setSelected };
|
|
217
|
+
var renderSections = function () {
|
|
218
|
+
if (filteredSections.length === 0) {
|
|
219
|
+
return (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
|
|
220
|
+
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")));
|
|
221
|
+
}
|
|
222
|
+
if (filteredSections.length > 1) {
|
|
223
|
+
return (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map(function (s, i) { return (s.initiallyExpanded ? i : -1); }).filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) { return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
|
|
224
|
+
react_1.default.createElement("h2", null,
|
|
225
|
+
react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
|
|
226
|
+
react_1.default.createElement(SectionLabel, { label: sec.label, flex: true, theme: theme }),
|
|
227
|
+
react_1.default.createElement(react_2.AccordionIcon, null))),
|
|
228
|
+
react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 },
|
|
229
|
+
react_1.default.createElement(SectionContent, __assign({ sec: sec }, sectionContentProps))))); })));
|
|
230
|
+
}
|
|
231
|
+
return filteredSections.map(function (sec) { return (react_1.default.createElement(react_2.Box, { key: sec.id },
|
|
232
|
+
react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" },
|
|
233
|
+
react_1.default.createElement(SectionLabel, { label: sec.label, theme: theme })),
|
|
234
|
+
react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 },
|
|
235
|
+
react_1.default.createElement(SectionContent, __assign({ sec: sec }, sectionContentProps))))); });
|
|
168
236
|
};
|
|
169
|
-
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" },
|
|
237
|
+
return (react_1.default.createElement(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0 },
|
|
170
238
|
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" },
|
|
171
239
|
react_1.default.createElement(react_2.Text, { fontWeight: "semibold", fontSize: "sm" }, title),
|
|
172
|
-
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); } }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
|
|
240
|
+
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); }, mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
|
|
173
241
|
react_1.default.createElement(react_2.InputGroup, { size: "sm" },
|
|
174
242
|
react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
|
|
175
243
|
react_1.default.createElement(lucide_react_1.Search, { size: 16, color: "#555a64" })),
|
|
176
244
|
react_1.default.createElement(react_2.Input, { placeholder: "Search", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true }),
|
|
177
245
|
search.length > 0 && (react_1.default.createElement(react_2.InputRightElement, null,
|
|
178
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
} }))))))),
|
|
182
|
-
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
|
|
183
|
-
.map(function (s, i) { return (s.initiallyExpanded ? i : -1); })
|
|
184
|
-
.filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
|
|
185
|
-
var _a;
|
|
186
|
-
return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
|
|
187
|
-
react_1.default.createElement("h2", null,
|
|
188
|
-
react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
|
|
189
|
-
(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" },
|
|
190
|
-
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
191
|
-
whiteSpace: "nowrap",
|
|
192
|
-
overflow: "hidden",
|
|
193
|
-
textOverflow: "ellipsis",
|
|
194
|
-
} }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
195
|
-
whiteSpace: "nowrap",
|
|
196
|
-
overflow: "hidden",
|
|
197
|
-
textOverflow: "ellipsis",
|
|
198
|
-
} }, formatHeaderLabel(sec.label))),
|
|
199
|
-
react_1.default.createElement(react_2.AccordionIcon, null))),
|
|
200
|
-
react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
201
|
-
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) {
|
|
202
|
-
var item = (sec.items || []).find(function (i) { return i.id === val; });
|
|
203
|
-
setSelected(function (prev) {
|
|
204
|
-
var _a;
|
|
205
|
-
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)));
|
|
206
|
-
});
|
|
207
|
-
}, options: (sec.items || []).map(function (it) { return ({
|
|
208
|
-
label: it.label,
|
|
209
|
-
id: it.id,
|
|
210
|
-
}); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
|
|
211
|
-
(function () {
|
|
212
|
-
var _a;
|
|
213
|
-
var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
|
|
214
|
-
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
|
|
215
|
-
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); } }));
|
|
216
|
-
}
|
|
217
|
-
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
|
|
218
|
-
var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
|
|
219
|
-
var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
|
|
220
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
221
|
-
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 }),
|
|
222
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
223
|
-
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) {
|
|
224
|
-
setTextValue(sec.id, activeItem.id, option);
|
|
225
|
-
} }))));
|
|
226
|
-
}
|
|
227
|
-
return null;
|
|
228
|
-
})())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
229
|
-
var sectionItems = selected[sec.id] || [];
|
|
230
|
-
var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
|
|
231
|
-
var checked = !!activeItem;
|
|
232
|
-
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
233
|
-
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: {
|
|
234
|
-
'.chakra-checkbox__control': {
|
|
235
|
-
width: '12px',
|
|
236
|
-
height: '12px',
|
|
237
|
-
mt: '2px',
|
|
238
|
-
},
|
|
239
|
-
'.chakra-checkbox__label': {
|
|
240
|
-
lineHeight: '1rem',
|
|
241
|
-
whiteSpace: 'normal',
|
|
242
|
-
wordBreak: 'break-word',
|
|
243
|
-
},
|
|
244
|
-
} }),
|
|
245
|
-
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); } })),
|
|
246
|
-
(it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
247
|
-
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 }),
|
|
248
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
249
|
-
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) {
|
|
250
|
-
setTextValue(sec.id, it.id, option);
|
|
251
|
-
} }))))));
|
|
252
|
-
}))))));
|
|
253
|
-
}))) : (filteredSections.map(function (sec) {
|
|
254
|
-
var _a;
|
|
255
|
-
return (react_1.default.createElement(react_2.Box, { key: sec.id },
|
|
256
|
-
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" },
|
|
257
|
-
react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
258
|
-
whiteSpace: "nowrap",
|
|
259
|
-
overflow: "hidden",
|
|
260
|
-
textOverflow: "ellipsis",
|
|
261
|
-
} }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
|
|
262
|
-
whiteSpace: "nowrap",
|
|
263
|
-
overflow: "hidden",
|
|
264
|
-
textOverflow: "ellipsis",
|
|
265
|
-
} }, formatHeaderLabel(sec.label)))),
|
|
266
|
-
react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
267
|
-
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) {
|
|
268
|
-
var item = (sec.items || []).find(function (i) { return i.id === val; });
|
|
269
|
-
setSelected(function (prev) {
|
|
270
|
-
var _a;
|
|
271
|
-
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)));
|
|
272
|
-
});
|
|
273
|
-
}, options: (sec.items || []).map(function (it) { return ({
|
|
274
|
-
label: it.label,
|
|
275
|
-
id: it.id,
|
|
276
|
-
}); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
|
|
277
|
-
(function () {
|
|
278
|
-
var _a;
|
|
279
|
-
var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
|
|
280
|
-
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
|
|
281
|
-
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); } }));
|
|
282
|
-
}
|
|
283
|
-
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
|
|
284
|
-
var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
|
|
285
|
-
var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
|
|
286
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
287
|
-
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 }),
|
|
288
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
289
|
-
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) {
|
|
290
|
-
setTextValue(sec.id, activeItem.id, option);
|
|
291
|
-
} }))));
|
|
292
|
-
}
|
|
293
|
-
return null;
|
|
294
|
-
})())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
|
|
295
|
-
var sectionItems = selected[sec.id] || [];
|
|
296
|
-
var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
|
|
297
|
-
var checked = !!activeItem;
|
|
298
|
-
return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
|
|
299
|
-
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: {
|
|
300
|
-
'.chakra-checkbox__control': {
|
|
301
|
-
width: '12px',
|
|
302
|
-
height: '12px',
|
|
303
|
-
mt: '2px',
|
|
304
|
-
},
|
|
305
|
-
'.chakra-checkbox__label': {
|
|
306
|
-
lineHeight: '1rem',
|
|
307
|
-
whiteSpace: 'normal',
|
|
308
|
-
wordBreak: 'break-word',
|
|
309
|
-
},
|
|
310
|
-
} }),
|
|
311
|
-
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); } })),
|
|
312
|
-
(it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
313
|
-
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 }),
|
|
314
|
-
react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
|
|
315
|
-
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) {
|
|
316
|
-
setTextValue(sec.id, it.id, option);
|
|
317
|
-
} }))))));
|
|
318
|
-
}))))));
|
|
319
|
-
}))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
|
|
320
|
-
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")))),
|
|
321
|
-
hasActiveFilters && (react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
|
|
246
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () { setSearch(""); setIsSearching(false); } }))))))),
|
|
247
|
+
react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" }, renderSections()),
|
|
248
|
+
hasActiveFilters && (react_1.default.createElement(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: "gray.200", spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: "white" },
|
|
322
249
|
react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
|
|
323
250
|
react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading }, "Apply")))));
|
|
324
251
|
};
|
|
@@ -46,30 +46,32 @@ 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, _s, _t, _u, _v, _w, _x;
|
|
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, _y, _z;
|
|
50
|
+
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _0 = _a.isCheckbox, isCheckbox = _0 === void 0 ? false : _0, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _1 = _a.noBorders, noBorders = _1 === void 0 ? false : _1, _2 = _a.isPagination, isPagination = _2 === void 0 ? true : _2, onRowClick = _a.onRowClick, selections = _a.selections, _3 = _a.isActionFreeze, isActionFreeze = _3 === void 0 ? true : _3, _4 = _a.preferences, preferences = _4 === void 0 ? {
|
|
51
51
|
url: "",
|
|
52
52
|
token: "",
|
|
53
53
|
key: "",
|
|
54
54
|
name: "",
|
|
55
55
|
page: "",
|
|
56
56
|
orgId: "",
|
|
57
|
-
} :
|
|
57
|
+
} : _4, _5 = _a.paginationMode, paginationMode = _5 === void 0 ? "client" : _5, _6 = _a.noOfRowsPerPage, noOfRowsPerPage = _6 === void 0 ? 50 : _6, _7 = _a.totalRecords, totalRecords = _7 === void 0 ? 0 : _7, onPagination = _a.onPagination, _8 = _a.isTableSettings, isTableSettings = _8 === void 0 ? false : _8, 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)();
|
|
61
|
-
var
|
|
61
|
+
var _9 = (0, react_1.useState)({}), columnsSearch = _9[0], setColumnsSearch = _9[1];
|
|
62
62
|
var tableContainerRef = (0, react_1.useRef)(null);
|
|
63
|
-
var
|
|
63
|
+
var _10 = (0, react_2.useDisclosure)(), isFilterModalOpen = _10.isOpen, onFilterModalOpen = _10.onOpen, onFilterModalClose = _10.onClose;
|
|
64
|
+
var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
|
|
65
|
+
var _11 = (0, react_1.useState)(500), viewportAvailableH = _11[0], setViewportAvailableH = _11[1];
|
|
64
66
|
var isServerPagination = paginationMode === "server";
|
|
65
|
-
var
|
|
67
|
+
var _12 = (0, usePreferences_1.useGetPreferences)({
|
|
66
68
|
baseUrl: preferences.url,
|
|
67
69
|
page: preferences.page,
|
|
68
70
|
key: preferences.key,
|
|
69
71
|
name: preferences.name,
|
|
70
72
|
authToken: preferences.token,
|
|
71
73
|
orgId: preferences.orgId,
|
|
72
|
-
}), tablePreferencesData =
|
|
74
|
+
}), tablePreferencesData = _12.preferences, loading = _12.loading;
|
|
73
75
|
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
74
76
|
baseUrl: preferences.url,
|
|
75
77
|
page: preferences.page,
|
|
@@ -87,7 +89,7 @@ function Table(_a) {
|
|
|
87
89
|
}
|
|
88
90
|
return {};
|
|
89
91
|
}, [tablePreferencesData]);
|
|
90
|
-
var
|
|
92
|
+
var _13 = (0, useTable_1.default)({
|
|
91
93
|
tableBorderColor: tableBorderColor,
|
|
92
94
|
data: data,
|
|
93
95
|
isPagination: isPagination,
|
|
@@ -100,7 +102,7 @@ function Table(_a) {
|
|
|
100
102
|
totalRecords: totalRecords,
|
|
101
103
|
isServerPagination: isServerPagination,
|
|
102
104
|
onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
|
|
103
|
-
}), tableData =
|
|
105
|
+
}), tableData = _13.tableData, isContent = _13.isContent, isLink = _13.isLink, headerRefs = _13.headerRefs, columnWidths = _13.columnWidths, handleSort = _13.handleSort, handleCheckbox = _13.handleCheckbox, filteredData = _13.filteredData, startRow = _13.startRow, endRow = _13.endRow, selection = _13.selection, columnsSort = _13.columnsSort, currentPage = _13.currentPage, pages = _13.pages, rowsPerPage = _13.rowsPerPage, handlePageSizeChange = _13.handlePageSizeChange, setCurrentPage = _13.setCurrentPage, columnsList = _13.columnsList, handleColumnPreferences = _13.handleColumnPreferences;
|
|
104
106
|
var _filteredData = (0, react_1.useMemo)(function () {
|
|
105
107
|
return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
|
|
106
108
|
}, [columnsSearch, filteredData]);
|
|
@@ -153,16 +155,22 @@ function Table(_a) {
|
|
|
153
155
|
return acc + (Array.isArray(items) ? items.length : 0);
|
|
154
156
|
}, 0);
|
|
155
157
|
}, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
|
|
156
|
-
return (react_1.default.createElement(react_2.Box, { bg: (
|
|
158
|
+
return (react_1.default.createElement(react_2.Box, { bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: "0.063rem solid ".concat((_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]), borderRadius: 3 },
|
|
159
|
+
filterSidebar && filterMode === "modal" && (react_1.default.createElement(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside" },
|
|
160
|
+
react_1.default.createElement(react_2.ModalOverlay, null),
|
|
161
|
+
react_1.default.createElement(react_2.ModalContent, { my: 0, top: "10%", position: "fixed", left: "auto", right: "auto" },
|
|
162
|
+
react_1.default.createElement(react_2.ModalCloseButton, { size: "sm" }),
|
|
163
|
+
react_1.default.createElement(react_2.ModalBody, { p: 0 },
|
|
164
|
+
react_1.default.createElement(LeftFilterPane_1.default, { 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: function (sel) { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: function () { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))))),
|
|
157
165
|
react_1.default.createElement(react_2.Flex, { align: "start" },
|
|
158
|
-
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: (
|
|
159
|
-
react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (
|
|
166
|
+
filterMode === "sidebar" && (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: (_g = theme.colors.border) === null || _g === void 0 ? void 0 : _g[500], style: { height: controlsHeight + tableMaxH } },
|
|
167
|
+
react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], 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, filterMode: filterMode }))),
|
|
160
168
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
161
|
-
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: (
|
|
169
|
+
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: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: "0.063rem solid ".concat((_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]) },
|
|
162
170
|
filterSidebar && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
163
171
|
react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
|
|
164
|
-
react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (
|
|
165
|
-
sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (
|
|
172
|
+
react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.primary) === null || _o === void 0 ? void 0 : _o[500] : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
|
|
173
|
+
sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
|
|
166
174
|
var _a;
|
|
167
175
|
e.stopPropagation();
|
|
168
176
|
if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
|
|
@@ -171,7 +179,7 @@ function Table(_a) {
|
|
|
171
179
|
else {
|
|
172
180
|
(_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
|
|
173
181
|
}
|
|
174
|
-
}, _hover: { bg: (
|
|
182
|
+
}, _hover: { bg: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.red) === null || _u === void 0 ? void 0 : _u[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
|
|
175
183
|
react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
|
|
176
184
|
react_1.default.createElement(Divider_1.default, null))),
|
|
177
185
|
tableData.length > 0 && react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
|
|
@@ -187,7 +195,7 @@ function Table(_a) {
|
|
|
187
195
|
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 }))),
|
|
188
196
|
(isPagination || isServerPagination) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
|
|
189
197
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
190
|
-
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: (
|
|
198
|
+
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: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.text) === null || _w === void 0 ? void 0 : _w[500] }) })),
|
|
191
199
|
react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
|
|
192
200
|
react_1.default.createElement(react_2.PopoverBody, { p: 0 },
|
|
193
201
|
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 }))))))),
|
|
@@ -231,12 +239,12 @@ function Table(_a) {
|
|
|
231
239
|
},
|
|
232
240
|
} },
|
|
233
241
|
react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
|
|
234
|
-
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 : (
|
|
242
|
+
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 : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
|
|
235
243
|
? true
|
|
236
244
|
: selection.length === 0
|
|
237
245
|
? false
|
|
238
246
|
: "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
|
|
239
247
|
react_1.default.createElement(react_3.Tbody, null,
|
|
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 : (
|
|
248
|
+
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 : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
|
|
241
249
|
}
|
|
242
250
|
exports.default = Table;
|