sccoreui 6.3.57 → 6.3.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/sccoreui.css
CHANGED
|
@@ -1803,7 +1803,7 @@ a {
|
|
|
1803
1803
|
.p-multiselect.p-multiselect-chip
|
|
1804
1804
|
.p-multiselect-token
|
|
1805
1805
|
.p-multiselect-token-icon:hover {
|
|
1806
|
-
|
|
1806
|
+
/* stroke: var(--gray-700); */
|
|
1807
1807
|
}
|
|
1808
1808
|
.p-multiselect.p-multiselect-chip
|
|
1809
1809
|
.p-multiselect-token
|
|
@@ -1836,7 +1836,7 @@ a {
|
|
|
1836
1836
|
}
|
|
1837
1837
|
.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable
|
|
1838
1838
|
.p-multiselect-label {
|
|
1839
|
-
padding-right: 1.75rem;
|
|
1839
|
+
/* padding-right: 1.75rem; */
|
|
1840
1840
|
}
|
|
1841
1841
|
|
|
1842
1842
|
.p-multiselect-panel {
|
|
@@ -5,39 +5,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const multiselect_1 = require("primereact/multiselect");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const ScMultiSelect = (props) => {
|
|
8
|
+
var _a;
|
|
8
9
|
const multiselectElm = (0, react_1.useRef)(null);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
?
|
|
41
|
-
|
|
10
|
+
const [showCount, setShowCount] = (0, react_1.useState)(0);
|
|
11
|
+
const checkOverflow = (0, react_1.useCallback)(() => {
|
|
12
|
+
if (multiselectElm !== null) {
|
|
13
|
+
const dropDownItem = multiselectElm.current.getElement().children[1].children[0];
|
|
14
|
+
const selectedItems = multiselectElm.current.getElement().children[1].children[0].children;
|
|
15
|
+
const containerWidth = dropDownItem.offsetWidth;
|
|
16
|
+
let totalWidth = 0;
|
|
17
|
+
for (let i = 0; i < selectedItems.length; i++) {
|
|
18
|
+
totalWidth += selectedItems[i].offsetWidth; // Approximation, adjust as necessary
|
|
19
|
+
if (totalWidth + (78 + selectedItems.length * 8) > containerWidth) {
|
|
20
|
+
// 20px buffer for ellipsis
|
|
21
|
+
setShowCount(selectedItems.length - i);
|
|
22
|
+
i = selectedItems.length;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
setShowCount(0);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
setShowCount(0);
|
|
31
|
+
}
|
|
32
|
+
}, [props === null || props === void 0 ? void 0 : props.value, multiselectElm]);
|
|
33
|
+
(0, react_1.useEffect)(() => {
|
|
34
|
+
checkOverflow();
|
|
35
|
+
}, [checkOverflow]);
|
|
36
|
+
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* () {
|
|
37
|
+
yield (props === null || props === void 0 ? void 0 : props.onChange(e));
|
|
38
|
+
if (props === null || props === void 0 ? void 0 : props.showSelectedCount)
|
|
39
|
+
checkOverflow();
|
|
40
|
+
}), 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) +
|
|
41
|
+
` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount)
|
|
42
|
+
? "showSelectedCount"
|
|
43
|
+
: "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 &&
|
|
44
|
+
(props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
|
|
45
|
+
((_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}` })) })))] })) }));
|
|
42
46
|
};
|
|
43
47
|
exports.default = ScMultiSelect;
|
|
@@ -187,6 +187,8 @@ export interface MultiSelectProps {
|
|
|
187
187
|
filter?: boolean;
|
|
188
188
|
isRequired?: boolean;
|
|
189
189
|
value?: any;
|
|
190
|
+
emptyMessage?: any;
|
|
191
|
+
emptyFilterMessage?: any;
|
|
190
192
|
}
|
|
191
193
|
export interface TreeDropdownSelectTypes {
|
|
192
194
|
displayLabelName: string;
|
|
@@ -257,6 +259,8 @@ export interface ListBoxDropdownTypes {
|
|
|
257
259
|
confirmationOption?: boolean;
|
|
258
260
|
selectedOptionNone?: boolean;
|
|
259
261
|
type?: any;
|
|
262
|
+
emptyFilterMessage?: any;
|
|
263
|
+
emptyMessage?: any;
|
|
260
264
|
}
|
|
261
265
|
export interface DatePickerTypes {
|
|
262
266
|
value: any;
|
|
@@ -283,7 +287,7 @@ export interface ScMultiSelectTypes {
|
|
|
283
287
|
options: any;
|
|
284
288
|
showClear?: boolean;
|
|
285
289
|
display?: "comma" | "chip";
|
|
286
|
-
removeChipIcon?:
|
|
290
|
+
removeChipIcon?: any;
|
|
287
291
|
onChange?: (e: any) => void;
|
|
288
292
|
placeholder?: string;
|
|
289
293
|
className?: string;
|
|
@@ -305,6 +309,7 @@ export interface ScMultiSelectTypes {
|
|
|
305
309
|
emptyFilterMessage?: any;
|
|
306
310
|
selectAll?: boolean;
|
|
307
311
|
selectedItemTemplate?: ReactNode;
|
|
312
|
+
emptyMessage?: any;
|
|
308
313
|
}
|
|
309
314
|
export interface ConfigurValueOptionsTypes {
|
|
310
315
|
label: string;
|