sccoreui
Version:
ui-sccore
135 lines (134 loc) • 11.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const listbox_1 = require("primereact/listbox");
const menu_1 = require("primereact/menu");
const react_1 = require("react");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
// import { InputText } from "primereact/inputtext";
// import { Checkbox } from "primereact/checkbox";
const ListBoxDropdown = (props) => {
const boxRef = (0, react_1.useRef)();
const { selectAll,
// onSelectAll,
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef,
// buttonClassName,
showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, } = props;
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
// const [inpValue, setInpValue] = useState<any>();
// const [checked, setChecked] = useState<boolean>(false);
const [buttonPosition, setButtonPosition] = (0, react_1.useState)(null);
const buttonRef = (0, react_1.useRef)(null);
const onSelectOption = (e) => {
if (confirmationOption === true)
onChange(e);
else {
setSelectedItems(e.value);
onChange(e);
}
};
(0, react_1.useEffect)(() => {
setSelectedItems(values);
}, [values]);
const handleScroll = (e) => {
if (optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current)
optionsMenuRef.current.hide(e);
};
(0, react_1.useEffect)(() => {
if (scrollElementId) {
let elm = document.getElementById(`${scrollElementId}`);
if (elm)
elm.addEventListener("scroll", handleScroll);
}
}, []);
const handleDragStart = (e, index) => {
e.dataTransfer.setData("text/plain", index);
};
const handleDragOver = (e) => {
e.preventDefault();
};
const handleDrop = (e, targetIndex) => {
const draggedIndex = e.dataTransfer.getData("text/plain");
const newItems = [...selectedItems];
const draggedItem = newItems[draggedIndex];
newItems.splice(draggedIndex, 1);
newItems.splice(targetIndex, 0, draggedItem);
setSelectedItems(newItems);
// const formValues = {
// values: newItems,
// isValid,
// formIndex: optionValueIndex
// }
// handleFormValues(formValues);
onDranghandle(newItems);
};
// const removeItems = (e) => {
// e.preventDefault();
// setInpValue("");
// e.preventDefault()
// }
// const onSelectAllItem = (e:any) => {
// e.stopPropagation();
// setChecked(!checked);
// if (onSelectAll) onSelectAll(!checked);
// }
// console.log("footer...", footeTemplate)
// const onMouseLeaveMenu = (e) => {
// if(optionsMenuRef?.current && !footeTemplate){
// optionsMenuRef?.current.hide(e)
// }
// }
(0, react_1.useEffect)(() => {
const handleScroll = (e) => {
var _a;
if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
const newPosition = (_a = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top;
// Hide overlay if the button position changes from the top
if (buttonPosition !== null && newPosition !== buttonPosition) {
if (optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current)
optionsMenuRef.current.hide(e);
}
// Update the button position
setButtonPosition(newPosition);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [buttonPosition]);
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,
// onMouseLeave={onMouseLeaveMenu}
id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
{
template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
? listBoxParentClassName +
" list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
: "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (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), options: selectedOptionNone
? listItems.length === selectedItems.length
? []
: listItems
: listItems, optionLabel: optionLabel, className: `${listBoxclassName
? listBoxclassName
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search " }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
},
] }), !showChips ? ((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) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
// className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
// 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, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}` }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
var _a, _b, _c, _d;
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"
? item[`${optionLabel}`]
: (_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"
? item[`${optionLabel}`]
: (_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"
? item[`${optionLabel}`]
: (_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"
? item[`${optionLabel}`]
: (_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)) }));
})) }))] })))] })) }));
};
exports.default = ListBoxDropdown;