@limetech/lime-elements
Version:
130 lines (129 loc) • 4.93 kB
JavaScript
import { range } from "lodash-es";
import moment from "moment/moment";
import { Picker } from "./picker";
import { h } from "jsx-dom";
const YEAR_INTERVAL = 10;
export class YearPicker extends Picker {
constructor(language, change, translations, dateFormat = 'YYYY') {
super(language, change, dateFormat);
this.translations = translations;
this.yearElements = [];
this.years = [];
this.prevYears = (event) => {
event.stopImmediatePropagation();
this.addYears(-YEAR_INTERVAL);
};
this.nextYears = (event) => {
event.stopImmediatePropagation();
this.addYears(YEAR_INTERVAL);
};
this.handleChange = this.handleChange.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleReady = this.handleReady.bind(this);
}
init(element, container, value) {
super.init(element, container, value);
if (!this.nativePicker) {
this.flatpickr.prevMonthNav.addEventListener('mousedown', this.prevYears);
this.flatpickr.nextMonthNav.addEventListener('mousedown', this.nextYears);
}
}
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.prevYears);
(_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYears);
}
}
addYears(nbrYears) {
for (const year of this.years) {
year.add(nbrYears, 'years');
}
for (const [index, el] of this.yearElements.entries()) {
el.innerHTML = moment(this.years[index])
.locale(this.getMomentLang())
.format('YYYY');
}
this.setSelectedYear();
}
setSelectedYear() {
for (const year of this.yearElements) {
if (year.textContent === this.selectedYear) {
year.classList.add('selected');
}
else {
year.classList.remove('selected');
}
}
}
getConfig(nativePicker) {
const config = {
onChange: this.handleChange,
};
if (!nativePicker) {
config.onReady = this.handleReady;
}
return config;
}
handleChange(selectedDates, dateString) {
this.selectYear(selectedDates, dateString);
}
handleClose(selectedDates) {
return super.handleClose(selectedDates).then(() => {
this.selectYear(this.flatpickr.selectedDates, this.flatpickr.input.value);
});
}
handleReady(_, __, fp) {
this.bootstrapYearPicker(fp);
this.selectYear(fp.selectedDates, fp.input.value);
}
bootstrapYearPicker(fp) {
if (!this.nativePicker) {
fp.innerContainer.remove();
fp.currentYearElement.parentNode.remove();
fp.calendarContainer
.querySelectorAll('.flatpickr-month')[0]
.replaceWith(this.renderHeading());
fp.calendarContainer.append(this.renderYearPicker(fp));
}
}
renderHeading() {
return (h("span", { className: "datepicker-year-heading flatpickr-current-month" }, this.getLocalizedHeading()));
}
getLocalizedHeading() {
return this.translations.get('date-picker.year.heading', this.language);
}
renderYearPicker(fp) {
const halfInterval = YEAR_INTERVAL / 2;
return (h("div", { className: "datepicker-years-container" }, range(-halfInterval, halfInterval).map((index) => {
const year = moment().add(index, 'years');
const renderedYear = this.renderYear(year, fp);
this.years.push(year);
this.yearElements.push(renderedYear);
return renderedYear;
})));
}
renderYear(year, fp) {
return (h("div", { className: "datepicker-year", onClick: () => {
const date = moment(year).toDate();
fp.setDate(date, true);
fp.close();
} }, moment(year).locale(this.getMomentLang()).format('YYYY')));
}
selectYear(selectedDates, dateString) {
if (!this.nativePicker) {
for (const year of this.yearElements) {
if (dateString !== '' &&
selectedDates[0] &&
Number(year.textContent) === selectedDates[0].getFullYear()) {
this.selectedYear = year.textContent;
year.classList.add('selected');
}
else {
year.classList.remove('selected');
}
}
}
}
}