@agilant/toga-blox 1.0.68 → 1.0.70
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.
- package/dist/components/Dropdown/Dropdown.js +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/SearchInput/SearchInput.js +2 -2
- package/dist/components/SearchInput/SearchInput.stories.js +1 -8
- package/dist/components/SearchInput/SearchInput.types.d.ts +2 -0
- package/dist/components/SearchInput/SearchInputDatePicker.js +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
|
|
|
9
9
|
}, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
|
|
10
10
|
const [showMenu, setShowMenu] = useState(false);
|
|
11
11
|
const toggleMenu = () => setShowMenu(!showMenu);
|
|
12
|
-
return (_jsxs("div", { className: `flex items-center justify-between relative min-w-
|
|
12
|
+
return (_jsxs("div", { className: `flex items-center justify-between relative min-w-40 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full s`, children: [_jsx("div", { className: `font-bold ${optionClasses} bg-white`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, "data-testid": "dropdown-icon", children: getFontAwesomeIcon(icon.name) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b bg-white ${action === selectedOption
|
|
13
13
|
? `{${selectedOptionBgColor} font-semibold}`
|
|
14
14
|
: `${optionHoverBgColor} text-black`}`, onClick: () => {
|
|
15
15
|
onOptionSelect(action);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SearchInputProps } from "./SearchInput.types";
|
|
2
|
-
declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default SearchInput;
|
|
@@ -8,7 +8,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
|
|
|
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, }) => {
|
|
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, }) => {
|
|
12
12
|
const containerRef = useRef(null);
|
|
13
13
|
const inputRef = useRef(null);
|
|
14
14
|
useEffect(() => {
|
|
@@ -23,7 +23,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
|
|
|
23
23
|
case "multiSelect":
|
|
24
24
|
return (_jsx(SearchDropdownInput, { options: dropdownOptions, isSearchable: true, placeholder: "Search", isMulti: true, hideSelectedOptions: true, closeMenuOnSelect: false, inputWidth: "w-full", inputTextSize: "text-sm", additionalClasses: "", customClassNames: {}, onChange: onChange, value: [], selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter }));
|
|
25
25
|
case "date":
|
|
26
|
-
return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter }));
|
|
26
|
+
return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent }));
|
|
27
27
|
}
|
|
28
28
|
})() }));
|
|
29
29
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import SearchInput from "./SearchInput";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
// Mock data for column
|
|
5
4
|
const mockColumn = {
|
|
6
5
|
id: "mockColumn",
|
|
7
6
|
Header: "Mock Column",
|
|
@@ -40,7 +39,6 @@ export default {
|
|
|
40
39
|
},
|
|
41
40
|
parameters: { layout: "centered" },
|
|
42
41
|
};
|
|
43
|
-
// Updated Template with state for searchCriteria and editingHeader
|
|
44
42
|
const Template = (args) => {
|
|
45
43
|
const [selectedOption, setSelectedOption] = useState(args.selectedDropdownOption);
|
|
46
44
|
const [searchItems, setSearchItems] = useState([]);
|
|
@@ -48,26 +46,21 @@ const Template = (args) => {
|
|
|
48
46
|
const [minValue, setMinValue] = useState(undefined);
|
|
49
47
|
const [maxValue, setMaxValue] = useState(undefined);
|
|
50
48
|
const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
|
|
51
|
-
// NEW: State for date control
|
|
52
49
|
const [selectedDate, setSelectedDate] = useState(args.selectedDate);
|
|
53
50
|
const [selectedStartDate, setSelectedStartDate] = useState(args.selectedStartDate);
|
|
54
51
|
const [selectedEndDate, setSelectedEndDate] = useState(args.selectedEndDate);
|
|
55
|
-
// NEW: State for searchCriteria and editingHeader.
|
|
56
52
|
// Set editingHeader to 0 so that the search input renders.
|
|
57
53
|
const [searchCriteria, setSearchCriteria] = useState([]);
|
|
58
54
|
const [editingHeader, setEditingHeader] = useState(0);
|
|
59
55
|
// Log current state to verify updates.
|
|
60
56
|
console.log("Template render: editingHeader =", editingHeader);
|
|
61
57
|
console.log("Template render: searchCriteria =", searchCriteria);
|
|
62
|
-
// Handle onChange from the multi-select.
|
|
63
58
|
const handleOnChange = (newSelected) => {
|
|
64
59
|
setSelectedValue(newSelected);
|
|
65
60
|
args.onChange?.(newSelected);
|
|
66
61
|
console.log("Selected items:", newSelected);
|
|
67
62
|
};
|
|
68
|
-
return (_jsx(SearchInput, { ...args, column: mockColumn, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader,
|
|
69
|
-
// Optionally pass in handleFilter, or use the default from args.
|
|
70
|
-
handleFilter: args.handleFilter }));
|
|
63
|
+
return (_jsx(SearchInput, { ...args, column: mockColumn, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, handleFilter: args.handleFilter }));
|
|
71
64
|
};
|
|
72
65
|
export const Default = Template.bind({});
|
|
73
66
|
Default.args = {
|
|
@@ -34,6 +34,8 @@ export type SearchInputProps<T extends object> = {
|
|
|
34
34
|
setSearchCriteria: any;
|
|
35
35
|
pillColor?: string;
|
|
36
36
|
firstIconClasses?: string;
|
|
37
|
+
dataPickerThemeColor?: string;
|
|
38
|
+
dataPickerThemeColorAccent?: string;
|
|
37
39
|
};
|
|
38
40
|
export interface OptionType {
|
|
39
41
|
uuid: string;
|
|
@@ -52,7 +52,7 @@ function SearchDatePickerInput({ textHighlight = "text-sky-700", dropdownOptions
|
|
|
52
52
|
? selectedEndDate.toLocaleDateString()
|
|
53
53
|
: "End Date" })] })) : (
|
|
54
54
|
// Non-toggle mode: Dropdown and a single date input
|
|
55
|
-
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: () => setIsDatePickerOpen((prev) => !prev), className: "border-2 px-3 py-2 flex-[2] h-10 text-left", children: selectedDate
|
|
55
|
+
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: () => setIsDatePickerOpen((prev) => !prev), className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
|
|
56
56
|
? selectedDate.toLocaleDateString()
|
|
57
57
|
: "Select Date" })] })) }), toggleStatus
|
|
58
58
|
? 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: (date) => {
|