sccoreui 6.4.35 → 6.4.37
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.
|
@@ -14,11 +14,9 @@ const ListBoxDropdown = (props) => {
|
|
|
14
14
|
const boxRef = (0, react_1.useRef)();
|
|
15
15
|
const { selectAll,
|
|
16
16
|
// onSelectAll,
|
|
17
|
-
onSelectionChange, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link,
|
|
18
|
-
// className,
|
|
19
|
-
scrollElementId, optionsMenuRef = boxRef,
|
|
17
|
+
onSelectionChange, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef,
|
|
20
18
|
// buttonClassName,
|
|
21
|
-
showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, virtualScrollerOptions, virtualScroll, fetchData
|
|
19
|
+
showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, virtualScrollerOptions, virtualScroll, fetchData } = props;
|
|
22
20
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
23
21
|
// const [inpValue, setInpValue] = useState<any>();
|
|
24
22
|
// const [checked, setChecked] = useState<boolean>(false);
|
|
@@ -104,55 +102,58 @@ const ListBoxDropdown = (props) => {
|
|
|
104
102
|
window.removeEventListener("scroll", handleScroll);
|
|
105
103
|
};
|
|
106
104
|
}, [buttonPosition]);
|
|
107
|
-
return ((0, jsx_runtime_1.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
:
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
105
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className}` }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
|
|
106
|
+
// onMouseLeave={onMouseLeaveMenu}
|
|
107
|
+
id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
|
|
108
|
+
{
|
|
109
|
+
template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
|
|
110
|
+
? listBoxParentClassName +
|
|
111
|
+
" list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
|
|
112
|
+
: "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), virtualScroll ?
|
|
113
|
+
(0, jsx_runtime_1.jsx)(virtualization_component_1.default, { emptyFilterMessage: emptyFilterMessage, listBoxclassName: listBoxclassName, emptyMessage: emptyMessage, multiple: multiple, onSelectionChange: onSelectionChange, listClassName: listClassName, filterPlaceholder: filterPlaceholder, optionTemplate: optionTemplate, optionLabel: optionLabel, values: values, fetchData: fetchData })
|
|
114
|
+
:
|
|
115
|
+
(0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), onFilterValueChange: onFilterValueChange, virtualScrollerOptions: virtualScrollerOptions, options: selectedOptionNone
|
|
116
|
+
? listItems.length === selectedItems.length
|
|
117
|
+
? []
|
|
118
|
+
: listItems
|
|
119
|
+
: listItems, optionLabel: optionLabel, className: `${listBoxclassName
|
|
120
|
+
? listBoxclassName
|
|
121
|
+
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ",
|
|
122
|
+
// filterTemplate={() => (
|
|
123
|
+
// <div className="p-input-icon-right w-full">
|
|
124
|
+
// {
|
|
125
|
+
// inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
|
|
126
|
+
// <SvgComponent icon="x-close" size={18} />
|
|
127
|
+
// </span>
|
|
128
|
+
// }
|
|
129
|
+
// <InputText
|
|
130
|
+
// id="email"
|
|
131
|
+
// value={inpValue}
|
|
132
|
+
// onChange={(e) => {
|
|
133
|
+
// setInpValue(e.target.value);
|
|
134
|
+
// }}
|
|
135
|
+
// disabled={false}
|
|
136
|
+
// placeholder="Search"
|
|
137
|
+
// className="font-normal text-gray-500 hover:text-gray-900 w-full"
|
|
138
|
+
// />
|
|
139
|
+
// </div>
|
|
140
|
+
// )}
|
|
141
|
+
emptyFilterMessage: emptyFilterMessage
|
|
142
|
+
? emptyFilterMessage
|
|
143
|
+
: "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
144
|
+
},
|
|
145
|
+
] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "data_label", title: dataLabel })) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
|
|
146
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
147
|
+
var _a, _b, _c, _d;
|
|
148
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-truncate max-w-10rem inline-block", title: typeof item === "object"
|
|
149
|
+
? item[`${optionLabel}`]
|
|
150
|
+
: (_a = listItems === null || listItems === void 0 ? void 0 : listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`] }, { children: typeof item === "object"
|
|
151
|
+
? item[`${optionLabel}`]
|
|
152
|
+
: (_b = listItems === null || listItems === void 0 ? void 0 : listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`] })), showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-truncate max-w-10rem inline-block", title: typeof item === "object"
|
|
153
|
+
? item[`${optionLabel}`]
|
|
154
|
+
: (_c = listItems === null || listItems === void 0 ? void 0 : listItems.find((x) => x.value === item)) === null || _c === void 0 ? void 0 : _c[`${optionLabel}`] }, { children: typeof item === "object"
|
|
155
|
+
? item[`${optionLabel}`]
|
|
156
|
+
: (_d = listItems === null || listItems === void 0 ? void 0 : listItems.find((x) => x.value === item)) === null || _d === void 0 ? void 0 : _d[`${optionLabel}`] })), showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) }));
|
|
157
|
+
})) }))] })))] })) }));
|
|
157
158
|
};
|
|
158
159
|
exports.default = ListBoxDropdown;
|