@agilant/toga-blox 1.0.139 → 1.0.141
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.
|
@@ -19,7 +19,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
|
|
|
19
19
|
case "text":
|
|
20
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, removePattern: removePattern, textHighlight: textHighlight, hasOperator: hasOperator, tooltipText: tooltipText }));
|
|
21
21
|
case "number":
|
|
22
|
-
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, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, inactiveColorBackground: inactiveColorBackground, inactiveColorBorder:
|
|
22
|
+
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, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: activeColorBorder }));
|
|
23
23
|
case "multiSelect":
|
|
24
24
|
return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor, hoverBgColor: hoverBgColor, clearTextHoverColor: clearTextHoverColor }));
|
|
25
25
|
case "date":
|
|
@@ -6,7 +6,6 @@ import Dropdown from "../Dropdown/Dropdown";
|
|
|
6
6
|
import ToggleButton from "../ToggleButton/ToggleButton";
|
|
7
7
|
import BaseButton from "../BaseButton";
|
|
8
8
|
import Badge from "../Badge/Badge";
|
|
9
|
-
import Text from "../Text";
|
|
10
9
|
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
11
10
|
import updateLocalStorage from "../../utils/updateLocalStorage";
|
|
12
11
|
import { getCleanedText } from "../../utils/getCleanedText";
|
|
@@ -343,20 +342,25 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
343
342
|
setIsDatePickerOpen(false);
|
|
344
343
|
setActiveInput(null);
|
|
345
344
|
}
|
|
346
|
-
}, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-
|
|
345
|
+
}, 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`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
|
|
347
346
|
? formatDateAsMonthDayYear(localDate)
|
|
348
|
-
: "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
347
|
+
: "mm/dd/yyyy"] }) }))] })) }), dayPicker, !searchItems?.length ? (_jsxs("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: ["here", searchItems.map((item, index) => {
|
|
348
|
+
const cleanedText = getCleanedText(item, removePattern);
|
|
349
|
+
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: () => {
|
|
350
|
+
const newSearchItems = searchItems.filter((it) => it !== item);
|
|
351
|
+
setSearchItems?.(newSearchItems);
|
|
352
|
+
setSearchCriteria?.((prev) => {
|
|
353
|
+
const filtered = prev.filter((crit) => crit.submittedSearchText !==
|
|
354
|
+
item);
|
|
355
|
+
updateLocalStorage(filtered, localStorageKey);
|
|
356
|
+
return filtered;
|
|
357
|
+
});
|
|
358
|
+
}, text: (() => {
|
|
359
|
+
const parts = cleanedText.split("-");
|
|
360
|
+
return parts.length === 3
|
|
361
|
+
? `${parts[1]}/${parts[2]}/${parts[0]}`
|
|
362
|
+
: cleanedText;
|
|
363
|
+
})(), 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));
|
|
364
|
+
})] })) : null, _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" })] })] }));
|
|
361
365
|
}
|
|
362
366
|
export default SearchDatePickerInput;
|
|
@@ -37,7 +37,7 @@ const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize,
|
|
|
37
37
|
// Background colors
|
|
38
38
|
activeColorBackground = "bg-red-600", inactiveColorBackground = "bg-red-200",
|
|
39
39
|
// Border colors (active is red and inactive is blue by default)
|
|
40
|
-
activeColorBorder = "border-
|
|
40
|
+
activeColorBorder = "border-orange-600", inactiveColorBorder = "border-red-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-purple-300", activeCircleColor = "peer-checked:after:bg-purple-500", }) => {
|
|
41
41
|
const handleToggle = () => {
|
|
42
42
|
const newValue = !initialStatus;
|
|
43
43
|
onClick(newValue);
|