@agilant/toga-blox 1.0.147 → 1.0.149
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,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
|
|
|
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, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor = "peer-checked:after:bg-purple-500", placeHolderColor = "placeholder:text-green-500", buttonPlaceHolderTextColor = "text-
|
|
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 = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor = "peer-checked:after:bg-purple-500", placeHolderColor = "placeholder:text-green-500", buttonPlaceHolderTextColor = "text-orange-500", inactiveColorBackground = "bg-purple-300", inactiveColorBorder = "border-purple-300", activeColorBorder = "border-orange-900", }) => {
|
|
12
12
|
const containerRef = useRef(null);
|
|
13
13
|
const inputRef = useRef(null);
|
|
14
14
|
useEffect(() => {
|
|
@@ -341,42 +341,42 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
341
341
|
setIsDatePickerOpen(false);
|
|
342
342
|
setActiveInput(null);
|
|
343
343
|
} })] })) }));
|
|
344
|
-
return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4 rounded", children: [_jsx("div", { className: "flex items-center justify-center h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [activeInput === "start" ? (_jsx(Input, { type: "text", value: startDateInputValue, onChange: handleStartDateInputChange, placeholder: "mm/dd/
|
|
344
|
+
return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4 rounded", children: [_jsx("div", { className: "flex items-center justify-center h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [activeInput === "start" ? (_jsx(Input, { type: "text", value: startDateInputValue, onChange: handleStartDateInputChange, placeholder: "mm/dd/yyyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
|
|
345
345
|
if (e.key === "Enter") {
|
|
346
346
|
setIsDatePickerOpen(false);
|
|
347
347
|
setActiveInput(null);
|
|
348
348
|
}
|
|
349
|
-
}, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded `, children: [_jsx("span", { className:
|
|
349
|
+
}, firstIcon: _jsx("span", { className: `${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded ", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded `, children: [_jsx("span", { className: `pr-2 ${buttonPlaceHolderTextColor}`, children: _jsx("span", { className: `${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }) }), localStartDate
|
|
350
350
|
? formatDateAsMonthDayYear(localStartDate)
|
|
351
|
-
: "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/
|
|
351
|
+
: "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
|
|
352
352
|
if (e.key === "Enter") {
|
|
353
353
|
setIsDatePickerOpen(false);
|
|
354
354
|
setActiveInput(null);
|
|
355
355
|
}
|
|
356
|
-
}, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded`, children: [_jsx("span", { className:
|
|
356
|
+
}, firstIcon: _jsx("span", { className: `${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded`, children: [_jsx("span", { className: `pr-2 ${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }), localEndDate
|
|
357
357
|
? formatDateAsMonthDayYear(localEndDate)
|
|
358
|
-
: "mm/dd/
|
|
358
|
+
: "mm/dd/yyyyy"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center ", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto min-w-44 max-w-44 rounded-l", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), activeInput === "single" ? (_jsx(_Fragment, { children: _jsx(Input, { type: "text", value: dateInputValue, onChange: handleSingleDateInputChange, placeholder: "mm/dd/yyyy", onKeyDown: (e) => {
|
|
359
359
|
if (e.key === "Enter") {
|
|
360
360
|
setIsDatePickerOpen(false);
|
|
361
361
|
setActiveInput(null);
|
|
362
362
|
}
|
|
363
|
-
}, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52 rounded-r`, children: [_jsx("span", { className:
|
|
363
|
+
}, firstIcon: _jsx("span", { className: `${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }), required: false, additionalClasses: "border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52 rounded-r`, children: [_jsx("span", { className: `pr-2 ${buttonPlaceHolderTextColor}`, children: getFontAwesomeIcon("calendar", "regular") }), localDate
|
|
364
364
|
? formatDateAsMonthDayYear(localDate)
|
|
365
|
-
: "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
365
|
+
: "mm/dd/yyyy"] }) }))] })) }), dayPicker, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "py-1 border-t", children: _jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
|
|
366
|
+
const cleanedText = getCleanedText(item, removePattern);
|
|
367
|
+
const formattedDate = formatCleanedDateString(cleanedText);
|
|
368
|
+
return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => {
|
|
369
|
+
const newSearchItems = searchItems.filter((it) => it !== item);
|
|
370
|
+
setSearchItems?.(newSearchItems);
|
|
371
|
+
setSearchCriteria?.((prev) => {
|
|
372
|
+
const filtered = prev.filter((crit) => crit.submittedSearchText !==
|
|
373
|
+
item);
|
|
374
|
+
updateLocalStorage(filtered, localStorageKey);
|
|
375
|
+
return filtered;
|
|
376
|
+
});
|
|
377
|
+
}, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: formattedDate
|
|
378
|
+
? formattedDate
|
|
379
|
+
: "mm/dd/yyyy" }), 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));
|
|
380
|
+
}) }) })) : null] }));
|
|
381
381
|
}
|
|
382
382
|
export default SearchDatePickerInput;
|
|
@@ -167,9 +167,9 @@ 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 min-w-32xw rounded-md shadow-md top-12", 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 flex items-center ", placeholder: "Amount", placeHolderColor: placeHolderColor, hasIcons: true, iconPosition: "both", firstIcon: numberTypeIcon?.icon ? (_jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) })) : null, firstIconTop: firstIconTop })] })) }), searchItems?.length ? (_jsx("div", { className: "py-
|
|
170
|
+
}, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", 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 flex items-center ", placeholder: "Amount", placeHolderColor: placeHolderColor, hasIcons: true, iconPosition: "both", firstIcon: numberTypeIcon?.icon ? (_jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) })) : null, firstIconTop: firstIconTop })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-2 px-4 ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, activeCircleColor: activeCircleColor, inactiveCircleColor: inactiveCircleColor }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "py-1 border-t", 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
|
-
}) }) })) : null
|
|
173
|
+
}) }) })) : null] }) }));
|
|
174
174
|
};
|
|
175
175
|
export default SearchNumberInput;
|