@agilant/toga-blox 1.0.113 → 1.0.115
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.
|
@@ -49,12 +49,9 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
49
49
|
return selectedDate ? formatAsYMD(selectedDate) : "";
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
|
-
// On Filter button click, combine the operator and the date string.
|
|
53
52
|
const handleFilterClick = () => {
|
|
54
53
|
const dateString = buildDateString().trim();
|
|
55
|
-
const operator = selectedOperator
|
|
56
|
-
? selectedOperator.value
|
|
57
|
-
: "";
|
|
54
|
+
const operator = selectedOperator?.value || "";
|
|
58
55
|
const combinedText = operator + dateString;
|
|
59
56
|
if (!combinedText) {
|
|
60
57
|
if (column && setSearchCriteria) {
|
|
@@ -71,8 +68,9 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
71
68
|
}
|
|
72
69
|
if (column && setSearchCriteria) {
|
|
73
70
|
setSearchCriteria((prev) => {
|
|
71
|
+
const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
74
72
|
const newCriteria = [
|
|
75
|
-
...
|
|
73
|
+
...filtered,
|
|
76
74
|
{
|
|
77
75
|
searchColumn: column,
|
|
78
76
|
submittedSearchText: combinedText,
|
|
@@ -116,7 +114,7 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
116
114
|
? formatAsYMD(selectedEndDate)
|
|
117
115
|
: "End Date" })] })) : (
|
|
118
116
|
// Single-date mode: Render a dropdown for operator and a button for the date.
|
|
119
|
-
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedOperator, onOptionSelect: (option) => setSelectedOperator(option), optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-
|
|
117
|
+
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedOperator, onOptionSelect: (option) => setSelectedOperator(option), optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-10 left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
|
|
120
118
|
? formatAsYMD(selectedDate)
|
|
121
119
|
: "Select Date" })] })) }), toggleStatus ? (activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: selectedStartDate, onSelect: (day) => {
|
|
122
120
|
onStartDateSelect?.(day || undefined);
|
|
@@ -167,7 +167,7 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
|
|
|
167
167
|
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
|
|
168
168
|
label: "",
|
|
169
169
|
value: "",
|
|
170
|
-
}, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-
|
|
170
|
+
}, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-10 left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md", children: searchItems.map((item, index) => {
|
|
171
171
|
const cleanedText = getCleanedText(item, removePattern);
|
|
172
172
|
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} cursor-pointer 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));
|
|
173
173
|
}) }) })) : null] }) }));
|