@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
150 lines (149 loc) • 6.4 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 i from "react";
import s from "prop-types";
import { cloneDate as k, weekInYear as R } from "@progress/kendo-date-math";
import { provideIntlService as M, registerForIntl as q } from "@progress/kendo-react-intl";
import { CalendarCell as x } from "./CalendarCell.mjs";
import { CalendarWeekCell as I } from "./CalendarWeekCell.mjs";
import { CalendarViewEnum as D } from "../models/CalendarViewEnum.mjs";
import { getToday as v, setTime as V } from "../../utils.mjs";
import { WeekNamesService as S } from "../services/WeekNamesService.mjs";
import { classNames as l, uCalendar as c } from "@progress/kendo-react-common";
const y = (g, t) => {
const e = t;
return /* @__PURE__ */ i.createElement("td", { key: g, role: "gridcell", className: l(c.td({ c: e, isEmpty: !0 })) }, " ");
}, u = class u extends i.Component {
constructor() {
super(...arguments), this.intl = null, this.weekService = null, this.buildWeekNumber = (t, e) => {
if (!this.firstDate(t))
return y(`week-cell-${e}`);
const a = this.firstDate(t), n = this.getWeekNumber(a), o = `kendo-react-calendar-week-cell-${n}`, m = {
value: n,
firstDate: a,
weekDays: t,
unstyled: this.props.unstyled,
onClick: this.handleWeekCellClick
};
return this.props.weekCell ? /* @__PURE__ */ i.createElement(this.props.weekCell, { ...m, key: o }, n) : /* @__PURE__ */ i.createElement(I, { ...m, key: o }, n);
}, this.buildRow = (t) => t.map((e, r) => {
if (!e)
return y(r);
const a = { "aria-selected": e.isSelected }, n = `kendo-react-calendar-cell-${e.value.getTime()}`, o = {
...a,
...e,
isDisabled: !e.isInRange,
view: this.props.activeView,
showOtherMonthDays: this.props.showOtherMonthDays,
allowReverse: this.props.allowReverse,
unstyled: this.props.unstyled,
onClick: this.handleClick,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
};
return this.props.cell ? /* @__PURE__ */ i.createElement(this.props.cell, { ...o, key: n }, e.formattedValue) : /* @__PURE__ */ i.createElement(x, { ...o, key: n }, e.formattedValue);
}), this.firstDate = (t) => {
const e = this.firstWeekDateContext(t);
return e ? e.value : null;
}, this.firstWeekDateContext = (t) => {
if (!this.weekNumber)
return null;
let e = 0, r = t[e];
for (; !r && e < t.length; )
r = t[++e];
return r;
}, this.handleClick = (t, e) => {
const { onChange: r } = this.props;
if (r && e) {
const a = {
value: k(t),
target: this,
nativeEvent: e && e.nativeEvent,
syntheticEvent: e
};
r.call(void 0, a);
}
}, this.handleWeekCellClick = (t, e, r) => {
const { onWeekSelect: a } = this.props, n = e.findIndex((o) => o && o.value === t);
a && r && a.call(void 0, t, n, r);
}, this.handleMouseEnter = (t) => {
const { onCellEnter: e } = this.props;
e && e.call(void 0, k(t));
}, this.handleMouseLeave = (t) => {
const { onCellLeave: e } = this.props;
e && e.call(void 0, k(t));
};
}
get min() {
return this.props.min;
}
get max() {
return this.props.max;
}
get isHorizontal() {
return this.props.direction === "horizontal";
}
get isMonthView() {
return this.props.activeView === D.month;
}
get weekNumber() {
return !!(this.props.showWeekNumbers && this.props.activeView === D.month);
}
get selectedDate() {
return this.props.selectedDate !== void 0 ? this.props.selectedDate : u.defaultProps.selectedDate;
}
render() {
const { service: t, weekDaysFormat: e, cellUID: r, focusedDate: a, bus: n, activeView: o, selectionRange: m, unstyled: w } = this.props, h = w && w.uCalendar;
this.intl = M(this), this.weekService = new S(this.intl);
const C = this.weekService.getWeekNames(this.weekNumber, e), N = t.rowLength(this.weekNumber), b = t.title(this.props.viewDate), E = v(), W = V(this.props.viewDate, E), O = t.data({
cellUID: r,
min: this.min,
max: this.max,
focusedDate: a,
isActiveView: !n.canMoveDown(o),
selectedDate: this.selectedDate,
selectionRange: m,
viewDate: W
});
return /* @__PURE__ */ i.createElement(i.Fragment, null, this.isMonthView && this.isHorizontal && /* @__PURE__ */ i.createElement("thead", { role: "rowgroup", className: l(c.thead({ c: h })) }, /* @__PURE__ */ i.createElement("tr", { role: "row", className: l(c.tr({ c: h })) }, C.map((p, d) => /* @__PURE__ */ i.createElement("th", { key: d, className: l(c.th({ c: h })) }, p)))), /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup", className: l(c.tbody({ c: h })) }, !this.isHorizontal && /* @__PURE__ */ i.createElement("tr", { role: "presentation", className: l(c.tr({ c: h })) }, /* @__PURE__ */ i.createElement(
"th",
{
scope: "col",
colSpan: N,
className: l(c.caption({ c: h }))
},
b
)), O.map((p, d) => /* @__PURE__ */ i.createElement("tr", { role: "row", className: l(c.tr({ c: h })), key: d }, this.weekNumber && this.buildWeekNumber(p, d), this.buildRow(p)))));
}
getWeekNumber(t) {
return !this.weekNumber || !this.intl ? null : R(t, this.intl.firstDay());
}
};
u.propTypes = {
activeRangeEnd: s.oneOf(["start", "end", null]),
activeView: s.number.isRequired,
cellUID: s.string.isRequired,
direction: s.oneOf(["horizontal", "vertical"]),
focusedDate: s.instanceOf(Date).isRequired,
max: s.instanceOf(Date).isRequired,
min: s.instanceOf(Date).isRequired,
onChange: s.func,
selectedDate: s.oneOfType([s.instanceOf(Date), s.arrayOf(s.instanceOf(Date))]),
showWeekNumbers: s.bool,
showOtherMonthDays: s.bool,
viewDate: s.instanceOf(Date).isRequired
}, u.defaultProps = {
direction: "vertical",
selectedDate: v(),
showWeekNumbers: !1
};
let f = u;
q(f);
export {
f as View
};