@megha-ui/react 1.2.242 → 1.2.244
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.
|
@@ -7,6 +7,7 @@ type DropdownOption = {
|
|
|
7
7
|
onDelete?: () => void;
|
|
8
8
|
style?: React.CSSProperties;
|
|
9
9
|
value: number | string;
|
|
10
|
+
group?: string;
|
|
10
11
|
};
|
|
11
12
|
type IconDropdownProps = {
|
|
12
13
|
asteriskColor?: string;
|
|
@@ -51,6 +52,7 @@ type IconDropdownProps = {
|
|
|
51
52
|
withValue?: boolean;
|
|
52
53
|
autoPosition?: boolean;
|
|
53
54
|
isSort?: boolean;
|
|
55
|
+
isGrouping?: boolean;
|
|
54
56
|
isLoading?: boolean;
|
|
55
57
|
};
|
|
56
58
|
declare const IconDropdown: React.FC<IconDropdownProps>;
|
|
@@ -5,7 +5,7 @@ import { HiChevronDown } from "react-icons/hi";
|
|
|
5
5
|
import Block from "../block";
|
|
6
6
|
import Loader from "../loader";
|
|
7
7
|
import Text from "../text";
|
|
8
|
-
const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, disabled = false, DropDownIcon, dropdownListBG, dropdownListWidth, isClear, maxDropdownHeight = "200px", menuFrom = "left", onChange, onMenuClose, options, searchBorderColor = "#2377ba", searchEnabled = true, selectedDisplay, selectedValues, style, Tooltip, withTooltip = false, withValue, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isSort = true, marginTop, marginRight, marginBottom, marginLeft, width, label, required, border, isLoading = false }) => {
|
|
8
|
+
const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, disabled = false, DropDownIcon, dropdownListBG, dropdownListWidth, isClear, maxDropdownHeight = "200px", menuFrom = "left", onChange, onMenuClose, options, searchBorderColor = "#2377ba", searchEnabled = true, selectedDisplay, selectedValues, style, Tooltip, withTooltip = false, withValue, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isSort = true, marginTop, marginRight, marginBottom, marginLeft, width, label, required, border, isLoading = false, isGrouping = false, }) => {
|
|
9
9
|
var _a, _b;
|
|
10
10
|
const { density } = useDensity();
|
|
11
11
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -16,6 +16,7 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
|
|
|
16
16
|
const searchInputRef = useRef(null);
|
|
17
17
|
const optionRefs = useRef([]);
|
|
18
18
|
const [highlightIndex, setHighlightIndex] = useState(0);
|
|
19
|
+
const [groupedOptions, setGroupedOptions] = useState([]);
|
|
19
20
|
const [clickStyle, setClickStyle] = useState({
|
|
20
21
|
left: 0,
|
|
21
22
|
top: "100%",
|
|
@@ -134,6 +135,25 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
|
|
|
134
135
|
.sort((a, b) => (a.label > b.label ? 1 : -1))
|
|
135
136
|
.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
136
137
|
: options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
138
|
+
const grouped = [];
|
|
139
|
+
if (isGrouping) {
|
|
140
|
+
const groups = [...new Set(options.map((opt) => opt.group))];
|
|
141
|
+
if (groups.length > 0) {
|
|
142
|
+
groups.forEach((group) => {
|
|
143
|
+
if (group) {
|
|
144
|
+
const filteredOptions = options.filter((item) => item.group === group);
|
|
145
|
+
grouped.push({ groupedValue: group, options: filteredOptions });
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
grouped.push({
|
|
151
|
+
groupedValue: "",
|
|
152
|
+
options: [..._options],
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
setGroupedOptions(grouped);
|
|
156
|
+
}
|
|
137
157
|
setFilteredOptions(_options);
|
|
138
158
|
}, [searchTerm, options, isSort]);
|
|
139
159
|
const handleSelect = (value, isDisabled) => {
|
|
@@ -210,7 +230,7 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
|
|
|
210
230
|
return text;
|
|
211
231
|
};
|
|
212
232
|
return (_jsxs("div", { style: {
|
|
213
|
-
width:
|
|
233
|
+
width: isGrouping ? "max-content" : dropdownListWidth || "100%",
|
|
214
234
|
marginBottom,
|
|
215
235
|
marginTop,
|
|
216
236
|
marginRight,
|
|
@@ -242,7 +262,35 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
|
|
|
242
262
|
border: "1px solid",
|
|
243
263
|
borderColor: searchBorderColor,
|
|
244
264
|
borderRadius: 4,
|
|
245
|
-
} }) })), _jsx("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? (_jsxs(Block, { as: "div", className: "flex items-center justify-between", children: [_jsx(Text, { as: "span", children: "Loading options" }), _jsx(Loader, { size: 12 })] })) : (
|
|
265
|
+
} }) })), _jsx("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? (_jsxs(Block, { as: "div", className: "flex items-center justify-between", children: [_jsx(Text, { as: "span", children: "Loading options" }), _jsx(Loader, { size: 12 })] })) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [_jsx("div", { style: {
|
|
266
|
+
padding: "0.25rem 0 0.25rem 1rem",
|
|
267
|
+
backgroundColor: "#dddddd",
|
|
268
|
+
}, children: groupOption.groupedValue }), groupOption.options.map((option, index) => {
|
|
269
|
+
let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
|
|
270
|
+
prevOptions = [
|
|
271
|
+
...prevOptions.map((item) => item.options),
|
|
272
|
+
];
|
|
273
|
+
prevOptions = prevOptions.flatMap((item) => item);
|
|
274
|
+
const refIndex = gIndex > 0 ? prevOptions.length + index : index;
|
|
275
|
+
return (_jsxs("li", { ref: (el) => {
|
|
276
|
+
optionRefs.current[refIndex] = el;
|
|
277
|
+
}, id: `${refIndex}`, onClick: () => handleSelect(option.value, option.disabled || false), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (refIndex === highlightIndex
|
|
278
|
+
? listItemHoverStyle
|
|
279
|
+
: {})), (option.disabled ? listItemDisabledStyle : {})), (refIndex !== highlightIndex &&
|
|
280
|
+
selectedValues.includes(option.value)
|
|
281
|
+
? selectedItemStyle
|
|
282
|
+
: {})), { wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between", padding: "0.75rem 1rem 0.75rem 2.5rem" }), onMouseEnter: (e) => {
|
|
283
|
+
if (!option.disabled) {
|
|
284
|
+
setHighlightIndex(refIndex);
|
|
285
|
+
}
|
|
286
|
+
}, children: [_jsxs("div", { style: {
|
|
287
|
+
display: "flex",
|
|
288
|
+
alignItems: "start",
|
|
289
|
+
width: "100%",
|
|
290
|
+
}, children: [option.icon &&
|
|
291
|
+
option.isDelete &&
|
|
292
|
+
!option.isDelete && (_jsx("span", { style: { margin: "0 0.5rem" }, children: option.icon })), _jsx("span", { children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value)));
|
|
293
|
+
})] }, gIndex)))) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
|
|
246
294
|
optionRefs.current[index] = el;
|
|
247
295
|
}, onClick: () => handleSelect(option.value, option.disabled || false), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (index === highlightIndex ? listItemHoverStyle : {})), (option.disabled ? listItemDisabledStyle : {})), (index !== highlightIndex &&
|
|
248
296
|
selectedValues.includes(option.value)
|
package/package.json
CHANGED