@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
81 lines • 2.7 kB
JavaScript
import { ComboBox } from '@chayns-components/core';
import React, { useMemo, useState } from 'react';
import { formatMonth, getYearsBetween, isDateInRange } from '../../../utils/calendar';
import { differenceInCalendarMonths } from '../../../utils/date';
import { StyledMonthName } from '../month-wrapper/month/Month.styles';
export let MonthYearPickerType = /*#__PURE__*/function (MonthYearPickerType) {
MonthYearPickerType["Month"] = "month";
MonthYearPickerType["Year"] = "year";
return MonthYearPickerType;
}({});
const MonthYearPickers = _ref => {
let {
month,
year,
locale,
minDate,
maxDate,
setCurrentDate,
displayIndex = 0,
showMonthYearPickers
} = _ref;
const [currentYear] = useState(new Date().getFullYear());
const months = useMemo(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(tempMonth => ({
text: formatMonth({
month: tempMonth,
locale
}),
value: tempMonth
})), [locale]);
const hasMultipleMonths = useMemo(() => differenceInCalendarMonths(maxDate, minDate) > 0, [minDate, maxDate]);
const years = useMemo(() => getYearsBetween(minDate, maxDate).map(tempYear => ({
text: tempYear.toString(),
value: tempYear
})), [minDate, maxDate]);
const hasMultipleYears = useMemo(() => years.length > 1, [years]);
return /*#__PURE__*/React.createElement(React.Fragment, null, showMonthYearPickers && hasMultipleMonths ? /*#__PURE__*/React.createElement(ComboBox, {
onSelect: selectedItem => {
if (!selectedItem) return;
const tempSelectedDate = isDateInRange({
minDate,
maxDate,
currentDate: new Date(year, selectedItem.value - 1 - displayIndex, 1)
});
setCurrentDate(tempSelectedDate);
},
lists: [{
list: months
}],
selectedItem: {
text: formatMonth({
month,
locale
}),
value: month
},
placeholder: ""
}) : /*#__PURE__*/React.createElement(StyledMonthName, null, formatMonth({
locale,
month
})), showMonthYearPickers && hasMultipleYears ? /*#__PURE__*/React.createElement(ComboBox, {
onSelect: selectedItem => {
if (!selectedItem) return;
const tempSelectedDate = isDateInRange({
minDate,
maxDate,
currentDate: new Date(selectedItem.value, month - 1 - displayIndex, 1)
});
setCurrentDate(tempSelectedDate);
},
lists: [{
list: years
}],
selectedItem: {
text: year.toString(),
value: year
},
placeholder: ""
}) : /*#__PURE__*/React.createElement(StyledMonthName, null, currentYear !== year ? year : ''));
};
export default MonthYearPickers;
//# sourceMappingURL=MonthYearPickers.js.map