@agilant/toga-blox 1.0.116 → 1.0.117
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.
|
@@ -103,7 +103,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
103
103
|
handleFooterFilter();
|
|
104
104
|
}, children: buttonText })] }));
|
|
105
105
|
}
|
|
106
|
-
// If it's the "Select All" item => do something special here
|
|
107
106
|
if (option.label === "Select All") {
|
|
108
107
|
return (_jsxs("label", { className: "select-all-item flex justify-between items-center px-4 cursor-pointer", style: {
|
|
109
108
|
display: "flex",
|
|
@@ -127,13 +126,9 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
|
|
|
127
126
|
text: placeholder,
|
|
128
127
|
icon: "magnifyingGlass",
|
|
129
128
|
iconStyle: "regular",
|
|
130
|
-
}, disabled: disabled, hasSelectAll: isBoolean ? false : hasSelectAll,
|
|
131
|
-
// Provide our custom item renderer
|
|
132
|
-
otherProps: {
|
|
129
|
+
}, disabled: disabled, hasSelectAll: isBoolean ? false : hasSelectAll, otherProps: {
|
|
133
130
|
ItemRenderer: itemRenderer,
|
|
134
131
|
...rest.otherProps,
|
|
135
|
-
}, isBoolean: isBoolean, isSearchable: isSearchable,
|
|
136
|
-
// The child calls this to update how many items are matched by the current search
|
|
137
|
-
setInputSearchValue: setFilteredCount, ...rest }));
|
|
132
|
+
}, isBoolean: isBoolean, isSearchable: isSearchable, setInputSearchValue: setFilteredCount, ...rest }));
|
|
138
133
|
};
|
|
139
134
|
export default SearchDropdownInput;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import "react-day-picker/dist/style.css";
|
|
3
3
|
import { searchDropdownIconProps } from "./SearchInput.types";
|
|
4
4
|
import { DropdownOption } from "./SearchNumberInput";
|
|
5
|
-
|
|
5
|
+
export interface SearchDatePickerInputProps<T extends object> {
|
|
6
6
|
themeBgColor?: string;
|
|
7
7
|
lightThemeBg?: string;
|
|
8
8
|
pillColor?: string;
|
|
@@ -17,6 +17,8 @@ type SearchDatePickerInputProps<T extends object> = {
|
|
|
17
17
|
onStartDateSelect?: (date: Date | undefined) => void;
|
|
18
18
|
selectedEndDate?: Date;
|
|
19
19
|
onEndDateSelect?: (date: Date | undefined) => void;
|
|
20
|
+
selectedDropdownOption?: DropdownOption;
|
|
21
|
+
onDropdownOptionSelect?: (option: DropdownOption) => void;
|
|
20
22
|
buttonText?: string;
|
|
21
23
|
buttonColor?: string;
|
|
22
24
|
searchItems?: string[];
|
|
@@ -32,6 +34,6 @@ type SearchDatePickerInputProps<T extends object> = {
|
|
|
32
34
|
removePattern?: RegExp | string;
|
|
33
35
|
hasOperator?: boolean;
|
|
34
36
|
tooltipText?: string;
|
|
35
|
-
}
|
|
36
|
-
declare
|
|
37
|
+
}
|
|
38
|
+
declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
37
39
|
export default SearchDatePickerInput;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState } from "react";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { DayPicker } from "react-day-picker";
|
|
4
4
|
import "react-day-picker/dist/style.css";
|
|
5
5
|
import Dropdown from "../Dropdown/Dropdown";
|
|
@@ -10,137 +10,205 @@ import Text from "../Text";
|
|
|
10
10
|
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
11
11
|
import updateLocalStorage from "../../utils/updateLocalStorage";
|
|
12
12
|
import { getCleanedText } from "../../utils/getCleanedText";
|
|
13
|
+
// A tiny helper to parse e.g. "lt:2025-03-28" into operator="lt:" + dateStr="2025-03-28"
|
|
14
|
+
function parseOperatorAndDate(text) {
|
|
15
|
+
const colonIndex = text.indexOf(":");
|
|
16
|
+
if (colonIndex > -1) {
|
|
17
|
+
return {
|
|
18
|
+
operator: text.slice(0, colonIndex + 1), // "lt:"
|
|
19
|
+
dateStr: text.slice(colonIndex + 1), // "2025-03-28"
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
// If there's no colon, just return operator="", dateStr=the entire thing
|
|
23
|
+
return { operator: "", dateStr: text };
|
|
24
|
+
}
|
|
25
|
+
/** Formats a JS Date as YYYY-MM-DD */
|
|
13
26
|
function formatAsYMD(date) {
|
|
14
27
|
if (!date)
|
|
15
28
|
return "";
|
|
16
29
|
return date.toISOString().slice(0, 10);
|
|
17
30
|
}
|
|
18
|
-
|
|
31
|
+
function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], dropdownIconProp = {
|
|
19
32
|
iconClasses: "text-sky-500",
|
|
20
33
|
name: "chevronDown",
|
|
21
34
|
weight: "solid",
|
|
22
|
-
}, toggleStatus = false, setToggleStatus,
|
|
35
|
+
}, toggleStatus = false, setToggleStatus,
|
|
36
|
+
// Single-date external states
|
|
37
|
+
selectedDate, onDateSelect,
|
|
38
|
+
// Range external states
|
|
39
|
+
selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect,
|
|
40
|
+
// Operator from the parent
|
|
41
|
+
selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) {
|
|
23
42
|
const containerRef = useRef(null);
|
|
43
|
+
// Track local operator so the user sees the dropdown selection
|
|
44
|
+
// If no selectedDropdownOption from parent, fallback to first or blank
|
|
45
|
+
const [localOperator, setLocalOperator] = useState(() => {
|
|
46
|
+
if (selectedDropdownOption?.value)
|
|
47
|
+
return selectedDropdownOption;
|
|
48
|
+
if (dropdownOptions.length)
|
|
49
|
+
return dropdownOptions[0];
|
|
50
|
+
return { label: "", value: "" };
|
|
51
|
+
});
|
|
52
|
+
// Local single-date
|
|
53
|
+
const [localDate, setLocalDate] = useState(selectedDate);
|
|
54
|
+
// Local start/end if range is toggled
|
|
55
|
+
const [localStartDate, setLocalStartDate] = useState(selectedStartDate);
|
|
56
|
+
const [localEndDate, setLocalEndDate] = useState(selectedEndDate);
|
|
24
57
|
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
|
|
25
58
|
const [activeInput, setActiveInput] = useState(null);
|
|
26
|
-
//
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
59
|
+
// Load from localStorage if there's an existing criterion for this column
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (!column?.id)
|
|
62
|
+
return;
|
|
63
|
+
const stored = localStorage.getItem(localStorageKey);
|
|
64
|
+
if (stored) {
|
|
65
|
+
try {
|
|
66
|
+
const parsed = JSON.parse(stored);
|
|
67
|
+
const existing = parsed.find((crit) => crit.searchColumn?.id === column.id);
|
|
68
|
+
if (existing?.submittedSearchText) {
|
|
69
|
+
// e.g. "lt:2025-03-28" or "2025-03-28"
|
|
70
|
+
const { operator, dateStr } = parseOperatorAndDate(existing.submittedSearchText);
|
|
71
|
+
// If there's an operator, find it in the dropdown
|
|
72
|
+
if (operator && dropdownOptions.length) {
|
|
73
|
+
const foundOp = dropdownOptions.find((opt) => opt.value === operator);
|
|
74
|
+
if (foundOp)
|
|
75
|
+
setLocalOperator(foundOp);
|
|
76
|
+
}
|
|
77
|
+
// If single date mode
|
|
78
|
+
if (!toggleStatus && dateStr) {
|
|
79
|
+
const d = new Date(dateStr.trim());
|
|
80
|
+
if (!isNaN(d.getTime())) {
|
|
81
|
+
setLocalDate(d);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
// If range mode, you'd parse "2025-03-10 - 2025-03-15" etc.
|
|
85
|
+
// but let's keep it simple for now.
|
|
86
|
+
}
|
|
39
87
|
}
|
|
40
|
-
|
|
41
|
-
|
|
88
|
+
catch (err) {
|
|
89
|
+
console.error("Error loading from localStorage:", err);
|
|
42
90
|
}
|
|
43
|
-
else if (selectedEndDate) {
|
|
44
|
-
return formatAsYMD(selectedEndDate);
|
|
45
|
-
}
|
|
46
|
-
return "";
|
|
47
91
|
}
|
|
48
|
-
|
|
49
|
-
|
|
92
|
+
}, [column?.id, localStorageKey, dropdownOptions, toggleStatus]);
|
|
93
|
+
// If the parent changes selectedDate, sync it to local state
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
setLocalDate(selectedDate);
|
|
96
|
+
}, [selectedDate]);
|
|
97
|
+
// If the parent changes selectedOperator, sync that too
|
|
98
|
+
useEffect(() => {
|
|
99
|
+
if (selectedDropdownOption && selectedDropdownOption.value) {
|
|
100
|
+
setLocalOperator(selectedDropdownOption);
|
|
50
101
|
}
|
|
102
|
+
}, [selectedDropdownOption]);
|
|
103
|
+
// Handler for the operator dropdown
|
|
104
|
+
const handleOperatorSelect = (option) => {
|
|
105
|
+
setLocalOperator(option);
|
|
106
|
+
onDropdownOptionSelect?.(option);
|
|
51
107
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const operator = selectedOperator?.value || "";
|
|
55
|
-
const combinedText = operator + dateString;
|
|
56
|
-
if (!combinedText) {
|
|
57
|
-
if (column && setSearchCriteria) {
|
|
58
|
-
setSearchCriteria((prev) => {
|
|
59
|
-
const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
60
|
-
updateLocalStorage(newCriteria, localStorageKey);
|
|
61
|
-
return newCriteria;
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
if (setSearchItems && !searchItems.includes(combinedText)) {
|
|
67
|
-
setSearchItems([...searchItems, combinedText]);
|
|
68
|
-
}
|
|
69
|
-
if (column && setSearchCriteria) {
|
|
70
|
-
setSearchCriteria((prev) => {
|
|
71
|
-
const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
|
|
72
|
-
const newCriteria = [
|
|
73
|
-
...filtered,
|
|
74
|
-
{
|
|
75
|
-
searchColumn: column,
|
|
76
|
-
submittedSearchText: combinedText,
|
|
77
|
-
},
|
|
78
|
-
];
|
|
79
|
-
updateLocalStorage(newCriteria, localStorageKey);
|
|
80
|
-
return newCriteria;
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
setEditingHeader && setEditingHeader(null);
|
|
85
|
-
handleFilter && handleFilter();
|
|
86
|
-
setIsDatePickerOpen(false);
|
|
108
|
+
// Single date pick
|
|
109
|
+
const openSinglePicker = () => {
|
|
87
110
|
setActiveInput(null);
|
|
111
|
+
setIsDatePickerOpen(!isDatePickerOpen);
|
|
88
112
|
};
|
|
89
|
-
//
|
|
90
|
-
const modifiersClassNames = {
|
|
91
|
-
selected: `${themeBgColor} text-white rounded-full`,
|
|
92
|
-
today: `${lightThemeBg} ${textHighlight}`,
|
|
93
|
-
};
|
|
94
|
-
// Open pickers
|
|
113
|
+
// Range pick
|
|
95
114
|
const openStartPicker = () => {
|
|
96
|
-
setIsDatePickerOpen(true);
|
|
97
115
|
setActiveInput("start");
|
|
116
|
+
setIsDatePickerOpen(true);
|
|
98
117
|
};
|
|
99
118
|
const openEndPicker = () => {
|
|
100
|
-
setIsDatePickerOpen(true);
|
|
101
119
|
setActiveInput("end");
|
|
120
|
+
setIsDatePickerOpen(true);
|
|
102
121
|
};
|
|
103
|
-
|
|
122
|
+
/** Called when user clicks "Filter" */
|
|
123
|
+
const handleFilterClick = () => {
|
|
124
|
+
let finalText = "";
|
|
125
|
+
if (!toggleStatus) {
|
|
126
|
+
// Single date: operator + date
|
|
127
|
+
const dateStr = localDate ? formatAsYMD(localDate) : "";
|
|
128
|
+
finalText = localOperator.value + dateStr;
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
// Range date
|
|
132
|
+
const startStr = localStartDate ? formatAsYMD(localStartDate) : "";
|
|
133
|
+
const endStr = localEndDate ? formatAsYMD(localEndDate) : "";
|
|
134
|
+
if (startStr && endStr) {
|
|
135
|
+
finalText = `${startStr} - ${endStr}`;
|
|
136
|
+
}
|
|
137
|
+
else if (startStr) {
|
|
138
|
+
finalText = startStr;
|
|
139
|
+
}
|
|
140
|
+
else if (endStr) {
|
|
141
|
+
finalText = endStr;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
const trimmed = finalText.trim();
|
|
145
|
+
if (!trimmed) {
|
|
146
|
+
// remove existing criterion for this column
|
|
147
|
+
setSearchCriteria?.((prev) => {
|
|
148
|
+
const newCriteria = prev.filter((c) => c.searchColumn?.id !== column?.id);
|
|
149
|
+
updateLocalStorage(newCriteria, localStorageKey);
|
|
150
|
+
return newCriteria;
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
// store new or updated criterion
|
|
155
|
+
setSearchCriteria?.((prev) => {
|
|
156
|
+
const filtered = prev.filter((c) => c.searchColumn?.id !== column?.id);
|
|
157
|
+
const newCriterion = {
|
|
158
|
+
searchColumn: column,
|
|
159
|
+
submittedSearchText: trimmed,
|
|
160
|
+
};
|
|
161
|
+
const newCriteria = [...filtered, newCriterion];
|
|
162
|
+
updateLocalStorage(newCriteria, localStorageKey);
|
|
163
|
+
return newCriteria;
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
handleFilter?.();
|
|
167
|
+
setEditingHeader?.(null);
|
|
168
|
+
setIsDatePickerOpen(false);
|
|
104
169
|
setActiveInput(null);
|
|
105
|
-
|
|
170
|
+
if (!toggleStatus && onDateSelect) {
|
|
171
|
+
onDateSelect(localDate);
|
|
172
|
+
}
|
|
106
173
|
};
|
|
107
|
-
//
|
|
108
|
-
const
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
? formatAsYMD(selectedEndDate)
|
|
115
|
-
: "End Date" })] })) : (
|
|
116
|
-
// Single-date mode: Render a dropdown for operator and a button for the date.
|
|
117
|
-
_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedOperator, onOptionSelect: (option) => setSelectedOperator(option), optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-10 left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
|
|
118
|
-
? formatAsYMD(selectedDate)
|
|
119
|
-
: "Select Date" })] })) }), toggleStatus ? (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: (day) => {
|
|
120
|
-
onStartDateSelect?.(day || undefined);
|
|
121
|
-
setIsDatePickerOpen(false);
|
|
122
|
-
setActiveInput(null);
|
|
123
|
-
}, modifiersClassNames: modifiersClassNames })) : (_jsx(DayPicker, { mode: "single", selected: selectedEndDate, onSelect: (day) => {
|
|
124
|
-
onEndDateSelect?.(day || undefined);
|
|
174
|
+
// The daypicker for single or range
|
|
175
|
+
const dayPicker = !toggleStatus
|
|
176
|
+
? // Single date
|
|
177
|
+
isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: localDate, onSelect: (day) => {
|
|
178
|
+
if (day) {
|
|
179
|
+
setLocalDate(day);
|
|
180
|
+
}
|
|
125
181
|
setIsDatePickerOpen(false);
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
182
|
+
} }) }))
|
|
183
|
+
: 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: localStartDate, onSelect: (day) => {
|
|
184
|
+
if (day)
|
|
185
|
+
setLocalStartDate(day);
|
|
186
|
+
setIsDatePickerOpen(false);
|
|
187
|
+
setActiveInput(null);
|
|
188
|
+
} })) : (_jsx(DayPicker, { mode: "single", selected: localEndDate, onSelect: (day) => {
|
|
189
|
+
if (day)
|
|
190
|
+
setLocalEndDate(day);
|
|
191
|
+
setIsDatePickerOpen(false);
|
|
192
|
+
setActiveInput(null);
|
|
193
|
+
} })) }));
|
|
194
|
+
return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localStartDate
|
|
195
|
+
? formatAsYMD(localStartDate)
|
|
196
|
+
: "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localEndDate
|
|
197
|
+
? formatAsYMD(localEndDate)
|
|
198
|
+
: "End Date" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-10 left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: localDate ? formatAsYMD(localDate) : "Select Date" })] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
|
|
131
199
|
const cleanedText = getCleanedText(item, removePattern);
|
|
132
|
-
return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs",
|
|
133
|
-
|
|
200
|
+
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: () => {
|
|
201
|
+
// remove from searchItems
|
|
202
|
+
const newSearchItems = searchItems.filter((it) => it !== item);
|
|
134
203
|
setSearchItems?.(newSearchItems);
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
};
|
|
204
|
+
// remove from searchCriteria
|
|
205
|
+
setSearchCriteria?.((prev) => {
|
|
206
|
+
const filtered = prev.filter((crit) => crit.submittedSearchText !==
|
|
207
|
+
item);
|
|
208
|
+
updateLocalStorage(filtered, localStorageKey);
|
|
209
|
+
return filtered;
|
|
210
|
+
});
|
|
211
|
+
}, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: cleanedText }), 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));
|
|
212
|
+
}) })) : 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: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, 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: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
|
|
213
|
+
}
|
|
146
214
|
export default SearchDatePickerInput;
|