@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
125 lines (124 loc) • 4.41 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as o from "react";
import { View as h } from "./View.mjs";
import { CalendarViewEnum as i } from "../models/CalendarViewEnum.mjs";
import { classNames as p } from "@progress/kendo-react-common";
import { cloneDate as m } from "@progress/kendo-date-math";
import { MIN_DATE as u, MAX_DATE as d } from "../../utils.mjs";
const n = 2, r = class r extends o.Component {
constructor(l) {
super(l), this._element = null, this.isActive = !1, this.focusActiveDate = () => {
if (!this._element)
return;
const e = this._element.querySelector("td.k-focus"), t = this._element.querySelector(".k-state-pending-focus");
e && e[0] && e[0].classList.remove("k-focus"), t && t.classList.add("k-focus"), this.isActive = !0;
}, this.blurActiveDate = () => {
if (!this._element)
return;
const e = this._element.querySelector("td.k-focus");
e && e.classList.remove("k-focus"), this.isActive = !1;
}, this.rotateSelectionRange = (e) => {
if (e.start === null || e.end === null)
return e;
const t = e.end < e.start;
return {
start: t ? e.end : e.start,
end: t ? e.start : e.end
};
}, this.handleWeekCellClick = (e, t, s) => {
const { onWeekSelect: a } = this.props;
a && s && a.call(void 0, e, t, s);
}, this.handleDateChange = (e, t = !1) => {
const { onChange: s } = this.props;
if (s) {
const a = {
syntheticEvent: e.syntheticEvent,
nativeEvent: e.nativeEvent,
value: m(e.value),
target: this,
isTodayClick: t
};
s.call(void 0, a);
}
};
}
get element() {
return this._element;
}
get weekNumber() {
return !!(this.props.showWeekNumbers && this.props.activeView === i.month);
}
get min() {
return this.props.min !== void 0 ? this.props.min : r.defaultProps.min;
}
get max() {
return this.props.max !== void 0 ? this.props.max : r.defaultProps.max;
}
componentDidUpdate() {
this.isActive && this.focusActiveDate();
}
render() {
const l = this.props.allowReverse ? this.rotateSelectionRange(this.props.selectionRange) : this.props.selectionRange, e = p("k-calendar-view k-align-items-start k-justify-content-center", {
"k-vstack": this.props.verticalView,
"k-hstack": !this.props.verticalView,
"k-calendar-monthview": this.props.activeView === i.month,
"k-calendar-yearview": this.props.activeView === i.year,
"k-calendar-decadeview": this.props.activeView === i.decade,
"k-calendar-centuryview": this.props.activeView === i.century
});
return /* @__PURE__ */ o.createElement(
"div",
{
ref: (t) => {
this._element = t;
},
className: e
},
this.props.dates.map((t) => /* @__PURE__ */ o.createElement("table", { className: "k-calendar-table", key: t.getTime(), role: "grid" }, /* @__PURE__ */ o.createElement(
h,
{
bus: this.props.bus,
weekDaysFormat: this.props.weekDaysFormat,
service: this.props.service,
key: t.getTime(),
direction: "horizontal",
activeView: this.props.activeView,
cellUID: this.props.cellUID,
viewDate: t,
min: this.min,
max: this.max,
focusedDate: this.props.focusedDate,
selectionRange: l,
selectedDate: this.props.value,
showWeekNumbers: this.weekNumber,
onChange: this.handleDateChange,
onWeekSelect: this.handleWeekCellClick,
onCellEnter: this.props.onCellEnter,
cell: this.props.cell,
weekCell: this.props.weekCell,
showOtherMonthDays: this.props.showOtherMonthDays,
allowReverse: this.props.allowReverse
}
)))
);
}
};
r.defaultProps = {
showWeekNumbers: !1,
views: n,
take: n,
allowReverse: !0,
weekDaysFormat: "short",
min: u,
max: d
};
let c = r;
export {
c as HorizontalViewList
};