@limetech/lime-elements
Version:
119 lines (118 loc) • 4.76 kB
JavaScript
import { range } from "lodash-es";
import moment from "moment/moment";
import { Picker } from "./picker";
import { h } from "jsx-dom";
const NBROFMONTHS = 12;
export class MonthPicker extends Picker {
constructor(language, change, translations, dateFormat = 'MM/YYYY') {
super(language, change, dateFormat);
this.translations = translations;
this.months = [];
this.handleChange = this.handleChange.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleReady = this.handleReady.bind(this);
this.nextYear = this.nextYear.bind(this);
this.prevYear = this.prevYear.bind(this);
}
init(element, container, value) {
super.init(element, container, value);
if (!this.nativePicker) {
this.flatpickr.prevMonthNav.addEventListener('mousedown', this.prevYear);
this.flatpickr.nextMonthNav.addEventListener('mousedown', this.nextYear);
}
}
destroy() {
var _a, _b, _c, _d;
super.destroy();
if (!this.nativePicker) {
(_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
(_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
}
}
getConfig(nativePicker) {
const config = {
onChange: this.handleChange,
};
if (!nativePicker) {
config.onReady = this.handleReady;
config.onYearChange = this.handleChange;
}
return config;
}
handleChange(selectedDates, dateString, fp) {
this.selectMonth(selectedDates, dateString, fp);
}
handleClose(selectedDates) {
return super.handleClose(selectedDates).then(() => {
this.selectMonth(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
});
}
handleReady(_, __, fp) {
this.bootstrapMonthPicker(fp);
this.selectMonth(fp.selectedDates, fp.input.value, fp);
}
bootstrapMonthPicker(fp) {
if (!this.nativePicker) {
fp.innerContainer.remove();
fp.calendarContainer
.querySelectorAll('.flatpickr-monthDropdown-months')[0]
.replaceWith(this.renderHeading());
fp.calendarContainer.append(this.renderMonthsPicker(fp));
}
}
renderHeading() {
return (h("span", { className: "datepicker-month-heading" }, this.getLocalizedHeading()));
}
getLocalizedHeading() {
return this.translations.get('date-picker.month.heading', this.language);
}
renderMonthsPicker(fp) {
return (h("div", { className: "datepicker-months-container" }, range(NBROFMONTHS).map((index) => {
const renderedMonth = this.renderMonth(index, fp);
this.months.push(renderedMonth);
return renderedMonth;
})));
}
renderMonth(month, fp) {
return (h("div", { className: "datepicker-month", onClick: () => {
const date = moment([fp.currentYear]).month(month).toDate();
fp.setDate(date, true);
fp.close();
} }, moment()
.month(month)
.locale(this.getMomentLang())
.format('MMM')));
}
selectMonth(selectedDates, dateString, fp) {
if (!this.nativePicker) {
for (const month of this.months) {
month.classList.remove('selected');
}
if (dateString !== '' &&
selectedDates[0] &&
selectedDates[0].getFullYear() === fp.currentYear) {
this.months[selectedDates[0].getMonth()].classList.add('selected');
}
}
}
prevYear() {
if (!this.nativePicker) {
// Preventing default or stopping the event from propagating doesn't
// stop flatpickr from moving one month on its own, so we let it do
// that, and then move the other 11 months to make it a full year.
// /Ads
const monthsToMove = 11;
this.flatpickr.changeMonth(-monthsToMove);
}
}
nextYear() {
if (!this.nativePicker) {
// Preventing default or stopping the event from propagating doesn't
// stop flatpickr from moving one month on its own, so we let it do
// that, and then move the other 11 months to make it a full year.
// /Ads
const monthsToMove = 11;
this.flatpickr.changeMonth(monthsToMove);
}
}
}