59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import React, { useState, useRef, useEffect } from "react";
|
|
import { FiCalendar } from "react-icons/fi";
|
|
import { MdKeyboardArrowDown } from "react-icons/md";
|
|
|
|
const RANGE_OPTIONS = [
|
|
{ label: 'Today', value: 'today' },
|
|
{ label: 'This Week', value: 'week' },
|
|
{ label: 'This Month', value: 'month' },
|
|
{ label: 'This Year', value: 'year' },
|
|
];
|
|
|
|
const CalendarDropdown = ({ value, onChange }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef();
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(event) {
|
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
const selected = RANGE_OPTIONS.find(opt => opt.value === value) || RANGE_OPTIONS[0];
|
|
|
|
return (
|
|
<div ref={ref} style={{ position: 'relative' }}>
|
|
<button
|
|
className="calendar-btn"
|
|
onClick={() => setOpen(o => !o)}
|
|
type="button"
|
|
>
|
|
<FiCalendar style={{ marginRight: 4 }} />
|
|
{selected.label}
|
|
<MdKeyboardArrowDown style={{ marginLeft: 2 }} />
|
|
</button>
|
|
{open && (
|
|
<div className="calendar-dropdown">
|
|
{RANGE_OPTIONS.map(option => (
|
|
<div
|
|
key={option.value}
|
|
className={`calendar-dropdown-item${selected.value === option.value ? ' selectedd' : ''}`}
|
|
onClick={() => {
|
|
onChange(option.value);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
{option.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CalendarDropdown;
|