@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
87 lines (86 loc) • 3.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MonthYearPickerType = void 0;
var _core = require("@chayns-components/core");
var _react = _interopRequireWildcard(require("react"));
var _calendar = require("../../../utils/calendar");
var _date = require("../../../utils/date");
var _Month = require("../month-wrapper/month/Month.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
let MonthYearPickerType = exports.MonthYearPickerType = /*#__PURE__*/function (MonthYearPickerType) {
MonthYearPickerType["Month"] = "month";
MonthYearPickerType["Year"] = "year";
return MonthYearPickerType;
}({});
const MonthYearPickers = ({
month,
year,
locale,
minDate,
maxDate,
setCurrentDate,
displayIndex = 0,
showMonthYearPickers
}) => {
const [currentYear] = (0, _react.useState)(new Date().getFullYear());
const months = (0, _react.useMemo)(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(tempMonth => ({
text: (0, _calendar.formatMonth)({
month: tempMonth,
locale
}),
value: tempMonth
})), [locale]);
const hasMultipleMonths = (0, _react.useMemo)(() => (0, _date.differenceInCalendarMonths)(maxDate, minDate) > 0, [minDate, maxDate]);
const years = (0, _react.useMemo)(() => (0, _calendar.getYearsBetween)(minDate, maxDate).map(tempYear => ({
text: tempYear.toString(),
value: tempYear
})), [minDate, maxDate]);
const hasMultipleYears = (0, _react.useMemo)(() => years.length > 1, [years]);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showMonthYearPickers && hasMultipleMonths ? /*#__PURE__*/_react.default.createElement(_core.ComboBox, {
onSelect: selectedItem => {
if (!selectedItem) return;
const tempSelectedDate = (0, _calendar.isDateInRange)({
minDate,
maxDate,
currentDate: new Date(year, selectedItem.value - 1 - displayIndex, 1)
});
setCurrentDate(tempSelectedDate);
},
lists: [{
list: months
}],
selectedItem: {
text: (0, _calendar.formatMonth)({
month,
locale
}),
value: month
},
placeholder: ""
}) : /*#__PURE__*/_react.default.createElement(_Month.StyledMonthName, null, (0, _calendar.formatMonth)({
locale,
month
})), showMonthYearPickers && hasMultipleYears ? /*#__PURE__*/_react.default.createElement(_core.ComboBox, {
onSelect: selectedItem => {
if (!selectedItem) return;
const tempSelectedDate = (0, _calendar.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.default.createElement(_Month.StyledMonthName, null, currentYear !== year ? year : ''));
};
var _default = exports.default = MonthYearPickers;
//# sourceMappingURL=MonthYearPickers.js.map