@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
124 lines (123 loc) • 6.53 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 t from "react";
import { SchedulerItem as Z } from "./SchedulerItem.mjs";
import { first as p, calculateOrder as ee, intersects as k } from "../utils/index.mjs";
import { getRect as T, setRect as te } from "../views/common/utils.mjs";
import { BORDER_WIDTH as d } from "../constants/index.mjs";
import { useInternationalization as ne } from "@progress/kendo-react-intl";
import { SchedulerItemContent as V } from "./SchedulerItemContent.mjs";
import { useDir as re, IconWrap as y } from "@progress/kendo-react-common";
import { caretAltRightIcon as ie, caretAltLeftIcon as le, arrowRotateCwIcon as ce, arrowsNoRepeatIcon as se } from "@progress/kendo-svg-icons";
import { useRowSync as oe } from "../hooks/useRowSync.mjs";
import { useEditable as ae } from "../hooks/useEditable.mjs";
import { useSchedulerViewItemsContext as ue, useSchedulerViewSlotsContext as me } from "../context/SchedulerViewContext.mjs";
import { useSchedulerElementContext as de } from "../context/SchedulerContext.mjs";
const fe = 1, he = t.forwardRef(
(e, N) => {
const { item: F, _ref: M, itemRef: L, ...W } = e, g = t.useRef(void 0), l = t.useRef(null), H = t.useRef(null), z = t.useRef(null), $ = ae(e.editable);
t.useImperativeHandle(H, () => ({ props: e, element: l.current && l.current.element })), t.useImperativeHandle(N, () => H.current), t.useImperativeHandle(M, () => l.current), t.useImperativeHandle(L, () => l.current);
const q = F || ge.item, S = ne(), [B] = ue(), [G] = me(), h = de(), [K, w] = t.useState(!0), [j, J] = t.useState(!1), u = t.useRef(e.order), x = t.useRef(0), A = re(h), D = t.useMemo(
() => e.isAllDay ? S.toString(e.zonedStart, "t") : S.format("{0:t} - {1:t}", e.zonedStart, e.zonedEnd),
[S, e.isAllDay, e.zonedEnd, e.zonedStart]
), P = t.useMemo(() => `(${D}): ${e.title}`, [D, e.title]), _ = (n, r) => {
let c = 1;
return n.forEach((i) => {
const a = r.filter((f) => I(i.current.props, f.props));
a.length > c && (c = a.length);
}), c;
}, Q = (n, r) => n.map((i) => r.filter((a) => I(i.current.props, a.props))), I = (n, r) => k(n.start, n.end, r.start, r.end) && n.group.index === r.group.index && n.range.index === r.range.index && (e.ignoreIsAllDay || n.isAllDay === r.isAllDay), R = () => {
const n = (G || []).filter((s) => s.current && I(s.current.props, e)), r = l.current && l.current.element, c = p(n);
if (n.length === 0) {
w(!1);
return;
}
if (!c.current || !r)
return;
const i = T(c.current.element), a = [], f = [], v = [];
(B || []).forEach((s) => {
s.current && (s.current.props.dragHint ? f.push(s.current) : s.current.props.resizeHint ? v.push(s.current) : a.push(s.current));
}), u.current = e.dragHint || e.resizeHint ? ee(
l.current,
e.dragHint ? f : v,
n,
e.ignoreIsAllDay
) : e.order || 0;
let m = e.dragHint || e.resizeHint ? _(n, e.dragHint ? f : v) : _(n, a);
const X = Q(n, a);
let b = 0;
if (X.forEach((s) => {
let E = 0;
s.forEach((o) => {
k(o.props.start, o.props.end, e.start, e.end) && !(e.dragHint || e.resizeHint) && o._maxSiblingsPerSlot && o._maxSiblingsPerSlot > m && o.element !== r && (m = o._maxSiblingsPerSlot);
const O = T(o.element);
o.props.order !== null && o.props.order < u.current && (E = O.top + O.height - i.top - d * u.current + fe);
}), E > b && (b = E);
}), n.length === 0) {
w(!1);
return;
}
const Y = $.add ? 20 : 0;
i.width = e.vertical ? i.width / m - d - Y / m : i.width * n.length - d, i.height = e.vertical ? i.height * n.length - d : (e.resizeHint || e.dragHint) && m <= 1 ? i.height : e.style && e.style.height ? e.style.height : 25, i.left = e.vertical ? i.left + u.current * i.width + d * u.current : i.left, i.top = e.vertical ? i.top : i.top + b + d * u.current, x.current = m, te(r, i), J(!0), w(!0);
}, C = t.useCallback(
(n) => {
const r = n && n[0], c = z.current;
g.current !== void 0 && window.cancelAnimationFrame(g.current), c && r && (c.width !== r.contentRect.width || c.height !== r.contentRect.height) && (g.current = window.requestAnimationFrame(() => {
R();
})), z.current = { width: r.contentRect.width, height: r.contentRect.height };
},
[R]
);
t.useEffect(R);
const U = l.current && l.current.element ? l.current.element.closest(".k-scheduler-layout") : null;
return oe({
element: U,
selector: ".k-resource-row",
horizontalAttribute: "data-depth-index",
verticalAttribute: "data-resource-index",
applyTo: ".k-resource-cell",
syncHeight: e.isLast
}), t.useEffect(() => {
if (!h.current)
return;
const n = window.ResizeObserver, r = n && new n(C);
return r && r.observe(h.current), () => {
r && r.disconnect();
};
}, [C, h]), /* @__PURE__ */ t.createElement(
q,
{
...W,
_ref: l,
_maxSiblingsPerSlot: x,
_order: u,
itemRef: l,
style: {
visibility: j ? void 0 : "hidden",
display: K ? void 0 : "none",
...e.style
}
},
!e.resizeHint && /* @__PURE__ */ t.createElement("span", { className: "k-event-actions" }, e.tail && /* @__PURE__ */ t.createElement(
y,
{
name: A === "rtl" ? "caret-alt-right" : "caret-alt-left",
icon: A === "rtl" ? ie : le
}
), e.isRecurring && !e.isException && /* @__PURE__ */ t.createElement(y, { name: "arrow-rotate-cw", icon: ce }), !e.isRecurring && e.isException && /* @__PURE__ */ t.createElement(y, { name: "arrows-no-repeat", icon: se })),
!e.resizeHint && /* @__PURE__ */ t.createElement("div", { title: P }, !e.isAllDay && /* @__PURE__ */ t.createElement(V, { className: "k-event-time" }, P), /* @__PURE__ */ t.createElement(V, null, e.title))
);
}
), ge = {
item: Z
};
he.displayName = "KendoReactSchedulerViewItem";
export {
he as SchedulerViewItem,
ge as schedulerViewItemDefaultProps
};