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