@agilant/toga-blox 1.0.117 → 1.0.118
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.
|
@@ -8,10 +8,7 @@ import Text from "../Text";
|
|
|
8
8
|
const DEFAULT_STORAGE_KEY = "searchCriteria";
|
|
9
9
|
const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor = "bg-sky-500", textHighlight = "text-sky-700", handleFilter, searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, clearText = "Clear", clearTextColor = "text-sky-500", buttonText = "Filter", buttonColor = "bg-sky-500", localStorageKey = DEFAULT_STORAGE_KEY, isBoolean = false, isSearchable, fontFamily, pillColor, ...rest }) => {
|
|
10
10
|
const canStore = !!column?.id && !!setSearchCriteria;
|
|
11
|
-
// IMPORTANT: Start at 0, not options.length.
|
|
12
|
-
// This is the # of items matched by the child's filter, updated live.
|
|
13
11
|
const [filteredCount, setFilteredCount] = useState(0);
|
|
14
|
-
// On mount, read localStorage if we have a stored selection for this column
|
|
15
12
|
useEffect(() => {
|
|
16
13
|
if (!canStore)
|
|
17
14
|
return;
|
|
@@ -24,8 +21,12 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
24
21
|
if (existing && setSearchItems) {
|
|
25
22
|
const raw = existing.submittedSearchText;
|
|
26
23
|
setSearchItems([raw]);
|
|
24
|
+
let delimiter = ",";
|
|
25
|
+
if (raw.includes(":")) {
|
|
26
|
+
delimiter = ":";
|
|
27
|
+
}
|
|
27
28
|
const storedValues = raw
|
|
28
|
-
.split(
|
|
29
|
+
.split(delimiter)
|
|
29
30
|
.map((s) => s.trim());
|
|
30
31
|
const matched = options.filter((o) => storedValues.includes(o.value));
|
|
31
32
|
onChange(matched);
|
|
@@ -42,7 +43,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
42
43
|
onChange,
|
|
43
44
|
options,
|
|
44
45
|
]);
|
|
45
|
-
// Called when user clicks the "Filter" button in the footer
|
|
46
46
|
const handleFooterFilter = () => {
|
|
47
47
|
const actualSelections = selectedValue.filter((opt) => opt.value !== "__footer__" && opt.label !== "Select All");
|
|
48
48
|
const selectedLabels = actualSelections
|
|
@@ -54,7 +54,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
56
56
|
if (isEmpty) {
|
|
57
|
-
// Remove from local storage
|
|
58
57
|
setSearchCriteria?.((prev) => {
|
|
59
58
|
const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
|
|
60
59
|
updateLocalStorage(newCriteria, localStorageKey);
|
|
@@ -62,7 +61,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
62
61
|
});
|
|
63
62
|
}
|
|
64
63
|
else {
|
|
65
|
-
// Store to local storage
|
|
66
64
|
setSearchCriteria?.((prev) => {
|
|
67
65
|
const filtered = prev.filter((c) => c.searchColumn.id !== column?.id);
|
|
68
66
|
const newCriteria = [
|
|
@@ -115,9 +113,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
115
113
|
}, onClick: (e) => {
|
|
116
114
|
e.stopPropagation();
|
|
117
115
|
onClick(e);
|
|
118
|
-
}, children: [_jsxs("div", { children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }), selectedValue.length > 0 && (
|
|
119
|
-
// Example badge if you want a count
|
|
120
|
-
_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => console.log("Select All Badge clicked"), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: `${selectedValue.length} picked` }), badgeContainerClasses: `${pillColor} p-1 max-w-fit rounded-full flex justify-between items-center text-white text-xs px-4 border-none`, type: "span" }, option.value))] }));
|
|
116
|
+
}, children: [_jsxs("div", { children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }), selectedValue.length > 0 && (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => console.log("Select All Badge clicked"), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: `${selectedValue.length} picked` }), badgeContainerClasses: `${pillColor} p-1 max-w-fit rounded-full flex justify-between items-center text-white text-xs px-4 border-none`, type: "span" }, option.value))] }));
|
|
121
117
|
}
|
|
122
118
|
// Normal item
|
|
123
119
|
return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
|