@agilant/toga-blox 1.0.175 → 1.0.177
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.
|
@@ -56,38 +56,68 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
56
56
|
handleSubmit();
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
// Append a new criterion for this column
|
|
60
59
|
const handleSubmit = () => {
|
|
61
60
|
const trimmed = localSearchText.trim();
|
|
62
|
-
// Combine the drop-down option value (if any) with the text
|
|
63
61
|
const combinedText = selectedDropdownOption && selectedDropdownOption.value
|
|
64
62
|
? `${selectedDropdownOption.value}${trimmed}`
|
|
65
63
|
: trimmed;
|
|
66
64
|
console.log("handleSubmit triggered, combinedText:", combinedText);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
71
|
-
updateLocalStorage(newCriteria, localStorageKey);
|
|
72
|
-
console.log("Removed criterion, newCriteria:", newCriteria);
|
|
73
|
-
return newCriteria;
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
// Append a new criterion
|
|
78
|
-
setSearchCriteria((prev) => {
|
|
79
|
-
const newCriteria = [
|
|
80
|
-
...prev,
|
|
81
|
-
{ searchColumn: column, submittedSearchText: combinedText },
|
|
82
|
-
];
|
|
83
|
-
updateLocalStorage(newCriteria, localStorageKey);
|
|
84
|
-
console.log("Appended criterion, newCriteria:", newCriteria);
|
|
85
|
-
return newCriteria;
|
|
86
|
-
});
|
|
65
|
+
// Set single badge item
|
|
66
|
+
if (setSearchItems) {
|
|
67
|
+
setSearchItems(combinedText ? [combinedText] : []);
|
|
87
68
|
}
|
|
69
|
+
setSearchCriteria((prev) => {
|
|
70
|
+
const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
71
|
+
const newCriteria = combinedText
|
|
72
|
+
? [
|
|
73
|
+
...filtered,
|
|
74
|
+
{
|
|
75
|
+
searchColumn: column,
|
|
76
|
+
submittedSearchText: combinedText,
|
|
77
|
+
},
|
|
78
|
+
]
|
|
79
|
+
: filtered;
|
|
80
|
+
updateLocalStorage(newCriteria, localStorageKey);
|
|
81
|
+
console.log("Updated criterion, newCriteria:", newCriteria);
|
|
82
|
+
return newCriteria;
|
|
83
|
+
});
|
|
88
84
|
setEditingHeader(null);
|
|
89
85
|
setLocalSearchText("");
|
|
90
86
|
};
|
|
87
|
+
// Append a new criterion for this column
|
|
88
|
+
// const handleSubmit = () => {
|
|
89
|
+
// const trimmed = localSearchText.trim();
|
|
90
|
+
// // Combine the drop-down option value (if any) with the text
|
|
91
|
+
// const combinedText =
|
|
92
|
+
// selectedDropdownOption && selectedDropdownOption.value
|
|
93
|
+
// ? `${selectedDropdownOption.value}${trimmed}`
|
|
94
|
+
// : trimmed;
|
|
95
|
+
// console.log("handleSubmit triggered, combinedText:", combinedText);
|
|
96
|
+
// if (!combinedText) {
|
|
97
|
+
// // Remove any criteria for this column
|
|
98
|
+
// setSearchCriteria((prev) => {
|
|
99
|
+
// const newCriteria = prev.filter(
|
|
100
|
+
// (c) => c.searchColumn.id !== column.id
|
|
101
|
+
// );
|
|
102
|
+
// updateLocalStorage(newCriteria, localStorageKey);
|
|
103
|
+
// console.log("Removed criterion, newCriteria:", newCriteria);
|
|
104
|
+
// return newCriteria;
|
|
105
|
+
// });
|
|
106
|
+
// } else {
|
|
107
|
+
// // Append a new criterion
|
|
108
|
+
// setSearchCriteria((prev) => {
|
|
109
|
+
// const newCriteria = [
|
|
110
|
+
// ...prev,
|
|
111
|
+
// { searchColumn: column, submittedSearchText: combinedText },
|
|
112
|
+
// ];
|
|
113
|
+
// updateLocalStorage(newCriteria, localStorageKey);
|
|
114
|
+
// console.log("Appended criterion, newCriteria:", newCriteria);
|
|
115
|
+
// return newCriteria;
|
|
116
|
+
// });
|
|
117
|
+
// }
|
|
118
|
+
// setEditingHeader(null);
|
|
119
|
+
// setLocalSearchText("");
|
|
120
|
+
// };
|
|
91
121
|
return (_jsx("div", { ref: containerRef, className: "rounded-md", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: getCleanedText(localSearchText, removePattern), 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-14", 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 text-base", onClick: () => setLocalSearchText(""), "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { onClick: handleSubmit, className: `${textHighlight} text-base hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => setLocalSearchText("") }) }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 rounded-md", children: searchItems.map((item, index) => {
|
|
92
122
|
const cleanedText = getCleanedText(item, removePattern);
|
|
93
123
|
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", 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 mx-4`, type: "span" }, index));
|
|
@@ -18,6 +18,7 @@ export interface TableRowProps<T extends DataWithUUID> {
|
|
|
18
18
|
errorIndicator?: (error: Error) => ReactNode;
|
|
19
19
|
expandedContent?: ReactNode;
|
|
20
20
|
linkText?: string;
|
|
21
|
+
rowClassNames?: string;
|
|
21
22
|
}
|
|
22
|
-
declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, rowClassNames, hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
export default TableRow;
|
|
@@ -10,7 +10,7 @@ const TableRow = ({
|
|
|
10
10
|
/* react-table */
|
|
11
11
|
row, prepareRow,
|
|
12
12
|
/* visual */
|
|
13
|
-
activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer",
|
|
13
|
+
activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", rowClassNames = "",
|
|
14
14
|
/* behaviour / meta */
|
|
15
15
|
hasInfiniteScroll, rowUuid, onRowClick,
|
|
16
16
|
/* expansion store */
|
|
@@ -45,7 +45,7 @@ hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedC
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: handleRowClick, children: row.cells.map((cell, idx) => {
|
|
48
|
+
return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses} ${rowClassNames}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: handleRowClick, children: row.cells.map((cell, idx) => {
|
|
49
49
|
const isLastCell = idx === row.cells.length - 1;
|
|
50
50
|
const cellKey = `${rowUuid ?? "no-uuid"}-${cell.column.id}`;
|
|
51
51
|
return (_jsx(TableCell, { cell: cell, isLastCell: isLastCell, hasInfiniteScroll: hasInfiniteScroll, rowUuid: rowUuid, expanded: expandedCells[cellKey] ?? false, onToggle: () => toggleCell(cellKey), linkText: linkText }, cellKey));
|