@capaj/react-datetime
Version:
A lightweight but complete datetime picker React.js component
95 lines • 4.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const create_react_class_1 = __importDefault(require("create-react-class"));
const react_onclickoutside_1 = __importDefault(require("@capaj/react-onclickoutside"));
const DateTimePickerYears = react_onclickoutside_1.default(create_react_class_1.default({
render() {
const year = parseInt(this.props.viewDate.year() / 10, 10) * 10;
return (react_1.default.createElement("div", { className: "rdtYears" },
react_1.default.createElement("table", { key: "a" },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", { key: "prev", className: "rdtPrev", onClick: this.props.subtractTime(10, 'years') },
react_1.default.createElement("span", null, "\u2039")),
react_1.default.createElement("th", { key: "year", className: "rdtSwitch", onClick: this.props.showView('years'), colSpan: 2 }, `${year}-${year + 9}`),
react_1.default.createElement("th", { key: "next", className: "rdtNext", onClick: this.props.addTime(10, 'years') },
react_1.default.createElement("span", null, "\u203A"))))),
react_1.default.createElement("table", { key: "years" },
react_1.default.createElement("tbody", null, this.renderYears(year)))));
},
renderYears(year) {
let years = [];
let i = -1;
const rows = [];
const renderer = this.props.renderYear || this.renderYear;
const selectedDate = this.props.selectedDate;
const isValid = this.props.isValidDate || this.alwaysValidDate;
let classes;
let props;
let currentYear;
let isDisabled;
let noOfDaysInYear;
let daysInYear;
let validDay;
const irrelevantMonth = 0;
const irrelevantDate = 1;
year--;
while (i < 11) {
classes = 'rdtYear';
currentYear = this.props.viewDate.clone().set({
year,
month: irrelevantMonth,
date: irrelevantDate
});
noOfDaysInYear = currentYear.endOf('year').format('DDD');
daysInYear = Array.from({
length: Number(noOfDaysInYear)
}, (e, i) => i + 1);
validDay = daysInYear.find((d) => {
const day = currentYear.clone().dayOfYear(d);
return isValid(day);
});
isDisabled = validDay === undefined;
if (isDisabled)
classes += ' rdtDisabled';
if (selectedDate && selectedDate.year() === year)
classes += ' rdtActive';
props = {
key: year,
'data-value': year,
className: classes
};
if (!isDisabled)
props.onClick =
this.props.updateOn === 'years'
? this.updateSelectedYear
: this.props.setDate('year');
years.push(renderer(props, year, selectedDate && selectedDate.clone()));
if (years.length === 4) {
rows.push(react_1.default.createElement("tr", { key: i }, years));
years = [];
}
year++;
i++;
}
return rows;
},
updateSelectedYear(event) {
this.props.updateSelectedDate(event);
},
renderYear(props, year) {
return react_1.default.createElement("td", Object.assign({}, props), year);
},
alwaysValidDate() {
return 1;
},
handleClickOutside() {
this.props.handleClickOutside();
}
}));
exports.default = DateTimePickerYears;
//# sourceMappingURL=YearsView.js.map