@agilant/toga-blox 1.0.63 → 1.0.64
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.
|
@@ -14,7 +14,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
14
14
|
const containerRef = useRef(null);
|
|
15
15
|
const [localSearchText, setLocalSearchText] = useState("");
|
|
16
16
|
const inputRef = useRef(null);
|
|
17
|
-
//
|
|
17
|
+
// On mount: focus input and load persisted search for this column if it exists.
|
|
18
18
|
useEffect(() => {
|
|
19
19
|
inputRef.current?.focus();
|
|
20
20
|
const stored = localStorage.getItem(localStorageKey);
|
|
@@ -31,53 +31,65 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
}, [column.id, localStorageKey]);
|
|
34
|
+
// Helper to update local storage.
|
|
34
35
|
const updateLocalStorage = (criteria) => {
|
|
35
36
|
localStorage.setItem(localStorageKey, JSON.stringify(criteria));
|
|
36
37
|
};
|
|
37
38
|
const handleInputChange = (event) => {
|
|
38
39
|
setLocalSearchText(event.target.value);
|
|
39
40
|
};
|
|
41
|
+
// When a badge is clicked, remove from both searchItems and searchCriteria.
|
|
40
42
|
const handleSearchBadgeClick = (item) => {
|
|
41
|
-
// Remove from
|
|
43
|
+
// Remove from displayed badge items.
|
|
42
44
|
const newSearchItems = searchItems.filter((ele) => ele !== item);
|
|
43
45
|
setSearchItems && setSearchItems(newSearchItems);
|
|
44
|
-
// Remove from searchCriteria
|
|
46
|
+
// Remove corresponding criterion from searchCriteria.
|
|
45
47
|
setSearchCriteria((prev) => {
|
|
46
48
|
const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
|
|
47
49
|
updateLocalStorage(newCriteria);
|
|
50
|
+
console.log("Removed badge criterion, newCriteria:", newCriteria);
|
|
48
51
|
return newCriteria;
|
|
49
52
|
});
|
|
50
53
|
};
|
|
54
|
+
// On Enter: append new search.
|
|
51
55
|
const handleKeyDown = (e) => {
|
|
56
|
+
console.log("handleKeyDown triggered, localSearchText:", localSearchText);
|
|
52
57
|
if (e.key === "Enter" && localSearchText.length > 0) {
|
|
53
58
|
e.preventDefault();
|
|
59
|
+
// Update the badge list.
|
|
54
60
|
setSearchItems && setSearchItems([...searchItems, localSearchText]);
|
|
55
61
|
handleFilter && handleFilter();
|
|
56
62
|
handleSubmit();
|
|
57
63
|
}
|
|
58
64
|
};
|
|
65
|
+
// Append a new criterion for this column.
|
|
59
66
|
const handleSubmit = () => {
|
|
60
67
|
const trimmed = localSearchText.trim();
|
|
68
|
+
console.log("handleSubmit triggered, trimmed:", trimmed);
|
|
61
69
|
if (!trimmed) {
|
|
62
|
-
//
|
|
70
|
+
// Remove any criteria for this column.
|
|
63
71
|
setSearchCriteria((prev) => {
|
|
64
72
|
const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
65
73
|
updateLocalStorage(newCriteria);
|
|
74
|
+
console.log("Removed criterion, newCriteria:", newCriteria);
|
|
66
75
|
return newCriteria;
|
|
67
76
|
});
|
|
68
77
|
}
|
|
69
78
|
else {
|
|
70
|
-
//
|
|
79
|
+
// Append a new criterion.
|
|
71
80
|
setSearchCriteria((prev) => {
|
|
72
81
|
const newCriteria = [
|
|
73
82
|
...prev,
|
|
74
83
|
{ searchColumn: column, submittedSearchText: trimmed },
|
|
75
84
|
];
|
|
76
85
|
updateLocalStorage(newCriteria);
|
|
86
|
+
console.log("Appended criterion, newCriteria:", newCriteria);
|
|
77
87
|
return newCriteria;
|
|
78
88
|
});
|
|
79
89
|
}
|
|
80
90
|
setEditingHeader(null);
|
|
91
|
+
// Clear the input so a new search can be entered.
|
|
92
|
+
setLocalSearchText("");
|
|
81
93
|
};
|
|
82
94
|
return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: "min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => setLocalSearchText(""), "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => setLocalSearchText("") })] }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: searchItems.map((item, index) => (_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", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index))) })) : null] }) }));
|
|
83
95
|
};
|