sccoreui 6.4.39 → 6.4.41
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.
|
@@ -16,7 +16,7 @@ const ListBoxDropdown = (props) => {
|
|
|
16
16
|
// onSelectAll,
|
|
17
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,
|
|
18
18
|
// buttonClassName,
|
|
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;
|
|
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;
|
|
20
20
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
21
21
|
// const [inpValue, setInpValue] = useState<any>();
|
|
22
22
|
// const [checked, setChecked] = useState<boolean>(false);
|
|
@@ -30,22 +30,41 @@ const ListBoxDropdown = (props) => {
|
|
|
30
30
|
onChange(e);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
const handleScroll = (e) => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
};
|
|
33
|
+
// const handleScroll = (e: any) => {
|
|
34
|
+
// if (optionsMenuRef?.current) optionsMenuRef.current.hide(e);
|
|
35
|
+
// };
|
|
37
36
|
(0, react_1.useEffect)(() => {
|
|
38
37
|
if (!virtualScroll) {
|
|
39
38
|
setSelectedItems(values);
|
|
40
39
|
}
|
|
41
40
|
}, [values]);
|
|
41
|
+
// useEffect(() => {
|
|
42
|
+
// if (scrollElementId) {
|
|
43
|
+
// let elm = document.getElementById(`${scrollElementId}`);
|
|
44
|
+
// if (elm) elm.addEventListener("scroll", handleScroll);
|
|
45
|
+
// }
|
|
46
|
+
// }, []);
|
|
42
47
|
(0, react_1.useEffect)(() => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
const scrollContainer = scrollElementId
|
|
49
|
+
? document.getElementById(scrollElementId)
|
|
50
|
+
: null;
|
|
51
|
+
const handleScroll = (e) => {
|
|
52
|
+
var _a;
|
|
53
|
+
const target = e.target;
|
|
54
|
+
// Check if the scroll came from inside the dropdown menu (list box)
|
|
55
|
+
const isInternalListboxScroll = target.closest(".p-listbox-list-wrapper");
|
|
56
|
+
// Only hide if it's not a scroll from the dropdown list itself
|
|
57
|
+
if (!isInternalListboxScroll && ((_a = optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current) === null || _a === void 0 ? void 0 : _a.hide)) {
|
|
58
|
+
optionsMenuRef.current.hide(e);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener("scroll", handleScroll);
|
|
62
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
63
|
+
return () => {
|
|
64
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener("scroll", handleScroll);
|
|
65
|
+
window.removeEventListener("scroll", handleScroll, true);
|
|
66
|
+
};
|
|
67
|
+
}, [scrollElementId, optionsMenuRef]);
|
|
49
68
|
const handleDragStart = (e, index) => {
|
|
50
69
|
e.dataTransfer.setData("text/plain", index);
|
|
51
70
|
};
|
|
@@ -109,38 +128,37 @@ const ListBoxDropdown = (props) => {
|
|
|
109
128
|
template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
|
|
110
129
|
? listBoxParentClassName +
|
|
111
130
|
" 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
|
-
|
|
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
|
-
: "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
131
|
+
: "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), virtualScroll ? ((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 })) : ((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
|
|
132
|
+
? listClassName
|
|
133
|
+
: " 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
|
|
134
|
+
? listItems.length === selectedItems.length
|
|
135
|
+
? []
|
|
136
|
+
: listItems
|
|
137
|
+
: listItems, optionLabel: optionLabel, className: `${listBoxclassName
|
|
138
|
+
? listBoxclassName
|
|
139
|
+
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ",
|
|
140
|
+
// filterTemplate={() => (
|
|
141
|
+
// <div className="p-input-icon-right w-full">
|
|
142
|
+
// {
|
|
143
|
+
// inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
|
|
144
|
+
// <SvgComponent icon="x-close" size={18} />
|
|
145
|
+
// </span>
|
|
146
|
+
// }
|
|
147
|
+
// <InputText
|
|
148
|
+
// id="email"
|
|
149
|
+
// value={inpValue}
|
|
150
|
+
// onChange={(e) => {
|
|
151
|
+
// setInpValue(e.target.value);
|
|
152
|
+
// }}
|
|
153
|
+
// disabled={false}
|
|
154
|
+
// placeholder="Search"
|
|
155
|
+
// className="font-normal text-gray-500 hover:text-gray-900 w-full"
|
|
156
|
+
// />
|
|
157
|
+
// </div>
|
|
158
|
+
// )}
|
|
159
|
+
emptyFilterMessage: emptyFilterMessage
|
|
160
|
+
? emptyFilterMessage
|
|
161
|
+
: "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" })), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
144
162
|
},
|
|
145
163
|
] }), !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
164
|
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
@@ -11148,5 +11148,20 @@ exports.iconList = [
|
|
|
11148
11148
|
</svg>
|
|
11149
11149
|
`,
|
|
11150
11150
|
},
|
|
11151
|
+
{
|
|
11152
|
+
name: "move-down-streamline",
|
|
11153
|
+
svg: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
11154
|
+
<g id="Move-Down--Streamline-Ultimate 1" clip-path="url(#clip0_264_111926)">
|
|
11155
|
+
<path id="Vector" d="M8 13.4159V8.44922" stroke="#667085" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11156
|
+
<path id="Vector_2" d="M5.75 12.5L8 14.75L10.25 12.5" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11157
|
+
<path id="Vector_3" d="M1.25 1.25H14.75V5.75H1.25V1.25Z" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11158
|
+
</g>
|
|
11159
|
+
<defs>
|
|
11160
|
+
<clipPath id="clip0_264_111926">
|
|
11161
|
+
<rect width="16" height="16" fill="white"/>
|
|
11162
|
+
</clipPath>
|
|
11163
|
+
</defs>
|
|
11164
|
+
</svg>`,
|
|
11165
|
+
},
|
|
11151
11166
|
];
|
|
11152
11167
|
// console.log(iconList.length)
|