sccoreui 5.8.13 → 5.8.14
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.
package/dist/App.scss
CHANGED
|
@@ -791,6 +791,7 @@ button[aria-expanded="true"] {
|
|
|
791
791
|
.list_box_dropdown {
|
|
792
792
|
.p-listbox-header {
|
|
793
793
|
padding: 12px !important;
|
|
794
|
+
border-top: 1px solid var(--gray-200);
|
|
794
795
|
}
|
|
795
796
|
|
|
796
797
|
ul.p-listbox-list {
|
|
@@ -800,7 +801,6 @@ button[aria-expanded="true"] {
|
|
|
800
801
|
margin: 4px 0 !important;
|
|
801
802
|
border-radius: 4px !important;
|
|
802
803
|
padding: 8px 14px !important;
|
|
803
|
-
|
|
804
804
|
.item_content {
|
|
805
805
|
max-width: 80%;
|
|
806
806
|
white-space: nowrap;
|
|
@@ -812,6 +812,9 @@ button[aria-expanded="true"] {
|
|
|
812
812
|
.item_icon {
|
|
813
813
|
display: none;
|
|
814
814
|
}
|
|
815
|
+
&:hover {
|
|
816
|
+
background-color: var(--gray-50) !important;
|
|
817
|
+
}
|
|
815
818
|
|
|
816
819
|
&:focus {
|
|
817
820
|
box-shadow: none !important;
|
|
@@ -819,7 +822,7 @@ button[aria-expanded="true"] {
|
|
|
819
822
|
}
|
|
820
823
|
|
|
821
824
|
.p-highlight {
|
|
822
|
-
background:
|
|
825
|
+
background: var(--Primary-25);
|
|
823
826
|
color: #162578 !important;
|
|
824
827
|
|
|
825
828
|
.item_icon {
|
|
@@ -7,9 +7,13 @@ const menu_1 = require("primereact/menu");
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const button_1 = require("primereact/button");
|
|
9
9
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
10
|
-
const
|
|
10
|
+
const inputtext_1 = require("primereact/inputtext");
|
|
11
|
+
const checkbox_1 = require("primereact/checkbox");
|
|
12
|
+
const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }) => {
|
|
11
13
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
14
|
+
const [inpValue, setInpValue] = (0, react_1.useState)();
|
|
12
15
|
const optionsMenuRef = (0, react_1.useRef)();
|
|
16
|
+
const [checked, setChecked] = (0, react_1.useState)(false);
|
|
13
17
|
const onSelectOption = (e) => {
|
|
14
18
|
setSelectedItems(e.value);
|
|
15
19
|
onChange(e);
|
|
@@ -25,17 +29,17 @@ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, head
|
|
|
25
29
|
if (scrollElementId) {
|
|
26
30
|
let elm = document.getElementById(`${scrollElementId}`);
|
|
27
31
|
if (elm)
|
|
28
|
-
elm.addEventListener(
|
|
32
|
+
elm.addEventListener("scroll", handleScroll);
|
|
29
33
|
}
|
|
30
34
|
}, []);
|
|
31
35
|
const handleDragStart = (e, index) => {
|
|
32
|
-
e.dataTransfer.setData(
|
|
36
|
+
e.dataTransfer.setData("text/plain", index);
|
|
33
37
|
};
|
|
34
38
|
const handleDragOver = (e) => {
|
|
35
39
|
e.preventDefault();
|
|
36
40
|
};
|
|
37
41
|
const handleDrop = (e, targetIndex) => {
|
|
38
|
-
const draggedIndex = e.dataTransfer.getData(
|
|
42
|
+
const draggedIndex = e.dataTransfer.getData("text/plain");
|
|
39
43
|
const newItems = [...selectedItems];
|
|
40
44
|
const draggedItem = newItems[draggedIndex];
|
|
41
45
|
newItems.splice(draggedIndex, 1);
|
|
@@ -49,30 +53,36 @@ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, head
|
|
|
49
53
|
// handleFormValues(formValues);
|
|
50
54
|
onDranghandle(newItems);
|
|
51
55
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
56
|
+
const removeItems = (e) => {
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
setInpValue("");
|
|
59
|
+
};
|
|
60
|
+
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, className: menuClassName ? menuClassName : "", ref: optionsMenuRef, model: [
|
|
61
|
+
{
|
|
62
|
+
template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
|
|
63
|
+
? listBoxParentClassName +
|
|
64
|
+
" list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
|
|
65
|
+
: "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), selectAll && ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", onClick: () => {
|
|
66
|
+
if (onSelectAll)
|
|
67
|
+
onSelectAll();
|
|
68
|
+
}, className: "text-primary-400 flex justify-content-between align-items-center w-full font-semibold absolute z-4 px-5 text-left focus:shadow-none", style: { top: "10em" }, link: true }, { children: ["Select All ", (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: e => setChecked(e.checked) })] }))), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { 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: `${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && " mt-8 pt-2"}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName
|
|
69
|
+
? listBoxclassName
|
|
70
|
+
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "", filterTemplate: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full" }, { children: [(inpValue === null || inpValue === void 0 ? void 0 : inpValue.length) > 0 && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix", onClick: removeItems }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
|
|
71
|
+
setInpValue(e.target.value);
|
|
72
|
+
}, disabled: false, placeholder: "Search", className: "font-normal text-gray-500 hover:text-gray-900 w-full" })] }))) }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
73
|
+
},
|
|
74
|
+
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems &&
|
|
75
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
76
|
+
var _a, _b;
|
|
77
|
+
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: `${chipClassName
|
|
78
|
+
? chipClassName
|
|
79
|
+
: "cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof item === "object"
|
|
80
|
+
? item[`${optionLabel}`]
|
|
81
|
+
: (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`]] }), showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `${chipClassName
|
|
82
|
+
? chipClassName
|
|
83
|
+
: "cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof item === "object"
|
|
84
|
+
? item[`${optionLabel}`]
|
|
85
|
+
: (_b = 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 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] })))] })) }), index)) }));
|
|
86
|
+
}))] })))] })) }));
|
|
77
87
|
};
|
|
78
88
|
exports.default = ListBoxDropdown;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ListBoxDropdownTypes } from "../types/type";
|
|
2
|
-
declare const ListBoxDropdown: ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ListBoxDropdown: ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ListBoxDropdown;
|
package/package.json
CHANGED