sccoreui
Version:
ui-sccore
48 lines (47 loc) • 5.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const multiselect_1 = require("primereact/multiselect");
const react_1 = require("react");
const ScMultiSelect = (props) => {
var _a;
const multiselectElm = (0, react_1.useRef)(null);
const [showCount, setShowCount] = (0, react_1.useState)(0);
const checkOverflow = (0, react_1.useCallback)(() => {
if (multiselectElm !== null) {
const dropDownItem = multiselectElm.current.getElement().children[1].children[0];
const selectedItems = multiselectElm.current.getElement().children[1].children[0].children;
const containerWidth = dropDownItem.offsetWidth;
let totalWidth = 0;
for (let i = 0; i < selectedItems.length; i++) {
totalWidth += selectedItems[i].offsetWidth; // Approximation, adjust as necessary
if (totalWidth + (78 + selectedItems.length * 8) > containerWidth) {
// 20px buffer for ellipsis
setShowCount(selectedItems.length - i);
i = selectedItems.length;
}
else {
setShowCount(0);
}
}
}
else {
setShowCount(0);
}
}, [props === null || props === void 0 ? void 0 : props.value, multiselectElm]);
(0, react_1.useEffect)(() => {
checkOverflow();
}, [checkOverflow]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative form_field" }, { children: [(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { ref: multiselectElm, selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, removeIcon: "x-close", onChange: (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
yield (props === null || props === void 0 ? void 0 : props.onChange(e));
if (props === null || props === void 0 ? void 0 : props.showSelectedCount)
checkOverflow();
}), itemTemplate: (item) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item[props.optionLabel] }), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) +
` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount)
? "showSelectedCount"
: "noShowSelectedCount"} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? "hideChipremoveIcon" : ""} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), showCount !== 0 &&
(props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 2 && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? "68px" : "40px"}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { top: "10px" }, className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: `+${showCount - 1}` })) })))] })) }));
};
exports.default = ScMultiSelect;