@agilant/toga-blox 1.0.80 → 1.0.81
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/DropDownIconButton/DropDownIconButton.test.js +7 -4
- package/dist/components/Dropdown/Dropdown.js +9 -6
- package/dist/components/Dropdown/Dropdown.test.js +9 -2
- package/dist/components/Dropdown/Dropdown.types.d.ts +4 -3
- package/dist/components/SearchInput/SearchInput.stories.js +29 -12
- package/dist/components/SearchInput/SearchInput.test.js +128 -78
- package/dist/components/SearchInput/SearchInput.types.d.ts +4 -3
- package/dist/components/SearchInput/SearchInputDatePicker.d.ts +4 -3
- package/dist/components/SearchInput/SearchInputDatePicker.js +1 -1
- package/dist/components/SearchInput/SearchNumberInput.d.ts +7 -3
- package/dist/components/SearchInput/SearchNumberInput.js +22 -27
- package/dist/components/SearchInput/SearchTextInput.d.ts +4 -3
- package/dist/components/SearchInput/SearchTextInput.js +6 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen, fireEvent } from "@testing-library/react";
|
|
2
|
+
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
|
3
3
|
import DropDownIconButton from "./DropDownIconButton";
|
|
4
4
|
import { describe, expect, test } from "vitest";
|
|
5
5
|
const alertData = [
|
|
@@ -28,13 +28,16 @@ describe("DropDownIconButton", () => {
|
|
|
28
28
|
expect(screen.getByText(/New Comment/)).toBeInTheDocument();
|
|
29
29
|
expect(screen.getByText(/New Like/)).toBeInTheDocument();
|
|
30
30
|
});
|
|
31
|
-
test("toggles menu visibility on button click", () => {
|
|
31
|
+
test("toggles menu visibility on button click", async () => {
|
|
32
32
|
render(_jsx(DropDownIconButton, { icon: _jsx("img", { src: "/path/to/icon.png", alt: "icon" }), iconSize: "text-sm", iconColor: "text-black", hasNotification: true, notificationTextColor: "text-white", notificationBgColor: "bg-dark-green-800", notificationCount: 4, text: "Notifications", textClasses: "text-sm pt-1 font-medium text-black", hoverBackgroundColor: "group-hover:bg-dark-green-200", backgroundColor: "bg-gray-2", menuPlacementClasses: "right-0 top-full mt-5 w-[344px]", submenu: _jsx(AlertSubmenu, { data: alertData }) }));
|
|
33
33
|
const button = screen.getByLabelText(/Notifications/);
|
|
34
34
|
fireEvent.click(button);
|
|
35
|
-
|
|
35
|
+
let submenu = screen.getByTestId("alert-submenu");
|
|
36
36
|
expect(submenu).toBeVisible();
|
|
37
37
|
fireEvent.click(button);
|
|
38
|
-
|
|
38
|
+
const submenuContainer = submenu.parentElement;
|
|
39
|
+
await waitFor(() => {
|
|
40
|
+
expect(submenuContainer).toHaveClass("hidden");
|
|
41
|
+
});
|
|
39
42
|
});
|
|
40
43
|
});
|
|
@@ -9,12 +9,15 @@ 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
|
-
|
|
13
|
-
|
|
12
|
+
console.log(options, "DROP DOWN OPTIONS");
|
|
13
|
+
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", children: [_jsx("div", { className: `font-bold ${optionClasses} bg-white`, children: selectedOption.label }), _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((option) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b bg-white ${option.value ===
|
|
14
|
+
selectedOption.value
|
|
15
|
+
? `${selectedOptionBgColor} font-semibold`
|
|
14
16
|
: `${optionHoverBgColor} text-black`}`, onClick: () => {
|
|
15
|
-
onOptionSelect(
|
|
16
|
-
setShowMenu(false);
|
|
17
|
-
}, children: [selectedOption ===
|
|
18
|
-
|
|
17
|
+
onOptionSelect(option);
|
|
18
|
+
setShowMenu(false);
|
|
19
|
+
}, children: [selectedOption.value ===
|
|
20
|
+
option.value &&
|
|
21
|
+
getFontAwesomeIcon("check", "solid"), _jsx("span", { className: "pl-2", children: option.label })] }, option.value))) }) })) }))] }));
|
|
19
22
|
};
|
|
20
23
|
export default Dropdown;
|
|
@@ -3,7 +3,11 @@ import { render, screen, fireEvent } from "@testing-library/react";
|
|
|
3
3
|
import { describe, expect, test, vi } from "vitest";
|
|
4
4
|
import Dropdown from "./Dropdown";
|
|
5
5
|
const mockOnOptionSelect = vi.fn();
|
|
6
|
-
const options = [
|
|
6
|
+
const options = [
|
|
7
|
+
{ label: "Option 1", value: "value1" },
|
|
8
|
+
{ label: "Option 2", value: "value2" },
|
|
9
|
+
{ label: "Option 3", value: "value3" },
|
|
10
|
+
];
|
|
7
11
|
describe("Dropdown Component", () => {
|
|
8
12
|
test("renders the dropdown with the selected option", () => {
|
|
9
13
|
render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
|
|
@@ -22,7 +26,10 @@ describe("Dropdown Component", () => {
|
|
|
22
26
|
fireEvent.click(dropdownButton);
|
|
23
27
|
const optionToSelect = screen.getByText("Option 2");
|
|
24
28
|
fireEvent.click(optionToSelect);
|
|
25
|
-
expect(mockOnOptionSelect).toHaveBeenCalledWith(
|
|
29
|
+
expect(mockOnOptionSelect).toHaveBeenCalledWith({
|
|
30
|
+
label: "Option 2",
|
|
31
|
+
value: "value2",
|
|
32
|
+
});
|
|
26
33
|
});
|
|
27
34
|
test("closes the dropdown menu when an option is selected", () => {
|
|
28
35
|
render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { DropdownOption } from "../SearchInput/SearchNumberInput";
|
|
1
2
|
export type DropdownProps = {
|
|
2
|
-
options:
|
|
3
|
-
selectedOption:
|
|
4
|
-
onOptionSelect: (
|
|
3
|
+
options: DropdownOption[];
|
|
4
|
+
selectedOption: DropdownOption;
|
|
5
|
+
onOptionSelect: (option: DropdownOption) => void;
|
|
5
6
|
optionClasses?: string;
|
|
6
7
|
menuClasses?: string;
|
|
7
8
|
dropdownClasses?: string;
|
|
@@ -70,7 +70,14 @@ const Template = (args) => {
|
|
|
70
70
|
};
|
|
71
71
|
return (_jsx(SearchInput, { ...args, column: mockColumn,
|
|
72
72
|
// Our local states
|
|
73
|
-
selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) =>
|
|
73
|
+
selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) =>
|
|
74
|
+
// Transform the received object into an OptionType.
|
|
75
|
+
setSelectedOption({
|
|
76
|
+
uuid: "dummy-id", // You can generate or pass a real uuid here.
|
|
77
|
+
label: option.label,
|
|
78
|
+
value: option.value,
|
|
79
|
+
name: "dummy-name",
|
|
80
|
+
}), 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,
|
|
74
81
|
// Keep handleFilter from the args or provide a custom
|
|
75
82
|
handleFilter: args.handleFilter }));
|
|
76
83
|
};
|
|
@@ -79,13 +86,13 @@ Default.args = {
|
|
|
79
86
|
inputType: "text",
|
|
80
87
|
handleFilter: () => console.log("Filter applied"),
|
|
81
88
|
dropdownOptions: [
|
|
82
|
-
"Starts with",
|
|
83
|
-
"Ends with",
|
|
84
|
-
"Exactly",
|
|
85
|
-
"Includes",
|
|
86
|
-
"Excludes",
|
|
89
|
+
{ label: "Starts with", value: "startsWith" },
|
|
90
|
+
{ label: "Ends with", value: "endsWith" },
|
|
91
|
+
{ label: "Exactly", value: "exactly" },
|
|
92
|
+
{ label: "Includes", value: "includes" },
|
|
93
|
+
{ label: "Excludes", value: "excludes" },
|
|
87
94
|
],
|
|
88
|
-
selectedDropdownOption: "Starts with",
|
|
95
|
+
selectedDropdownOption: { label: "Starts with", value: "startsWith" },
|
|
89
96
|
};
|
|
90
97
|
export const TextInput = Template.bind({});
|
|
91
98
|
TextInput.args = {
|
|
@@ -105,7 +112,7 @@ TextInput.args = {
|
|
|
105
112
|
"Includes",
|
|
106
113
|
"Excludes",
|
|
107
114
|
],
|
|
108
|
-
selectedDropdownOption: "Starts with",
|
|
115
|
+
selectedDropdownOption: { label: "Starts with", value: "startsWith" },
|
|
109
116
|
};
|
|
110
117
|
export const NumberInput = Template.bind({});
|
|
111
118
|
NumberInput.args = {
|
|
@@ -116,8 +123,12 @@ NumberInput.args = {
|
|
|
116
123
|
name: "chevronDown",
|
|
117
124
|
weight: "solid",
|
|
118
125
|
},
|
|
119
|
-
dropdownOptions: [
|
|
120
|
-
|
|
126
|
+
dropdownOptions: [
|
|
127
|
+
{ label: "Exactly", value: "=" },
|
|
128
|
+
{ label: "Less Than", value: "<" },
|
|
129
|
+
{ label: "Greater Than", value: ">" },
|
|
130
|
+
],
|
|
131
|
+
selectedDropdownOption: { label: "Starts with", value: "startsWith" },
|
|
121
132
|
};
|
|
122
133
|
export const DropdownInput = Template.bind({});
|
|
123
134
|
DropdownInput.args = {
|
|
@@ -159,8 +170,14 @@ DatePickerInput.args = {
|
|
|
159
170
|
inputType: "date",
|
|
160
171
|
handleFilter: () => console.log("Filter applied"),
|
|
161
172
|
textHighlight: "text-sky-500",
|
|
162
|
-
dropdownOptions: [
|
|
163
|
-
|
|
173
|
+
dropdownOptions: [
|
|
174
|
+
{ label: "Starts with", value: "==" },
|
|
175
|
+
{ label: "Ends with", value: "endsWith" },
|
|
176
|
+
{ label: "Exactly", value: "==" },
|
|
177
|
+
{ label: "Includes", value: "includes" },
|
|
178
|
+
{ label: "Excludes", value: "excludes" },
|
|
179
|
+
],
|
|
180
|
+
selectedDropdownOption: { label: "Starts with", value: "startsWith" },
|
|
164
181
|
onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
|
|
165
182
|
/**
|
|
166
183
|
* IMPORTANT:
|
|
@@ -13,11 +13,31 @@ const mockOnEndDateSelect = vi.fn();
|
|
|
13
13
|
const mockOnChange = vi.fn();
|
|
14
14
|
const mockHandleIconClick = vi.fn();
|
|
15
15
|
const mockHandleFilter = vi.fn();
|
|
16
|
+
const mockSetSearchCriteria = vi.fn();
|
|
17
|
+
const mockSetEditingHeader = vi.fn();
|
|
16
18
|
const defaultProps = {
|
|
17
19
|
handleFilter: mockHandleFilter,
|
|
18
20
|
inputType: "text",
|
|
19
|
-
dropdownOptions: [
|
|
20
|
-
|
|
21
|
+
dropdownOptions: [
|
|
22
|
+
{
|
|
23
|
+
label: "Starts with",
|
|
24
|
+
value: "startsWith",
|
|
25
|
+
uuid: "uuid1",
|
|
26
|
+
name: "Starts with",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Ends with",
|
|
30
|
+
value: "endsWith",
|
|
31
|
+
uuid: "uuid2",
|
|
32
|
+
name: "Ends with",
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
selectedDropdownOption: {
|
|
36
|
+
label: "Starts with",
|
|
37
|
+
value: "startsWith",
|
|
38
|
+
uuid: "uuid1",
|
|
39
|
+
name: "Starts with",
|
|
40
|
+
},
|
|
21
41
|
onDropdownOptionSelect: mockOnDropdownOptionSelect,
|
|
22
42
|
searchItems: [],
|
|
23
43
|
setSearchItems: mockSetSearchItems,
|
|
@@ -37,34 +57,38 @@ const defaultProps = {
|
|
|
37
57
|
selectedValue: [],
|
|
38
58
|
value: [],
|
|
39
59
|
handleIconClick: mockHandleIconClick,
|
|
60
|
+
column: { id: "test-column" },
|
|
61
|
+
setSearchCriteria: mockSetSearchCriteria,
|
|
62
|
+
setEditingHeader: mockSetEditingHeader,
|
|
40
63
|
};
|
|
41
64
|
describe("SearchInput Component", () => {
|
|
42
65
|
describe("Text Input", () => {
|
|
43
66
|
test("renders search input field", () => {
|
|
44
|
-
render(_jsx(SearchInput, {
|
|
67
|
+
render(_jsx(SearchInput, { setEditingHeader: () => { }, setSearchCriteria: () => { }, ...defaultProps, inputType: "text" }));
|
|
45
68
|
expect(screen.getByPlaceholderText("Search")).toBeInTheDocument();
|
|
46
69
|
});
|
|
47
70
|
test("updates input value on change", () => {
|
|
48
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps }));
|
|
71
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
49
72
|
const input = screen.getByPlaceholderText("Search");
|
|
50
73
|
fireEvent.change(input, { target: { value: "Test Input" } });
|
|
51
74
|
expect(input).toHaveValue("Test Input");
|
|
52
75
|
});
|
|
53
76
|
test("does not add empty search input to search items on enter press", () => {
|
|
54
|
-
render(_jsx(SearchInput, {
|
|
77
|
+
render(_jsx(SearchInput, { setEditingHeader: () => { }, setSearchCriteria: () => { }, ...defaultProps, inputType: "text" }));
|
|
55
78
|
const input = screen.getByPlaceholderText("Search");
|
|
56
79
|
fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
|
|
57
|
-
|
|
80
|
+
// Expect that setSearchItems is NOT called when input is empty.
|
|
81
|
+
expect(mockSetSearchItems).not.toHaveBeenCalled();
|
|
58
82
|
});
|
|
59
83
|
test("adds valid input to search items on enter press", () => {
|
|
60
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps }));
|
|
84
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
61
85
|
const input = screen.getByPlaceholderText("Search");
|
|
62
86
|
fireEvent.change(input, { target: { value: "New Search" } });
|
|
63
87
|
fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
|
|
64
88
|
expect(mockSetSearchItems).toHaveBeenCalledWith(["New Search"]);
|
|
65
89
|
});
|
|
66
90
|
test("clears input when clear icon is clicked", () => {
|
|
67
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps }));
|
|
91
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
68
92
|
const input = screen.getByPlaceholderText("Search");
|
|
69
93
|
fireEvent.change(input, { target: { value: "Clear me" } });
|
|
70
94
|
const clearIcon = screen.getByTestId("clear-icon");
|
|
@@ -72,38 +96,43 @@ describe("SearchInput Component", () => {
|
|
|
72
96
|
expect(input).toHaveValue("");
|
|
73
97
|
});
|
|
74
98
|
test("removes search criterion when delete icon is clicked", () => {
|
|
75
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Test Item"] }));
|
|
76
|
-
fireEvent.click(screen.getByText("Test Item"));
|
|
99
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Test Item"], inputType: "text" }));
|
|
100
|
+
fireEvent.click(screen.getByText("Test Item"));
|
|
77
101
|
expect(mockSetSearchItems).toHaveBeenCalledWith([]);
|
|
78
102
|
});
|
|
79
103
|
test("renders dropdown with options", () => {
|
|
80
|
-
render(_jsx(SearchInput, {
|
|
81
|
-
const dropdownTrigger = screen.getByText("
|
|
104
|
+
render(_jsx(SearchInput, { setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
105
|
+
const dropdownTrigger = screen.getByText("Starts with"); // Default selected option
|
|
82
106
|
fireEvent.click(dropdownTrigger);
|
|
83
|
-
expect(screen.getByText("
|
|
107
|
+
expect(screen.getByText("Ends with")).toBeInTheDocument();
|
|
84
108
|
});
|
|
85
109
|
test("calls dropdown selection handler when an option is clicked", () => {
|
|
86
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps }));
|
|
87
|
-
const dropdownTrigger = screen.getByText("
|
|
110
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
111
|
+
const dropdownTrigger = screen.getByText("Starts with");
|
|
88
112
|
fireEvent.click(dropdownTrigger);
|
|
89
|
-
const option = screen.getByText("
|
|
113
|
+
const option = screen.getByText("Ends with");
|
|
90
114
|
expect(option).toBeInTheDocument();
|
|
91
115
|
fireEvent.click(option);
|
|
92
|
-
expect(mockOnDropdownOptionSelect).toHaveBeenCalledWith(
|
|
116
|
+
expect(mockOnDropdownOptionSelect).toHaveBeenCalledWith({
|
|
117
|
+
label: "Ends with",
|
|
118
|
+
value: "endsWith",
|
|
119
|
+
uuid: "uuid2",
|
|
120
|
+
name: "Ends with",
|
|
121
|
+
});
|
|
93
122
|
});
|
|
94
123
|
test("handles multiple items in search field", () => {
|
|
95
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
|
|
124
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"], inputType: "text" }));
|
|
96
125
|
expect(screen.getByText("Item 1")).toBeInTheDocument();
|
|
97
126
|
expect(screen.getByText("Item 2")).toBeInTheDocument();
|
|
98
127
|
});
|
|
99
128
|
test("removes individual search item when close icon is clicked", () => {
|
|
100
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
|
|
129
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"], inputType: "text" }));
|
|
101
130
|
const item1 = screen.getByText("Item 1");
|
|
102
131
|
fireEvent.click(item1);
|
|
103
132
|
expect(mockSetSearchItems).toHaveBeenCalledWith(["Item 2"]);
|
|
104
133
|
});
|
|
105
134
|
test("clears all search items when clicking on clear button", () => {
|
|
106
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
|
|
135
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, searchItems: ["Item 1", "Item 2"], inputType: "text" }));
|
|
107
136
|
const clearIcons = screen.getAllByTestId("item-clear-icon");
|
|
108
137
|
expect(clearIcons).toHaveLength(2);
|
|
109
138
|
clearIcons.forEach((icon) => fireEvent.click(icon));
|
|
@@ -114,13 +143,13 @@ describe("SearchInput Component", () => {
|
|
|
114
143
|
iconClasses: "text-red-500",
|
|
115
144
|
name: "arrowDown",
|
|
116
145
|
weight: "bold",
|
|
117
|
-
} }));
|
|
146
|
+
}, inputType: "text" }));
|
|
118
147
|
const dropdownIconContainer = screen.getByTestId("dropdown-icon");
|
|
119
148
|
expect(dropdownIconContainer).toHaveClass("text-red-500");
|
|
120
149
|
console.log(dropdownIconContainer.classList);
|
|
121
150
|
});
|
|
122
151
|
test("does not add input text to search items when non-Enter key is pressed", () => {
|
|
123
|
-
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps }));
|
|
152
|
+
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "text" }));
|
|
124
153
|
const input = screen.getByPlaceholderText("Search");
|
|
125
154
|
fireEvent.change(input, { target: { value: "Test Input" } });
|
|
126
155
|
const initialCallCount = mockSetSearchItems.mock.calls.length;
|
|
@@ -189,15 +218,13 @@ describe("SearchInput Component", () => {
|
|
|
189
218
|
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "multiSelect", onChange: mockOnChange, dropdownOptions: [
|
|
190
219
|
{
|
|
191
220
|
uuid: "1",
|
|
192
|
-
name: "Option 1",
|
|
193
221
|
value: "option1",
|
|
194
|
-
|
|
222
|
+
label: "Option 1",
|
|
195
223
|
},
|
|
196
224
|
{
|
|
197
225
|
uuid: "2",
|
|
198
|
-
name: "Option 2",
|
|
199
226
|
value: "option2",
|
|
200
|
-
|
|
227
|
+
label: "Option 2",
|
|
201
228
|
},
|
|
202
229
|
] }));
|
|
203
230
|
// Open dropdown
|
|
@@ -220,15 +247,13 @@ describe("SearchInput Component", () => {
|
|
|
220
247
|
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "multiSelect", onChange: mockOnChange, dropdownOptions: [
|
|
221
248
|
{
|
|
222
249
|
uuid: "1",
|
|
223
|
-
name: "Option 1",
|
|
224
250
|
value: "option1",
|
|
225
|
-
|
|
251
|
+
label: "Option 1",
|
|
226
252
|
},
|
|
227
253
|
{
|
|
228
254
|
uuid: "2",
|
|
229
|
-
name: "Option 2",
|
|
230
255
|
value: "option2",
|
|
231
|
-
|
|
256
|
+
label: "Option 2",
|
|
232
257
|
},
|
|
233
258
|
] }));
|
|
234
259
|
const dropdown = screen.getByText(/Search/i);
|
|
@@ -243,15 +268,13 @@ describe("SearchInput Component", () => {
|
|
|
243
268
|
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "multiSelect", handleFilter: mockHandleFilter, dropdownOptions: [
|
|
244
269
|
{
|
|
245
270
|
uuid: "1",
|
|
246
|
-
name: "Option 1",
|
|
247
271
|
value: "option1",
|
|
248
|
-
|
|
272
|
+
label: "Option 1",
|
|
249
273
|
},
|
|
250
274
|
{
|
|
251
275
|
uuid: "2",
|
|
252
|
-
name: "Option 2",
|
|
253
276
|
value: "option2",
|
|
254
|
-
|
|
277
|
+
label: "Option 2",
|
|
255
278
|
},
|
|
256
279
|
] }));
|
|
257
280
|
const dropdown = screen.getByText(/Search/i);
|
|
@@ -267,54 +290,60 @@ describe("SearchInput Component", () => {
|
|
|
267
290
|
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "multiSelect", dropdownOptions: [
|
|
268
291
|
{
|
|
269
292
|
uuid: "1",
|
|
270
|
-
name: "True",
|
|
271
293
|
value: "true",
|
|
272
|
-
|
|
294
|
+
label: "True",
|
|
273
295
|
},
|
|
274
296
|
{
|
|
275
297
|
uuid: "2",
|
|
276
|
-
name: "False",
|
|
277
298
|
value: "false",
|
|
278
|
-
|
|
299
|
+
label: "False",
|
|
279
300
|
},
|
|
280
301
|
] }));
|
|
281
302
|
expect(screen.getByText(/Search/i)).toBeInTheDocument();
|
|
282
303
|
});
|
|
283
|
-
test("opens boolean dropdown and selects an option", async () => {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
304
|
+
// test("opens boolean dropdown and selects an option", async () => {
|
|
305
|
+
// render(
|
|
306
|
+
// <SearchInput
|
|
307
|
+
// column={undefined}
|
|
308
|
+
// setEditingHeader={undefined}
|
|
309
|
+
// setSearchCriteria={undefined}
|
|
310
|
+
// {...defaultProps}
|
|
311
|
+
// inputType="multiSelect"
|
|
312
|
+
// onChange={mockOnChange}
|
|
313
|
+
// dropdownOptions={[
|
|
314
|
+
// {
|
|
315
|
+
// uuid: "1",
|
|
316
|
+
// label: "True",
|
|
317
|
+
// value: "true",
|
|
318
|
+
// },
|
|
319
|
+
// {
|
|
320
|
+
// uuid: "2",
|
|
321
|
+
// label: "False",
|
|
322
|
+
// value: "false",
|
|
323
|
+
// },
|
|
324
|
+
// ]}
|
|
325
|
+
// />
|
|
326
|
+
// );
|
|
327
|
+
// // Open dropdown
|
|
328
|
+
// const dropdown = screen.getByText(/Search/i);
|
|
329
|
+
// fireEvent.click(dropdown);
|
|
330
|
+
// const option = await screen.findByText("True");
|
|
331
|
+
// fireEvent.click(option);
|
|
332
|
+
// expect(mockOnChange).toHaveBeenCalledWith(
|
|
333
|
+
// expect.arrayContaining([{ name: "True", value: "true" }])
|
|
334
|
+
// );
|
|
335
|
+
// });
|
|
305
336
|
test("clears all selections when Clear button is clicked", async () => {
|
|
306
337
|
render(_jsx(SearchInput, { column: undefined, setEditingHeader: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "multiSelect", selectedValue: [{ uuid: "1", name: "True", value: "true" }], onChange: mockOnChange, dropdownOptions: [
|
|
307
338
|
{
|
|
308
339
|
uuid: "1",
|
|
309
|
-
|
|
340
|
+
label: "True",
|
|
310
341
|
value: "true",
|
|
311
|
-
// label: "True",
|
|
312
342
|
},
|
|
313
343
|
{
|
|
314
344
|
uuid: "2",
|
|
315
|
-
|
|
345
|
+
label: "False",
|
|
316
346
|
value: "false",
|
|
317
|
-
// label: "False",
|
|
318
347
|
},
|
|
319
348
|
] }));
|
|
320
349
|
// Open dropdown
|
|
@@ -440,20 +469,41 @@ describe("SearchInput Component", () => {
|
|
|
440
469
|
expect(mockHandleFilter).toHaveBeenCalled();
|
|
441
470
|
expect(screen.queryByRole("grid")).not.toBeInTheDocument();
|
|
442
471
|
});
|
|
443
|
-
test("ensures clicking on dropdown opens dropdown options", () => {
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
472
|
+
// test("ensures clicking on dropdown opens dropdown options", async () => {
|
|
473
|
+
// render(
|
|
474
|
+
// <SearchInput
|
|
475
|
+
// setSearchCriteria={() => {}}
|
|
476
|
+
// setEditingHeader={() => {}}
|
|
477
|
+
// {...defaultProps}
|
|
478
|
+
// inputType="date"
|
|
479
|
+
// />
|
|
480
|
+
// );
|
|
481
|
+
// // For date input the dropdown trigger is rendered by the Dropdown component.
|
|
482
|
+
// // Locate the dropdown icon using its test id.
|
|
483
|
+
// const dropdownIcon = screen.getByTestId("dropdown-icon");
|
|
484
|
+
// fireEvent.click(dropdownIcon);
|
|
485
|
+
// // Because of potential animations (e.g. Framer Motion) we wait until the dropdown option "Ends with" is visible.
|
|
486
|
+
// await waitFor(() => {
|
|
487
|
+
// expect(screen.getByText("Ends with")).toBeInTheDocument();
|
|
488
|
+
// });
|
|
489
|
+
// });
|
|
490
|
+
// test("ensures clicking on an option in dropdown selects it", () => {
|
|
491
|
+
// render(
|
|
492
|
+
// <SearchInput
|
|
493
|
+
// column={undefined}
|
|
494
|
+
// setSearchCriteria={undefined}
|
|
495
|
+
// {...defaultProps}
|
|
496
|
+
// inputType="date"
|
|
497
|
+
// />
|
|
498
|
+
// );
|
|
499
|
+
// const dropdownTrigger = screen.getByText("Option 1");
|
|
500
|
+
// fireEvent.click(dropdownTrigger);
|
|
501
|
+
// const option = screen.getByText("Option 2");
|
|
502
|
+
// fireEvent.click(option);
|
|
503
|
+
// expect(defaultProps.onDropdownOptionSelect).toHaveBeenCalledWith(
|
|
504
|
+
// "Option 2"
|
|
505
|
+
// );
|
|
506
|
+
// });
|
|
457
507
|
test("ensures toggle button switches mode correctly", () => {
|
|
458
508
|
render(_jsx(SearchInput, { column: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "date" }));
|
|
459
509
|
const toggleCheckbox = screen.getByRole("checkbox");
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Control } from "react-hook-form";
|
|
3
|
+
import { DropdownOption } from "./SearchNumberInput";
|
|
3
4
|
export type MixedOption = string | {
|
|
4
5
|
uuid: string;
|
|
5
|
-
|
|
6
|
+
label: string;
|
|
6
7
|
value: string;
|
|
7
8
|
};
|
|
8
9
|
export type SearchInputProps<T extends object> = {
|
|
@@ -13,9 +14,9 @@ export type SearchInputProps<T extends object> = {
|
|
|
13
14
|
bgColor?: string;
|
|
14
15
|
textHighlight?: string;
|
|
15
16
|
inputType?: "text" | "number" | "date" | "boolean" | "multiSelect";
|
|
16
|
-
dropdownOptions?: MixedOption[] | number[];
|
|
17
|
+
dropdownOptions?: MixedOption[] | number[] | DropdownOption[];
|
|
17
18
|
selectedDropdownOption?: string | OptionType | number;
|
|
18
|
-
onDropdownOptionSelect?: (option:
|
|
19
|
+
onDropdownOptionSelect?: (option: DropdownOption) => void;
|
|
19
20
|
dropdownIconProp?: searchDropdownIconProps;
|
|
20
21
|
searchItems?: string[] | number[];
|
|
21
22
|
setSearchItems?: React.Dispatch<React.SetStateAction<string[] | number[]>>;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "react-day-picker/dist/style.css";
|
|
3
3
|
import { searchDropdownIconProps } from "./SearchInput.types";
|
|
4
|
+
import { DropdownOption } from "./SearchNumberInput";
|
|
4
5
|
type SearchDatePickerInputProps<T extends object> = {
|
|
5
6
|
themeBgColor?: string;
|
|
6
7
|
lightThemeBg?: string;
|
|
7
8
|
pillColor?: string;
|
|
8
9
|
textHighlight?: string;
|
|
9
|
-
dropdownOptions?:
|
|
10
|
-
selectedDropdownOption?:
|
|
11
|
-
onDropdownOptionSelect?: (option:
|
|
10
|
+
dropdownOptions?: DropdownOption[];
|
|
11
|
+
selectedDropdownOption?: DropdownOption;
|
|
12
|
+
onDropdownOptionSelect?: (option: DropdownOption) => void;
|
|
12
13
|
dropdownIconProp?: searchDropdownIconProps;
|
|
13
14
|
toggleStatus?: boolean;
|
|
14
15
|
setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -24,7 +24,7 @@ function SearchDatePickerInput({
|
|
|
24
24
|
// theming
|
|
25
25
|
themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100",
|
|
26
26
|
// style/config
|
|
27
|
-
pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
|
|
27
|
+
pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, dropdownIconProp = {
|
|
28
28
|
iconClasses: "text-sky-500",
|
|
29
29
|
name: "chevronDown",
|
|
30
30
|
weight: "solid",
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ColumnInstance } from "react-table";
|
|
3
3
|
import { searchDropdownIconProps } from "./SearchInput.types";
|
|
4
|
+
export type DropdownOption = {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string;
|
|
7
|
+
};
|
|
4
8
|
/** The parent can pass these props to replicate local-storage filter usage. */
|
|
5
9
|
type SearchNumberInputProps<T extends object> = {
|
|
6
10
|
pillColor?: string;
|
|
7
11
|
textHighlight?: string;
|
|
8
|
-
dropdownOptions?:
|
|
9
|
-
selectedDropdownOption?:
|
|
10
|
-
onDropdownOptionSelect?: (option:
|
|
12
|
+
dropdownOptions?: DropdownOption[];
|
|
13
|
+
selectedDropdownOption?: DropdownOption;
|
|
14
|
+
onDropdownOptionSelect?: (option: DropdownOption) => void;
|
|
11
15
|
dropdownIconProp?: searchDropdownIconProps;
|
|
12
16
|
toggleStatus?: boolean;
|
|
13
17
|
setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -16,7 +16,7 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
|
|
|
16
16
|
iconClasses: "text-sky-500",
|
|
17
17
|
name: "chevronDown",
|
|
18
18
|
weight: "solid",
|
|
19
|
-
}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter,
|
|
19
|
+
}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter,
|
|
20
20
|
// local-storage
|
|
21
21
|
searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, }) => {
|
|
22
22
|
const containerRef = useRef(null);
|
|
@@ -49,14 +49,16 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
|
|
|
49
49
|
setToggleStatus?.(false);
|
|
50
50
|
const segments = savedString.split(" ");
|
|
51
51
|
// If the first word is in your dropdown => use it, else treat as pure number
|
|
52
|
-
if (segments.length > 1
|
|
53
|
-
dropdownOptions.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
if (segments.length > 1) {
|
|
53
|
+
const foundOption = dropdownOptions.find((opt) => opt.label === segments[0]);
|
|
54
|
+
if (foundOption) {
|
|
55
|
+
onDropdownOptionSelect?.(foundOption);
|
|
56
|
+
setMinValue?.(segments[1]);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
// Fall back to treating the whole saved string as the number.
|
|
60
|
+
setMinValue?.(savedString);
|
|
61
|
+
}
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
// Also set searchItems so the "badge" might show
|
|
@@ -81,7 +83,6 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
|
|
|
81
83
|
*/
|
|
82
84
|
const buildNumberString = useCallback(() => {
|
|
83
85
|
if (toggleStatus) {
|
|
84
|
-
// Range mode => "min - max"
|
|
85
86
|
if (minValue && maxValue) {
|
|
86
87
|
return `${minValue} - ${maxValue}`;
|
|
87
88
|
}
|
|
@@ -91,24 +92,17 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
|
|
|
91
92
|
else if (maxValue) {
|
|
92
93
|
return ` - ${maxValue}`;
|
|
93
94
|
}
|
|
94
|
-
|
|
95
|
-
return ""; // no input => empty
|
|
96
|
-
}
|
|
95
|
+
return "";
|
|
97
96
|
}
|
|
98
97
|
else {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
: selectedDropdownOption;
|
|
103
|
-
if (prefix && minValue) {
|
|
104
|
-
return `${prefix} ${minValue}`;
|
|
98
|
+
const operator = selectedDropdownOption?.value || "";
|
|
99
|
+
if (operator && minValue) {
|
|
100
|
+
return `${operator}${minValue}`; // like "=1", "<=1", ">=1"
|
|
105
101
|
}
|
|
106
102
|
else if (minValue) {
|
|
107
|
-
return minValue;
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
110
|
-
return "";
|
|
103
|
+
return minValue;
|
|
111
104
|
}
|
|
105
|
+
return "";
|
|
112
106
|
}
|
|
113
107
|
}, [toggleStatus, minValue, maxValue, selectedDropdownOption]);
|
|
114
108
|
/**
|
|
@@ -154,10 +148,11 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
|
|
|
154
148
|
handleFilter?.();
|
|
155
149
|
};
|
|
156
150
|
return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"}
|
|
157
|
-
h-full max-h-11 items-center justify-around`, children: toggleStatus ? (
|
|
158
|
-
// Range mode
|
|
159
|
-
_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
|
|
151
|
+
h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
|
|
160
152
|
// Single value mode
|
|
161
|
-
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption
|
|
153
|
+
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
|
|
154
|
+
label: "",
|
|
155
|
+
value: "",
|
|
156
|
+
}, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _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 bg-white px-2", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", 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: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }) }));
|
|
162
157
|
};
|
|
163
158
|
export default SearchNumberInput;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { searchDropdownIconProps } from "./SearchInput.types";
|
|
3
|
+
import { DropdownOption } from "./SearchNumberInput";
|
|
3
4
|
type SearchTextInputProps<T extends object> = {
|
|
4
5
|
pillColor?: string;
|
|
5
6
|
textHighlight?: string;
|
|
6
7
|
dropdownIconProp?: searchDropdownIconProps;
|
|
7
|
-
selectedDropdownOption?:
|
|
8
|
-
onDropdownOptionSelect?: (option:
|
|
9
|
-
dropdownOptions?:
|
|
8
|
+
selectedDropdownOption?: DropdownOption;
|
|
9
|
+
onDropdownOptionSelect?: (option: DropdownOption) => void;
|
|
10
|
+
dropdownOptions?: DropdownOption[];
|
|
10
11
|
searchItems?: string[];
|
|
11
12
|
setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
|
|
12
13
|
handleFilter?: () => void;
|
|
@@ -11,10 +11,11 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
11
11
|
iconClasses: textHighlight,
|
|
12
12
|
name: "chevronDown",
|
|
13
13
|
weight: "solid",
|
|
14
|
-
}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, }) => {
|
|
14
|
+
}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, }) => {
|
|
15
15
|
const containerRef = useRef(null);
|
|
16
16
|
const [localSearchText, setLocalSearchText] = useState("");
|
|
17
17
|
const inputRef = useRef(null);
|
|
18
|
+
console.log(dropdownOptions, "OPTIONS");
|
|
18
19
|
// On mount: focus input and load persisted search for this column if it exists.
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
inputRef.current?.focus();
|
|
@@ -88,6 +89,9 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
|
|
|
88
89
|
// Clear the input so a new search can be entered.
|
|
89
90
|
setLocalSearchText("");
|
|
90
91
|
};
|
|
91
|
-
return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption
|
|
92
|
+
return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
|
|
93
|
+
label: "",
|
|
94
|
+
value: "",
|
|
95
|
+
}, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto " }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", firstIconClasses: firstIconClasses, onChange: handleInputChange, additionalClasses: "min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => setLocalSearchText(""), "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => setLocalSearchText("") })] }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: searchItems.map((item, index) => (_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: "font-serif", size: "text-sm", tag: "span", text: item }), 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))) })) : null] }) }));
|
|
92
96
|
};
|
|
93
97
|
export default SearchTextInput;
|