sccoreui
Version:
ui-sccore
176 lines (175 loc) • 15.5 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"));
const virtualization_component_1 = tslib_1.__importDefault(require("./virtualization-component"));
// import { InputText } from "primereact/inputtext";
// import { Checkbox } from "primereact/checkbox";
const ListBoxDropdown = (props) => {
const boxRef = (0, react_1.useRef)();
const { selectAll, disabled = false,
// onSelectAll,
onSelectionChange, 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, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, filterBy, virtualScrollerOptions, virtualScroll, fetchData, refetchKey, } = 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);
}
};
// const handleScroll = (e: any) => {
// if (optionsMenuRef?.current) optionsMenuRef.current.hide(e);
// };
(0, react_1.useEffect)(() => {
if (!virtualScroll) {
setSelectedItems(values);
}
}, [values]);
// useEffect(() => {
// if (scrollElementId) {
// let elm = document.getElementById(`${scrollElementId}`);
// if (elm) elm.addEventListener("scroll", handleScroll);
// }
// }, []);
(0, react_1.useEffect)(() => {
const scrollContainer = scrollElementId
? document.getElementById(scrollElementId)
: null;
const handleScroll = (e) => {
var _a, _b;
const target = e.target;
// Prevent hiding if scroll is within dropdown or trigger button
if (typeof (target === null || target === void 0 ? void 0 : target.closest) === "function" && (target === null || target === void 0 ? void 0 : target.closest(".p-menu, .list_box_btn")))
return;
(_b = (_a = optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a, e);
};
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener("scroll", handleScroll);
window.addEventListener("scroll", handleScroll, true);
return () => {
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener("scroll", handleScroll);
window.removeEventListener("scroll", handleScroll, true);
};
}, [scrollElementId, optionsMenuRef]);
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() }), 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, refetchKey: refetchKey })) : ((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, filterBy: filterBy, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), onFilterValueChange: onFilterValueChange, virtualScrollerOptions: virtualScrollerOptions, options: selectedOptionNone
? listItems.length === selectedItems.length
? []
: listItems
: listItems, optionLabel: optionLabel, className: `${listBoxclassName
? listBoxclassName
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ",
// filterTemplate={() => (
// <div className="p-input-icon-right w-full">
// {
// inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
// <SvgComponent icon="x-close" size={18} />
// </span>
// }
// <InputText
// id="email"
// value={inpValue}
// onChange={(e) => {
// setInpValue(e.target.value);
// }}
// disabled={false}
// placeholder="Search"
// className="font-normal text-gray-500 hover:text-gray-900 w-full"
// />
// </div>
// )}
emptyFilterMessage: emptyFilterMessage
? emptyFilterMessage
: "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" })), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
},
] }), !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, disabled: disabled })) : ((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, disabled: disabled })) })) : ((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, type: "button", disabled: disabled }), (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;