@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
82 lines (81 loc) • 3.31 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 e from "react";
import { Calendar as N } from "@progress/kendo-react-dateinputs";
import { useInternationalization as A } from "@progress/kendo-react-intl";
import { Button as O } from "@progress/kendo-react-buttons";
import { ZonedDate as S, getDate as U, MS_PER_DAY as V } from "@progress/kendo-date-math";
import { Popup as W } from "@progress/kendo-react-popup";
import { useWindow as _, useAsyncFocusBlur as H } from "@progress/kendo-react-common";
import { calendarIcon as K } from "@progress/kendo-svg-icons";
import { useSchedulerPropsContext as L, useSchedulerElementContext as Y, useSchedulerDateFormatContext as Z, useSchedulerDateRangeContext as j, useSchedulerDateContext as q } from "../../../context/SchedulerContext.mjs";
import { toUTCDateTime as G } from "../../../utils/index.mjs";
const J = e.forwardRef((s, b) => {
var k;
const u = e.useRef(null), i = e.useRef(null);
e.useImperativeHandle(b, () => u.current);
const { timezone: d } = L(), x = S.fromLocalDate(s.value, d), z = U(x), m = Y(), a = _(m), [E, F] = e.useState("desktop"), [n, f] = e.useState(!1), [C, g] = e.useState(!1), p = A(), { dateFormat: R, shortDateFormat: w } = Z(), t = j(), [c] = q(), l = t.end.getTime() - t.start.getTime() > V * 27, M = p.format(
R,
l ? c : t.zonedStart,
l ? c : t.zonedEnd.addDays(-1)
), T = p.format(
w,
l ? c : t.zonedStart,
l ? c : t.zonedEnd.addDays(-1)
), B = e.useCallback(() => {
f(!n);
}, [n]), I = e.useCallback(() => {
g(!0);
}, []), P = e.useCallback(() => {
f(!1), g(!1);
}, []), y = e.useCallback(
(o) => {
if (s.onChange) {
const r = S.fromUTCDate(G(o.value), d);
s.onChange.call(void 0, {
...o,
value: r
});
}
f(!1);
},
[s.onChange, d]
), h = e.useCallback(() => {
a().matchMedia && F(a().matchMedia("(min-width: 1024px)").matches ? "desktop" : "mobile");
}, [a]);
e.useEffect(() => {
h();
const o = a().ResizeObserver, r = o && new o(h);
return r && r.observe(m.current), () => {
o && r.disconnect();
};
}, [h, m, a]), e.useEffect(() => {
n && C && i.current && i.current.focus();
}, [C, n]);
const { onFocus: v, onBlur: D } = H({ onFocus: I, onBlur: P });
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
O,
{
ref: u,
onFocus: v,
onBlur: D,
fillMode: "flat",
className: "k-nav-current",
icon: "calendar",
svgIcon: K,
"aria-live": "polite",
tabIndex: -1,
onClick: B
},
E === "desktop" ? M : T
), /* @__PURE__ */ e.createElement(W, { anchor: (k = u.current) == null ? void 0 : k.element, show: n }, /* @__PURE__ */ e.createElement(N, { ref: i, onFocus: v, onBlur: D, onChange: y, value: z })));
});
J.displayName = "KendoReactSchedulerNavigationDatePicker";
export {
J as NavigationDatePicker
};