@limetech/lime-elements
Version:
128 lines (127 loc) • 4.56 kB
JavaScript
import { range } from 'lodash-es';
import moment from 'moment/moment';
import { Picker } from './picker';
import { h } from 'jsx-dom';
const MONTHSPERQUARTER = 3;
const NBROFMONTHS = 12;
export class QuarterPicker extends Picker {
constructor(language, change, translations, dateFormat = '[Q]Q YYYY') {
super(language, change, dateFormat);
this.change = change;
this.translations = translations;
this.quarters = [];
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.selectQuarter(selectedDates, dateString, fp);
}
handleClose(selectedDates) {
return super.handleClose(selectedDates).then(() => {
this.selectQuarter(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
});
}
handleReady(_, __, fp) {
this.bootstrapQuarterPicker(fp);
this.selectQuarter(fp.selectedDates, fp.input.value, fp);
}
bootstrapQuarterPicker(fp) {
if (!this.nativePicker) {
fp.innerContainer.remove();
fp.calendarContainer
.querySelectorAll('.flatpickr-monthDropdown-months')[0]
.replaceWith(this.renderHeading());
fp.calendarContainer.append(this.renderQuarterPicker(fp));
}
}
renderHeading() {
return (h("span", { className: "datepicker-quarter-heading" }, this.getLocalizedHeading()));
}
getLocalizedHeading() {
return this.translations.get('date-picker.quarter.heading', this.language);
}
renderQuarterPicker(fp) {
const startQuarter = 1;
const endQuarter = 5;
return (h("div", { className: "datepicker-quarters-container" }, range(startQuarter, endQuarter).map((quarter) => {
const renderedQuarter = this.renderQuarter(quarter, fp);
this.quarters.push(renderedQuarter);
return renderedQuarter;
})));
}
renderQuarter(quarter, fp) {
return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, onClick: () => {
const date = moment([fp.currentYear])
.quarter(quarter)
.toDate();
fp.setDate(date, true);
fp.close();
} }, `Q${quarter}`, this.renderQuarterMonths(quarter)));
}
renderQuarterMonths(quarter) {
const months = Array.from(Array.from({ length: MONTHSPERQUARTER }), (_, index) => {
return moment()
.month(index + (quarter - 1) * MONTHSPERQUARTER)
.locale(this.getMomentLang())
.format('MMM');
});
return months.map((month) => {
return h("span", { className: "datepicker-month-in-quarter" }, month);
});
}
selectQuarter(selectedDates, dateString, fp) {
if (!this.nativePicker) {
for (const quarter of this.quarters) {
quarter.classList.remove('selected');
}
if (dateString !== '' &&
selectedDates[0] &&
selectedDates[0].getFullYear() === fp.currentYear) {
const i = Math.floor(selectedDates[0].getMonth() / MONTHSPERQUARTER);
const selectedQuarter = this.quarters[i];
selectedQuarter.classList.add('selected');
}
}
}
prevYear(event) {
if (!this.nativePicker) {
event.stopImmediatePropagation();
this.flatpickr.changeMonth(-NBROFMONTHS);
}
}
nextYear(event) {
if (!this.nativePicker) {
event.stopImmediatePropagation();
this.flatpickr.changeMonth(NBROFMONTHS);
}
}
}
//# sourceMappingURL=quarter-picker.js.map