@agilant/toga-blox 1.0.146 → 1.0.148
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(() => {
|
|
@@ -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: activeColorBorder }));
|
|
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: inactiveColorBorder, activeColorBorder: 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":
|
|
@@ -346,21 +346,21 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
|
|
|
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
351
|
: "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", 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
358
|
: "mm/dd/yyyy"] }))] })) : (_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/yyy", 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
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
366
|
const cleanedText = getCleanedText(item, removePattern);
|
|
@@ -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-blue-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);
|