Notes

const CalendarDropdown = ({ onApply, onReset, updateDateFilterObj }) => {
const [fromValue, setFromValue] = useState("");
const [toValue, setToValue] = useState("");
const [fromFocused, setFromFocused] = useState(false);
const [toFocused, setToFocused] = useState(false);
const dropdownRef = useRef(null);

useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
// Keep dropdown open even if clicked outside
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

const handleFromValue = (event) => {
setFromValue(event.target.value);
};

const handleToValue = (event) => {
setToValue(event.target.value);
};

const onClickApply = () => {
// Create filter object based on available input
const filterObj = {};
if (fromValue) filterObj.fromValue = fromValue;
if (toValue) filterObj.toValue = toValue;

updateDateFilterObj(filterObj);
onApply(fromValue, toValue); // Call parent function with dates
};

const onClickReset = () => {
setFromValue(""); // Clear values
setToValue("");
updateDateFilterObj({ fromValue: "", toValue: "" });
onReset(); // Call parent reset function
};

return (
<div className="calendar-dropdown" ref={dropdownRef}>
<h4>Filter by payment date</h4>
<div className={`input-container ${fromFocused ? "focused" : ""}`}>
<input
className="date-format-row"
type="text"
placeholder="mm/dd/yyyy"
value={fromValue} // Keeps value after applying the filter
onFocus={() => setFromFocused(true)}
onBlur={(e) => setFromFocused(e.target.value !== "")}
onChange={handleFromValue}
/>
<label className="floating-label">From</label>
</div>

<div className={`input-container ${toFocused ? "focused" : ""}`}>
<input
className="date-format-row"
type="text"
placeholder="mm/dd/yyyy"
value={toValue} // Keeps value after applying the filter
onFocus={() => setToFocused(true)}
onBlur={(e) => setToFocused(e.target.value !== "")}
onChange={handleToValue}
/>
<label className="floating-label">To</label>
</div>

<div className="button-row">
<Button onClick={onClickApply} label="Apply" className="button-row-apply" />
<Button
onClick={onClickReset}
label="Reset"
className="button-row-reset"
variant="secondary-on-light"
/>
</div>
</div>
);
};

export default CalendarDropdown;