pixelize-design-library 2.2.102 → 2.2.103
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.
|
@@ -33,6 +33,7 @@ export type FilterSidebarProps = {
|
|
|
33
33
|
containerPadding?: number | string;
|
|
34
34
|
headerPadding?: number;
|
|
35
35
|
panelPadding?: number;
|
|
36
|
+
sliderMode?: "chakra" | "native";
|
|
36
37
|
};
|
|
37
38
|
declare const FilterSidebar: React.FC<FilterSidebarProps>;
|
|
38
39
|
export default FilterSidebar;
|
|
@@ -44,12 +44,12 @@ var Accordion_1 = __importDefault(require("../Accordion/Accordion"));
|
|
|
44
44
|
var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
|
|
45
45
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
46
46
|
var FilterSidebar = function (_a) {
|
|
47
|
-
var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f;
|
|
47
|
+
var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f, _g = _a.sliderMode, sliderMode = _g === void 0 ? "native" : _g;
|
|
48
48
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
49
49
|
// Determine if the component is controlled (prop provided) or uncontrolled (internal state)
|
|
50
50
|
var isControlled = selected !== undefined;
|
|
51
51
|
// Local state for uncontrolled mode
|
|
52
|
-
var
|
|
52
|
+
var _h = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _h[0], setLocalSelected = _h[1];
|
|
53
53
|
// Derived state: use prop if controlled, otherwise local state
|
|
54
54
|
var internalSelected = (selected !== undefined ? selected : localSelected);
|
|
55
55
|
// Wrapper for state updates to handle both modes
|
|
@@ -61,12 +61,12 @@ var FilterSidebar = function (_a) {
|
|
|
61
61
|
setLocalSelected(next);
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
|
-
var
|
|
64
|
+
var _j = (0, react_1.useState)(function () {
|
|
65
65
|
var initial = {};
|
|
66
66
|
sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
|
|
67
67
|
return initial;
|
|
68
|
-
}), expanded =
|
|
69
|
-
var
|
|
68
|
+
}), expanded = _j[0], setExpanded = _j[1];
|
|
69
|
+
var _k = (0, react_1.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
|
|
70
70
|
var activeCount = (0, react_1.useMemo)(function () {
|
|
71
71
|
return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
|
|
72
72
|
}, [internalSelected]);
|
|
@@ -119,33 +119,65 @@ var FilterSidebar = function (_a) {
|
|
|
119
119
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
120
120
|
var range = section.range;
|
|
121
121
|
var step = range.step || 1;
|
|
122
|
-
var
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
react_1.default.createElement(react_2.
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
122
|
+
var currentMin = (_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : range.min;
|
|
123
|
+
var currentMax = (_d = (_c = internalSelected[section.id]) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : range.max;
|
|
124
|
+
var values = range.values || Array.from({ length: Math.floor((range.max - range.min) / (step || 1)) + 1 }, function (_, i) { return range.min + i * (step || 1); });
|
|
125
|
+
// Calculate percentages
|
|
126
|
+
var minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
|
|
127
|
+
var maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
|
|
128
|
+
var primaryColor = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[300];
|
|
129
|
+
var secondaryColor = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.red) === null || _h === void 0 ? void 0 : _h[600];
|
|
130
|
+
return (react_1.default.createElement(react_2.Box, { w: "full", px: 3 },
|
|
131
|
+
react_1.default.createElement("style", null, "\n .custom-range-slider::-webkit-slider-thumb {\n pointer-events: auto;\n width: 24px;\n height: 24px;\n -webkit-appearance: none;\n cursor: pointer;\n }\n .custom-range-slider::-moz-range-thumb {\n pointer-events: auto;\n width: 24px;\n height: 24px;\n border: none;\n cursor: pointer;\n }\n "),
|
|
132
|
+
react_1.default.createElement(react_2.Box, { w: "full", position: "relative", h: "30px", display: "flex", alignItems: "center" },
|
|
133
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }),
|
|
134
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), width: "".concat(maxPercent - minPercent, "%"), height: "6px", style: { background: "linear-gradient(to right, ".concat(primaryColor, ", ").concat(secondaryColor, ")") }, borderRadius: "full", boxShadow: "0 0 8px rgba(66, 153, 225, 0.4)" }),
|
|
135
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: "20px", h: "20px", borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
|
|
136
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: "20px", h: "20px", borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
|
|
137
|
+
react_1.default.createElement("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: function (e) {
|
|
138
|
+
var min = Math.min(Number(e.target.value), currentMax - (step || 1));
|
|
139
|
+
var nextVal = [min, currentMax];
|
|
140
|
+
setInternalSelected(function (prev) {
|
|
141
|
+
var _a;
|
|
142
|
+
var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
|
|
143
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(next);
|
|
144
|
+
return next;
|
|
145
|
+
});
|
|
146
|
+
}, style: {
|
|
147
|
+
position: 'absolute',
|
|
148
|
+
width: '100%',
|
|
149
|
+
height: '100%',
|
|
150
|
+
opacity: 0,
|
|
151
|
+
appearance: 'none',
|
|
152
|
+
pointerEvents: 'none',
|
|
153
|
+
zIndex: 3,
|
|
154
|
+
margin: 0,
|
|
155
|
+
} }),
|
|
156
|
+
react_1.default.createElement("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: function (e) {
|
|
157
|
+
var max = Math.max(Number(e.target.value), currentMin + (step || 1));
|
|
158
|
+
var nextVal = [currentMin, max];
|
|
159
|
+
setInternalSelected(function (prev) {
|
|
160
|
+
var _a;
|
|
161
|
+
var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
|
|
162
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(next);
|
|
163
|
+
return next;
|
|
164
|
+
});
|
|
165
|
+
}, style: {
|
|
166
|
+
position: 'absolute',
|
|
167
|
+
width: '100%',
|
|
168
|
+
height: '100%',
|
|
169
|
+
opacity: 0,
|
|
170
|
+
appearance: 'none',
|
|
171
|
+
pointerEvents: 'none',
|
|
172
|
+
zIndex: 3,
|
|
173
|
+
margin: 0,
|
|
174
|
+
} })),
|
|
175
|
+
react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", pt: 3 },
|
|
176
|
+
react_1.default.createElement(react_2.Box, { borderWidth: "1px", borderRadius: "md", p: 2, minW: "100px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
|
|
144
177
|
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Min"),
|
|
145
|
-
react_1.default.createElement(react_2.Select, { "aria-label": "Minimum price",
|
|
146
|
-
var _a, _b;
|
|
178
|
+
react_1.default.createElement(react_2.Select, { "aria-label": "Minimum price", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: currentMin, onChange: function (e) {
|
|
147
179
|
var min = Number(e.target.value);
|
|
148
|
-
var max =
|
|
180
|
+
var max = currentMax;
|
|
149
181
|
var nextVal = [Math.min(min, max), Math.max(min, max)];
|
|
150
182
|
setInternalSelected(function (prev) {
|
|
151
183
|
var _a;
|
|
@@ -157,12 +189,11 @@ var FilterSidebar = function (_a) {
|
|
|
157
189
|
v,
|
|
158
190
|
range.unit ? " ".concat(range.unit) : "")); }))),
|
|
159
191
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.400" }, "-"),
|
|
160
|
-
react_1.default.createElement(react_2.Box, {
|
|
192
|
+
react_1.default.createElement(react_2.Box, { borderWidth: "1px", borderRadius: "md", p: 2, minW: "100px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
|
|
161
193
|
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Max"),
|
|
162
|
-
react_1.default.createElement(react_2.Select, { "aria-label": "Maximum price",
|
|
163
|
-
var _a, _b;
|
|
194
|
+
react_1.default.createElement(react_2.Select, { "aria-label": "Maximum price", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: currentMax, onChange: function (e) {
|
|
164
195
|
var max = Number(e.target.value);
|
|
165
|
-
var min =
|
|
196
|
+
var min = currentMin;
|
|
166
197
|
var nextVal = [Math.min(min, max), Math.max(min, max)];
|
|
167
198
|
setInternalSelected(function (prev) {
|
|
168
199
|
var _a;
|
|
@@ -250,16 +281,18 @@ var FilterSidebar = function (_a) {
|
|
|
250
281
|
},
|
|
251
282
|
panelStyle: variant === "minimal"
|
|
252
283
|
? {
|
|
253
|
-
padding: "
|
|
284
|
+
padding: "10px 0 12px 0",
|
|
285
|
+
overflow: "visible",
|
|
254
286
|
}
|
|
255
287
|
: {
|
|
256
288
|
padding: panelPadding,
|
|
257
289
|
background: theme.colors.white || "#fff",
|
|
258
290
|
borderRadius: 8,
|
|
291
|
+
overflow: "visible",
|
|
259
292
|
},
|
|
260
293
|
},
|
|
261
294
|
}); });
|
|
262
|
-
return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content" },
|
|
295
|
+
return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
|
|
263
296
|
react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
|
|
264
297
|
react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
|
|
265
298
|
activeCount > 0 && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All"))),
|