@agilant/toga-blox 1.0.88 → 1.0.89
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/components/HeaderFilterIcon/HeaderFilterIcon.stories.js +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/SearchInput/SearchInput.js +5 -3
- package/dist/components/SearchInput/SearchInput.types.d.ts +1 -0
- package/dist/components/SearchInput/SearchTextInput.d.ts +6 -1
- package/dist/components/SearchInput/SearchTextInput.js +27 -11
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SearchInputProps } from "./SearchInput.types";
|
|
2
|
-
declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default SearchInput;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from "react";
|
|
3
|
-
import SearchTextInput from "./SearchTextInput";
|
|
3
|
+
import SearchTextInput from "./SearchTextInput";
|
|
4
4
|
import SearchNumberInput from "./SearchNumberInput";
|
|
5
5
|
import SearchDropdownInput from "./SearchDropdownInput";
|
|
6
6
|
import SearchDatePickerInput from "./SearchInputDatePicker";
|
|
@@ -8,7 +8,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
|
|
|
8
8
|
name: "chevronDown",
|
|
9
9
|
weight: "bold",
|
|
10
10
|
iconClasses: "text-black",
|
|
11
|
-
}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, }) => {
|
|
11
|
+
}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, }) => {
|
|
12
12
|
const containerRef = useRef(null);
|
|
13
13
|
const inputRef = useRef(null);
|
|
14
14
|
useEffect(() => {
|
|
@@ -17,7 +17,9 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
|
|
|
17
17
|
return (_jsx("div", { ref: containerRef, className: "w-max", children: (() => {
|
|
18
18
|
switch (inputType) {
|
|
19
19
|
case "text":
|
|
20
|
-
return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily
|
|
20
|
+
return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily,
|
|
21
|
+
//will remove the filter options from the badge shown in the input
|
|
22
|
+
removePattern: removePattern }));
|
|
21
23
|
case "number":
|
|
22
24
|
return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor }));
|
|
23
25
|
case "multiSelect":
|
|
@@ -17,6 +17,11 @@ type SearchTextInputProps<T extends object> = {
|
|
|
17
17
|
localStorageKey?: string;
|
|
18
18
|
firstIconClasses?: string;
|
|
19
19
|
fontFamily?: string;
|
|
20
|
+
/**
|
|
21
|
+
* An optional pattern to remove from the front of the displayed text
|
|
22
|
+
* (e.g., "eq:" or a regular expression like /^[^:]*:/ ).
|
|
23
|
+
*/
|
|
24
|
+
removePattern?: RegExp | string;
|
|
20
25
|
};
|
|
21
|
-
declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, firstIconClasses, fontFamily, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, firstIconClasses, fontFamily, removePattern, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
22
27
|
export default SearchTextInput;
|
|
@@ -11,12 +11,11 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
11
11
|
iconClasses: textHighlight,
|
|
12
12
|
name: "chevronDown",
|
|
13
13
|
weight: "solid",
|
|
14
|
-
}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, fontFamily, }) => {
|
|
14
|
+
}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, fontFamily, removePattern, }) => {
|
|
15
15
|
const containerRef = useRef(null);
|
|
16
16
|
const [localSearchText, setLocalSearchText] = useState("");
|
|
17
17
|
const inputRef = useRef(null);
|
|
18
|
-
|
|
19
|
-
// On mount: focus input and load persisted search for this column if it exists.
|
|
18
|
+
// On mount: focus input & load persisted search for this column
|
|
20
19
|
useEffect(() => {
|
|
21
20
|
inputRef.current?.focus();
|
|
22
21
|
const stored = localStorage.getItem(localStorageKey);
|
|
@@ -36,7 +35,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
36
35
|
const handleInputChange = (event) => {
|
|
37
36
|
setLocalSearchText(event.target.value);
|
|
38
37
|
};
|
|
39
|
-
// When a badge is clicked, remove it
|
|
38
|
+
// When a badge is clicked, remove it from search items & local storage
|
|
40
39
|
const handleSearchBadgeClick = (item) => {
|
|
41
40
|
const newSearchItems = searchItems.filter((ele) => ele !== item);
|
|
42
41
|
setSearchItems && setSearchItems(newSearchItems);
|
|
@@ -47,7 +46,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
47
46
|
return newCriteria;
|
|
48
47
|
});
|
|
49
48
|
};
|
|
50
|
-
// On Enter: append new search
|
|
49
|
+
// On Enter: append new search
|
|
51
50
|
const handleKeyDown = (e) => {
|
|
52
51
|
console.log("handleKeyDown triggered, localSearchText:", localSearchText);
|
|
53
52
|
if (e.key === "Enter" && localSearchText.length > 0) {
|
|
@@ -57,17 +56,16 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
57
56
|
handleSubmit();
|
|
58
57
|
}
|
|
59
58
|
};
|
|
60
|
-
// Append a new criterion for this column
|
|
61
|
-
// Here we combine the drop-down value (if provided) with the input text.
|
|
59
|
+
// Append a new criterion for this column
|
|
62
60
|
const handleSubmit = () => {
|
|
63
61
|
const trimmed = localSearchText.trim();
|
|
64
|
-
// Combine the drop-down option value (if
|
|
62
|
+
// Combine the drop-down option value (if any) with the text
|
|
65
63
|
const combinedText = selectedDropdownOption && selectedDropdownOption.value
|
|
66
64
|
? `${selectedDropdownOption.value}${trimmed}`
|
|
67
65
|
: trimmed;
|
|
68
66
|
console.log("handleSubmit triggered, combinedText:", combinedText);
|
|
69
67
|
if (!combinedText) {
|
|
70
|
-
// Remove any criteria for this column
|
|
68
|
+
// Remove any criteria for this column
|
|
71
69
|
setSearchCriteria((prev) => {
|
|
72
70
|
const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
73
71
|
updateLocalStorage(newCriteria, localStorageKey);
|
|
@@ -76,7 +74,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
76
74
|
});
|
|
77
75
|
}
|
|
78
76
|
else {
|
|
79
|
-
// Append a new criterion
|
|
77
|
+
// Append a new criterion
|
|
80
78
|
setSearchCriteria((prev) => {
|
|
81
79
|
const newCriteria = [
|
|
82
80
|
...prev,
|
|
@@ -90,6 +88,24 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
90
88
|
setEditingHeader(null);
|
|
91
89
|
setLocalSearchText("");
|
|
92
90
|
};
|
|
93
|
-
|
|
91
|
+
// Helper: remove pattern (string or regex) from the beginning of the item
|
|
92
|
+
const getCleanedText = (item) => {
|
|
93
|
+
if (!removePattern)
|
|
94
|
+
return item;
|
|
95
|
+
if (removePattern instanceof RegExp) {
|
|
96
|
+
return item.replace(removePattern, "");
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
// If it's a string, remove that string if it appears at the start
|
|
100
|
+
const pattern = new RegExp(`^${removePattern}`);
|
|
101
|
+
return item.replace(pattern, "");
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
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 || { label: "", value: "" }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md", 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", firstIconClasses: firstIconClasses, 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) => {
|
|
105
|
+
const cleanedText = getCleanedText(item);
|
|
106
|
+
return (_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: fontFamily, size: "text-sm", tag: "span",
|
|
107
|
+
// Render only the cleaned text
|
|
108
|
+
text: cleanedText }), 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));
|
|
109
|
+
}) })) : null] }) }));
|
|
94
110
|
};
|
|
95
111
|
export default SearchTextInput;
|