sccoreui/dist/components/multi-select-dropdown/multi-select-dropdown.js

ui-sccore

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelectDropDown = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const multiselect_1 = require("primereact/multiselect");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const MultiSelectDropDown = (props) => {
    const [items, setItems] = (0, react_1.useState)([]);
    const [isMoreThanOne, setIsMoreThenOne] = (0, react_1.useState)(false);
    const LeftSection = () => {
        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.dropdownType === "status" ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "select_status_prv absolute left_section_item z-5" }, { children: (items === null || items === void 0 ? void 0 : items.length) > 0 ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "p-0 m-0 list-none" }, { children: items === null || items === void 0 ? void 0 : items.map((status, i) => {
                        var _a, _b;
                        return ((0, jsx_runtime_1.jsx)("li", { style: { background: status.color }, className: `${(_b = (_a = status === null || status === void 0 ? void 0 : status.name) === null || _a === void 0 ? void 0 : _a.replaceAll(" ", "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, i));
                    }) }))) : ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "p-0 m-0 list-none" }, { children: (0, jsx_runtime_1.jsx)("li", { className: "all" }) }))) }))) : ((0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_left left_section_item absolute z-5 ", icon: props.leftIcon, size: 20 }, Math.floor(Math.random() * 1000))) }));
    };
    const clearIcon = () => {
        const onClear = () => {
            setItems([]);
            if (props.onClear)
                props.onClear();
        };
        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
    };
    const onChange = (e) => {
        if (props.onChange)
            props.onChange(e);
    };
    (0, react_1.useEffect)(() => {
        if ((items === null || items === void 0 ? void 0 : items.length) > (props === null || props === void 0 ? void 0 : props.maxSelectedLabels))
            setIsMoreThenOne(true);
        else
            setIsMoreThenOne(false);
    }, [items]);
    (0, react_1.useEffect)(() => {
        if ((props === null || props === void 0 ? void 0 : props.value) !== undefined)
            setItems(props.value);
    }, [props === null || props === void 0 ? void 0 : props.value]);
    const itemTemplate = (option) => {
        var _a, _b;
        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${(_b = (_a = option === null || option === void 0 ? void 0 : option.name) === null || _a === void 0 ? void 0 : _a.replaceAll(" ", "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "status_dot", style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "otption_name mr-8" }, { children: option.name }))] })) }));
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === "withIcon" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne
                    ? `selected_multile ${`selected_num_` + (items === null || items === void 0 ? void 0 : items.length)}`
                    : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                        }, className: `w-full ${props.maxWidth ? `${"optionBodyMaxWidth_" + props.maxWidth}` : ""}`, panelStyle: {
                            width: props.panelWidth ? props.panelWidth + "px" : "",
                        } }), (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", (items === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), props.dropdownType === "default" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? "left_icon" : "no_icon"} ${isMoreThanOne
                    ? `selected_multile ${`selected_num_` + (items === null || items === void 0 ? void 0 : items.length)}`
                    : ""}` }, { children: [props.icon !== undefined && (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                        }, className: `w-full`, panelStyle: {
                            width: props.panelWidth ? props.panelWidth + "px" : "",
                        } }), (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", (items === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "status" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${(items === null || items === void 0 ? void 0 : items.length) > 2 ? "mutli_select_status" : ""} ${props.className} ${(items === null || items === void 0 ? void 0 : items.length) > 3 ? "moreThanThreeItems" : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                        }, className: `w-full`, panelStyle: {
                            width: props.panelWidth ? props.panelWidth + "px" : "",
                        } }), (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", (items === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "" && ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
                    minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                    maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
                }, 
                // className="w-20rem"
                showClear: true, panelStyle: {
                    width: props.panelWidth ? props.panelWidth + "px" : "",
                }, emptyFilterMessage: props.emptyFilterMessage }))] }));
};
exports.MultiSelectDropDown = MultiSelectDropDown;
exports.default = exports.MultiSelectDropDown;