sccoreui
Version:
ui-sccore
78 lines (77 loc) • 10.3 kB
JavaScript
;
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 { multiSelectExtraProps = {} } = 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;
console.log("options", option);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `status_dropdown_item pl-1 ${(_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", 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, Object.assign({ panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, resetFilterOnHide: true, 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" : "",
} }, multiSelectExtraProps, { itemTemplate: itemTemplate })), (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, Object.assign({ 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, resetFilterOnHide: true, 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" : "",
} }, multiSelectExtraProps, { itemTemplate: itemTemplate })), (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, Object.assign({ 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, resetFilterOnHide: true, 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" : "",
} }, multiSelectExtraProps)), (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, Object.assign({ 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", resetFilterOnHide: true, 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
? props.emptyFilterMessage
: "No Results Found", filterPlaceholder: props.filterPlaceholder ? props.filterPlaceholder : "Search by name" }, multiSelectExtraProps, { itemTemplate: itemTemplate })))] }));
};
exports.MultiSelectDropDown = MultiSelectDropDown;
exports.default = exports.MultiSelectDropDown;