@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
171 lines (170 loc) • 5.98 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 { CalendarViewEnum as g } from "../models/CalendarViewEnum.mjs";
import { domContainerFactory as r } from "../../utils.mjs";
import { canUseDOM as v, strippedClassNames as i, uButton as M, uCalendar as s } from "@progress/kendo-react-common";
class K {
constructor() {
this.calendarHeight = 0, this.headerHeight = 0, this.monthViewHeight = 0, this.yearViewHeight = 0, this.decadeViewHeight = 0, this.centuryViewHeight = 0, this.navigationItemHeight = 0, this.scrollableContentHeight = 0, this.scrollableYearContentHeight = 0, this.calendarWidth = 0, this.monthViewWidth = 0, this.yearViewWidth = 0, this.decadeViewWidth = 0, this.centuryViewWidth = 0, this.scrollableContentWidth = 0, this.didCalculate = !1, this.hostContainer = null;
}
ensureHeights() {
this.calendarHeight === void 0 && this.calculateHeights();
}
calculateHeights(o, c) {
if (!v)
return;
const h = r("div"), w = r("ul"), k = r("li"), C = r("td"), x = r("th"), b = r("tr"), B = r("tbody"), O = r("thead"), f = r("table"), e = c && c.uCalendar, W = c && c.uButton, Y = i(
M.wrapper({
c: W,
fillMode: "flat",
size: "medium",
rounded: "medium",
themeColor: "primary"
}),
s.title({ c: e })
), $ = () => h(
`
<span class="${Y}">
<span class="${i(M.text({ c: W }))}">March 2017</span>
</span>
<span class="${i(s.spacer({ c: e }))}"></span>
<span class="${i(s.nav({ c: e }))}"><button class="${i(
s.today({ c: e })
)}">TODAY</button></span>
`,
i(s.header({ c: e, vertical: !0 }))
), q = () => f(
[
O(
[
b(
[x("MO", i(s.th({ c: e })))],
i(s.tr({ c: e }))
)
],
i(s.thead({ c: e }))
)
],
i(s.table({ c: e, weekdays: !0 }))
), S = (t, a) => new Array(t).fill("1").map(a), N = (t, a = 1) => f(
[
B(
[b([C("1", i(s.td({ c: e, isWeek: !0 })))])].concat(
S(
t,
() => b(
S(
a,
(d) => C(
`<span class="${i(
s.link({ c: e })
)}">${d}</span>`,
i(s.td({ c: e }))
)
),
i(s.tr({ c: e }))
)
)
),
i(s.tbody({ c: e }))
)
],
i(s.table({ c: e }))
), m = (t) => h(
t,
i(
s.scrollableSelector({
c: e
}),
s.scrollable({
c: e,
horizontal: !0
})
)
), A = (t, a, d) => h(
d ? [$(), q(), m([t, t])] : [$(), m([t, t])],
a,
{ left: "-10000px", position: "absolute" }
), I = /* @__PURE__ */ (() => {
let t;
return () => v ? (t || (t = h(
[m([w([k("<span>FEB</span>")])])],
i(s.navigation({ c: e })),
{ left: "0px", position: "absolute" }
)), t) : null;
})(), y = ({ cells: t, rows: a }, d, T) => {
let V;
return () => v ? (V || (V = A(N(a, t), d, T)), V) : null;
}, p = (t) => t.querySelector(
`.${i(s.scrollableSelector({ c: e }))}`
), H = (t) => {
const a = p(t);
return a.className = `${a.className} scrollable-horizontal`, t;
}, z = y(
{ cells: 7, rows: 6 },
i(s.view({ c: e, month: !0 })),
!0
), D = y(
{ cells: 5, rows: 3 },
i(s.view({ c: e, year: !0 })),
!1
), F = y(
{ cells: 5, rows: 2 },
i(s.view({ c: e, decade: !0 })),
!1
), L = () => H(z()), P = () => H(D()), R = () => H(F()), n = (t) => parseFloat(window.getComputedStyle(t).height) || t.offsetHeight, u = (t) => {
const a = window.getComputedStyle(t);
return parseFloat(a.width) + parseFloat(a.paddingLeft) + parseFloat(a.paddingRight) || t.offsetWidth;
}, l = (t) => t.querySelector("tbody");
this.didCalculate = !0, o && (this.hostContainer = o), this.batch(z(), (t) => {
const a = l(t);
this.calendarHeight = n(t), this.monthViewHeight = n(a), this.headerHeight = n(a.children[0]), this.scrollableContentHeight = n(p(t));
}), this.batch(L(), (t) => {
const a = l(t);
this.calendarWidth = u(t), this.monthViewWidth = u(a), this.scrollableContentWidth = u(p(t));
}), this.batch(D(), (t) => {
this.yearViewHeight = n(l(t)), this.scrollableYearContentHeight = n(p(t));
}), this.batch(P(), (t) => {
this.yearViewWidth = u(l(t));
}), this.batch(F(), (t) => {
this.decadeViewHeight = n(l(t)), this.centuryViewHeight = this.decadeViewHeight;
}), this.batch(R(), (t) => {
this.decadeViewWidth = u(l(t)), this.centuryViewWidth = this.decadeViewWidth;
}), this.batch(I(), (t) => {
this.navigationItemHeight = n(t.querySelector("li"));
});
}
viewHeight(o) {
return this.viewDimension(o, "height");
}
viewWidth(o) {
return this.viewDimension(o, "width");
}
viewDimension(o, c) {
const h = c === "height" ? "ViewHeight" : "ViewWidth";
switch (o) {
case g.month:
return this[`month${h}`];
case g.year:
return this[`year${h}`];
case g.decade:
return this[`decade${h}`];
case g.century:
return this[`century${h}`];
default:
return 1;
}
}
batch(o, c) {
const h = this.hostContainer || document.body, w = h.appendChild(o);
c(w), h.removeChild(w);
}
}
export {
K as DOMService
};