@activecollab/components
Version:
ActiveCollab Components
59 lines • 2.47 kB
JavaScript
import React, { useCallback, useMemo, useState } from "react";
import { format, getMonth, getYear } from "date-fns";
import { StyledMonth, StyledMonths, StyledYearMonthPicker, StyledYearMonthPickerNavBar, StyledYearMonthPickerNavBarItem } from "./Styles";
export const YearMonthPicker = _ref => {
let {
month,
onChange = () => null,
isShown = true,
onClick,
text,
selectedDays,
selectionMode
} = _ref;
const [enteredTo, setEnteredTo] = useState();
const currentYear = getYear(new Date());
const months = Array.from({
length: 12
}, (_, i) => format(new Date(currentYear, i, 1), "MMMM"));
const handleMonthChange = useCallback(e => {
onChange(new Date(getYear(month), e.target.dataset.value));
if (onClick) {
onClick(e);
}
}, [month, onChange, onClick]);
const onMouseEnterCallback = useCallback(e => {
if (selectionMode === "quarterly") {
setEnteredTo(Math.floor(e.target.getAttribute("data-value") / 3));
}
}, [selectionMode]);
const renderMonths = useMemo(() => {
return /*#__PURE__*/React.createElement(StyledMonths, {
className: "c-monthPicker",
"data-test": "months"
}, months.map((singleMonth, i) => {
return /*#__PURE__*/React.createElement(StyledMonth, {
className: "c-monthPicker__month",
key: i,
onClick: handleMonthChange,
onMouseEnter: onMouseEnterCallback,
"data-value": i,
"data-test": "month",
$isCurrent: month.getFullYear() === new Date().getFullYear() && new Date().getMonth() === i,
$isCurrentQuarter: Math.floor(i / 3) === enteredTo,
$isSelected: selectedDays && !(selectedDays instanceof Date) && selectedDays.from && selectedDays.to && selectedDays.from.getFullYear() === getYear(month) && i >= getMonth(selectedDays.from) && i <= getMonth(selectedDays.to)
}, singleMonth.substring(0, 3));
}));
}, [months, handleMonthChange, onMouseEnterCallback, enteredTo, selectedDays, month]);
return /*#__PURE__*/React.createElement(StyledYearMonthPicker, {
className: "c-DayPicker-Caption",
role: "button"
}, /*#__PURE__*/React.createElement(StyledYearMonthPickerNavBar, {
role: "button"
}, /*#__PURE__*/React.createElement(StyledYearMonthPickerNavBarItem, {
"data-test": "show-picker",
onClick: onClick
}, text)), isShown && renderMonths);
};
YearMonthPicker.displayName = "YearMonthPicker";
//# sourceMappingURL=YearMonthPicker.js.map