@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
238 lines (237 loc) • 10.2 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 a from "react";
import o from "prop-types";
import { classNames as p, uCalendar as m } from "@progress/kendo-react-common";
import { cloneDate as T, getDate as g, isEqualDate as E } from "@progress/kendo-date-math";
import { provideIntlService as N, registerForIntl as O } from "@progress/kendo-react-intl";
import { Virtualization as H } from "../../virtualization/Virtualization.mjs";
import { View as z } from "./View.mjs";
import { Header as A } from "./Header.mjs";
import { WeekNamesService as R } from "../services/WeekNamesService.mjs";
import { dateInRange as D, isInRange as _, getToday as q } from "../../utils.mjs";
import { CalendarViewEnum as c } from "../models/CalendarViewEnum.mjs";
import { TodayCommand as F } from "./TodayCommand.mjs";
const M = 5, d = class d extends a.Component {
constructor(n) {
super(n), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.weekService = null, this.focusActiveDate = () => {
if (!this._element)
return;
const e = this._element.querySelector("td.k-focus"), i = this._element.querySelector(".k-state-pending-focus");
e && e[0] && e[0].classList.remove("k-focus"), i && i.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.handleVirtualizationMount = (e) => {
if (this.virtualization = e, this.virtualization && this.table) {
this.table.style.transform = `translateY(${this.viewOffset}px)`;
const i = D(this.props.focusedDate, this.props.min, this.props.max), t = this.props.service.skip(i, this.props.min);
this.virtualization.scrollToIndex(t);
}
}, this.buildMonthView = (e, i) => {
const { unstyled: t } = this.props, s = t && t.uCalendar;
return /* @__PURE__ */ a.createElement(
"table",
{
key: "calendar-view-list-weekdays",
className: p(m.table({ c: s, weekdays: !0 })),
role: "grid",
tabIndex: this.props.tabIndex
},
/* @__PURE__ */ a.createElement("colgroup", null, e.map((l, r) => /* @__PURE__ */ a.createElement("col", { key: r }))),
/* @__PURE__ */ a.createElement("thead", { className: p(m.thead({ c: s })) }, /* @__PURE__ */ a.createElement("tr", { className: p(m.tr({ c: s })) }, i.map((l, r) => /* @__PURE__ */ a.createElement("th", { key: r, className: p(m.th({ c: s })) }, l))))
);
}, this.buildDates = (e, i) => {
const t = this.props.cellUID, { unstyled: s } = this.props, l = s && s.uCalendar;
return /* @__PURE__ */ a.createElement(
"table",
{
className: p(m.table({ c: l })),
ref: (r) => {
this.table = r;
},
role: "grid",
tabIndex: this.props.tabIndex,
"aria-activedescendant": t + this.props.focusedDate.getTime()
},
/* @__PURE__ */ a.createElement("colgroup", null, e.map((r, h) => /* @__PURE__ */ a.createElement("col", { key: h }))),
i.map((r) => /* @__PURE__ */ a.createElement(
z,
{
ref: (h) => {
this.calendarView || (this.calendarView = h);
},
key: r.getTime(),
activeView: this.props.activeView,
viewDate: r,
min: this.props.min,
max: this.props.max,
cellUID: t,
focusedDate: this.props.focusedDate,
cell: this.props.cell,
selectedDate: this.props.value,
showWeekNumbers: this.weekNumber,
onChange: this.handleDateChange,
bus: this.props.bus,
service: this.props.service,
weekCell: this.props.weekCell,
showOtherMonthDays: this.props.showOtherMonthDays,
unstyled: s
}
))
);
}, this.calculateHeights = () => {
if (!this.props.dom)
return;
const e = this.props.activeView === c.month ? this.props.dom.scrollableContentHeight : this.props.dom.scrollableYearContentHeight;
this.bottomOffset = e - this.props.dom.viewHeight(this.props.activeView), this.viewOffset = -1 * this.props.dom.headerHeight, this.viewHeight = this.props.dom.viewHeight(this.props.activeView) || 1;
}, this.getTake = (e, i) => Math.min(i - e, this.take), this.handleScrollAction = ({ index: e, scrollAction: i, pageAction: t }) => {
const s = t ? t.skip : this.state.skip;
if ((this.state.index !== e || this.state.skip !== s) && this.setState({ index: e, skip: s }), this.table && i) {
const l = `translateY(${i.offset}px)`;
this.table.style.transform = l;
}
}, this.handleTodayClick = (e) => {
this.shouldScroll = !0, this.handleDateChange.call(void 0, e, !0);
}, this.handleDateChange = (e, i = !1) => {
const { onChange: t } = this.props;
if (t) {
const s = {
syntheticEvent: e.syntheticEvent,
nativeEvent: e.nativeEvent,
value: T(e.value),
target: this,
isTodayClick: i
};
t.call(void 0, s);
}
}, this.lastView = this.props.activeView, this.lastFocus = this.props.focusedDate, this.state = {
skip: this.props.service.skip(this.props.focusedDate, this.props.min),
index: this.props.service.skip(this.props.focusedDate, this.props.min)
};
}
get element() {
return this._element;
}
get weekNames() {
return this.intl = N(this), this.weekService = new R(this.intl), this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat);
}
get weekNumber() {
return !!(this.props.showWeekNumbers && this.props.activeView === c.month);
}
get take() {
return this.props.take !== void 0 ? this.props.take : d.defaultProps.take;
}
get animate() {
return !!(this.props.smoothScroll && this.animateToIndex);
}
get todayIsInRange() {
return _(q(), g(this.props.min), g(this.props.max));
}
componentDidUpdate(n, e) {
this.shouldScroll = !1, this.indexToScroll !== void 0 && this.virtualization && this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](this.indexToScroll), this.isActive && this.focusActiveDate(), this.lastView = this.props.activeView, this.indexToScroll = void 0;
}
render() {
const { activeView: n, min: e, max: i, service: t, unstyled: s } = this.props, l = s && s.uCalendar;
this.calculateHeights();
const r = this.lastView !== n, h = D(this.props.focusedDate, e, i), u = r ? t.skip(h, e) : this.state.skip, w = t.total(e, i), x = this.getTake(u, w), y = t.addToDate(e, u), S = t.addToDate(e, this.state.index), k = new Array(t.rowLength(this.weekNumber)).fill(""), b = n !== this.lastView;
this.animateToIndex = !b, (b || !E(this.lastFocus, h) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(h, this.props.min)), this.lastFocus = h;
const C = p(
m.view({
c: l,
month: n === c.month,
year: n === c.year,
decade: n === c.decade,
century: n === c.century
})
), I = this.buildDates(k, t.datesList(y, x)), V = /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
A,
{
key: "calendar-view-list-header",
currentDate: S,
min: this.props.min,
max: this.props.max,
activeView: this.props.activeView,
bus: this.props.bus,
service: this.props.service,
headerTitle: this.props.headerTitle,
header: this.props.header,
unstyled: s,
commands: /* @__PURE__ */ a.createElement(
F,
{
min: this.props.min,
max: this.props.max,
onClick: this.handleTodayClick,
disabled: !this.todayIsInRange,
tabIndex: this.props.tabIndex,
unstyled: s
}
)
}
), this.props.activeView === c.month && this.buildMonthView(k, this.weekNames), /* @__PURE__ */ a.createElement(
H,
{
key: "calendar-view-list-content",
skip: u,
take: this.take,
total: w,
itemHeight: this.viewHeight,
topOffset: this.viewOffset,
bottomOffset: this.bottomOffset,
scrollOffsetSize: this.viewOffset,
maxScrollDifference: this.viewHeight,
onScroll: this.props.onScroll,
onScrollAction: this.handleScrollAction,
onMount: (f) => !this.virtualization && this.handleVirtualizationMount(f),
children: I,
tabIndex: this.props.tabIndex,
unstyled: s
}
));
return /* @__PURE__ */ a.createElement(
"div",
{
ref: (f) => {
this._element = f;
},
className: C
},
this.props.dom.didCalculate ? V : null
);
}
};
d.propTypes = {
activeView: o.number.isRequired,
bottomOffset: o.number,
cellUID: o.string.isRequired,
focusedDate: o.instanceOf(Date).isRequired,
max: o.instanceOf(Date).isRequired,
min: o.instanceOf(Date).isRequired,
onChange: o.func,
showWeekNumbers: o.bool,
smoothScroll: o.bool,
take: o.number,
value: o.instanceOf(Date),
viewHeight: o.number,
viewOffset: o.number,
weekDaysFormat: o.oneOf(["short", "abbreviated", "narrow"]),
tabIndex: o.number
}, d.defaultProps = {
take: M,
showWeekNumbers: !1,
weekDaysFormat: "short",
smoothScroll: !0
};
let v = d;
O(v);
export {
v as ViewList
};