sccoreui 6.4.39 → 6.4.40
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,37 @@ 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
|
+
if ((_a = optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current) === null || _a === void 0 ? void 0 : _a.hide) {
|
|
54
|
+
optionsMenuRef.current.hide(e);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener("scroll", handleScroll);
|
|
58
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
59
|
+
return () => {
|
|
60
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener("scroll", handleScroll);
|
|
61
|
+
window.removeEventListener("scroll", handleScroll, true);
|
|
62
|
+
};
|
|
63
|
+
}, [scrollElementId, optionsMenuRef]);
|
|
49
64
|
const handleDragStart = (e, index) => {
|
|
50
65
|
e.dataTransfer.setData("text/plain", index);
|
|
51
66
|
};
|
|
@@ -109,38 +124,37 @@ const ListBoxDropdown = (props) => {
|
|
|
109
124
|
template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
|
|
110
125
|
? listBoxParentClassName +
|
|
111
126
|
" 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() })] }))),
|
|
127
|
+
: "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
|
|
128
|
+
? listClassName
|
|
129
|
+
: " 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
|
|
130
|
+
? listItems.length === selectedItems.length
|
|
131
|
+
? []
|
|
132
|
+
: listItems
|
|
133
|
+
: listItems, optionLabel: optionLabel, className: `${listBoxclassName
|
|
134
|
+
? listBoxclassName
|
|
135
|
+
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ",
|
|
136
|
+
// filterTemplate={() => (
|
|
137
|
+
// <div className="p-input-icon-right w-full">
|
|
138
|
+
// {
|
|
139
|
+
// inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
|
|
140
|
+
// <SvgComponent icon="x-close" size={18} />
|
|
141
|
+
// </span>
|
|
142
|
+
// }
|
|
143
|
+
// <InputText
|
|
144
|
+
// id="email"
|
|
145
|
+
// value={inpValue}
|
|
146
|
+
// onChange={(e) => {
|
|
147
|
+
// setInpValue(e.target.value);
|
|
148
|
+
// }}
|
|
149
|
+
// disabled={false}
|
|
150
|
+
// placeholder="Search"
|
|
151
|
+
// className="font-normal text-gray-500 hover:text-gray-900 w-full"
|
|
152
|
+
// />
|
|
153
|
+
// </div>
|
|
154
|
+
// )}
|
|
155
|
+
emptyFilterMessage: emptyFilterMessage
|
|
156
|
+
? emptyFilterMessage
|
|
157
|
+
: "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" })), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
144
158
|
},
|
|
145
159
|
] }), !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
160
|
(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)
|