@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
318 lines (317 loc) • 9.04 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 { useDir as de, classNames as me, useDraggable as o, IconWrap as T } from "@progress/kendo-react-common";
import { useInternationalization as ke, useLocalization as ge } from "@progress/kendo-react-intl";
import { xIcon as fe, caretAltLeftIcon as ve, caretAltRightIcon as be } from "@progress/kendo-svg-icons";
import { deleteTitle as W, messages as ze } from "../messages/index.mjs";
import { formatEventTime as he } from "../utils/index.mjs";
import { useSchedulerItem as Ce } from "../hooks/useSchedulerItem.mjs";
import { useEditable as Ee } from "../hooks/useEditable.mjs";
const Re = t.forwardRef(
(e, $) => {
const {
// Focus
onFocus: d,
onBlur: m,
// Mouse
onMouseDown: k,
onClick: g,
onMouseUp: f,
onMouseOut: v,
onMouseOver: b,
onMouseEnter: z,
onMouseLeave: h,
onDoubleClick: C,
onRemoveClick: E,
// Keyboard
onKeyUp: R,
onKeyDown: D,
onKeyPress: M,
// Drag
onPress: y,
onDrag: N,
onRelease: x,
// Resize
onResizePress: H,
onResizeEndDrag: I,
onResizeRelease: P,
onResizeStartDrag: F
} = e, { item: n, element: S } = Ce(e, $), K = de(S), w = t.useRef(null), L = t.useRef(null), O = t.useRef(null), U = t.useRef(null), l = Ee(e.editable), c = ke(), A = ge().toLanguageString(W, ze[W]), s = e.group.resources.find(
(a) => !!(a.colorField && a[a.colorField] !== "" && a[a.colorField] !== void 0)
), r = s && s.colorField && s[s.colorField], j = e.tabIndex !== void 0 ? e.tabIndex === null ? void 0 : e.tabIndex : e.selected ? 0 : -1, G = t.useMemo(
() => me(
{
"k-event": !e.resizeHint,
"k-selected": e.selected && l.select,
"k-event-drag-hint": e.dragHint,
"k-scheduler-marquee": e.resizeHint,
"k-marquee": e.resizeHint,
"k-first": e.resizeHint && !e.tail,
"k-last": e.resizeHint && !e.head
},
e.className
),
[e.resizeHint, e.selected, e.dragHint, e.tail, e.head, e.className, l.select]
), J = t.useMemo(
() => `${he(c, e.zonedStart, e.zonedEnd, e.isAllDay)}, ${e.title}`,
[c, e.isAllDay, e.title, e.zonedEnd, e.zonedStart]
), Q = t.useMemo(
() => ({
cursor: "pointer",
userSelect: "none",
borderColor: e.resizeHint ? void 0 : r,
backgroundColor: e.resizeHint ? void 0 : r,
touchAction: "none",
...e.style
}),
[r, e.style, e.resizeHint]
), V = t.useCallback(
(a) => {
d && d.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[d, n]
), X = t.useCallback(
(a) => {
m && m.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[m, n]
), Y = t.useCallback(
(a) => {
k && k.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[k, n]
), Z = t.useCallback(
(a) => {
g && g.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[g, n]
), _ = t.useCallback(
(a) => {
f && f.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[f, n]
), p = t.useCallback(
(a) => {
b && b.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[b, n]
), ee = t.useCallback(
(a) => {
v && v.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[v, n]
), te = t.useCallback(
(a) => {
z && z.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[z, n]
), ae = t.useCallback(
(a) => {
h && h.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[h, n]
), ne = t.useCallback(
(a) => {
C && C.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[C, n]
), le = t.useCallback(
(a) => {
E && E.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[E, n]
), re = t.useCallback(
(a) => {
D && D.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[D, n]
), oe = t.useCallback(
(a) => {
M && M.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[M, n]
), ce = t.useCallback(
(a) => {
R && R.call(void 0, {
syntheticEvent: a,
target: n.current
});
},
[R, n]
), se = t.useCallback(
(a) => {
y && y.call(void 0, {
dragEvent: a,
target: n.current
});
},
[y, n]
), ie = t.useCallback(
(a) => {
N && N.call(void 0, {
dragEvent: a,
target: n.current
});
},
[N, n]
), ue = t.useCallback(
(a) => {
x && x.call(void 0, {
dragEvent: a,
target: n.current
});
},
[x, n]
), i = t.useCallback(
(a) => {
H && H.call(void 0, {
dragEvent: a,
target: n.current
});
},
[H, n]
), q = t.useCallback(
(a) => {
F && F.call(void 0, {
dragEvent: a,
target: n.current
});
},
[F, n]
), B = t.useCallback(
(a) => {
I && I.call(void 0, {
dragEvent: a,
target: n.current
});
},
[I, n]
), u = t.useCallback(
(a) => {
P && P.call(void 0, {
dragEvent: a,
target: n.current
});
},
[P, n]
);
return o(S, {
onPress: se,
onDrag: ie,
onRelease: ue
}), o(w, {
onPress: i,
onDrag: B,
onRelease: u
}), o(L, {
onPress: i,
onDrag: q,
onRelease: u
}), o(O, {
onPress: i,
onDrag: q,
onRelease: u
}), o(U, {
onPress: i,
onDrag: B,
onRelease: u
}), /* @__PURE__ */ t.createElement(
"div",
{
ref: S,
id: e.id,
style: Q,
tabIndex: j,
className: G,
role: "button",
"aria-label": J,
onFocus: V,
onBlur: X,
onMouseUp: _,
onMouseDown: Y,
onClick: Z,
onMouseOver: p,
onMouseOut: ee,
onMouseEnter: te,
onMouseLeave: ae,
onDoubleClick: ne,
onKeyDown: re,
onKeyPress: oe,
onKeyUp: ce,
"data-group-index": e.group.index,
"data-range-index": e.range.index
},
e.children,
!e.resizeHint && /* @__PURE__ */ t.createElement("span", { className: "k-event-actions" }, l.remove && /* @__PURE__ */ t.createElement(
"a",
{
tabIndex: -1,
"aria-hidden": "true",
className: "k-link k-event-delete",
title: A,
"aria-label": A,
onClick: le
},
/* @__PURE__ */ t.createElement(T, { name: "x", icon: fe })
), e.head && /* @__PURE__ */ t.createElement(
T,
{
name: K === "rtl" ? "caret-alt-left" : "caret-alt-right",
icon: K === "rtl" ? ve : be
}
)),
l.resize && e.vertical && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { className: "k-resize-handle k-resize-n", ref: O }), /* @__PURE__ */ t.createElement("span", { className: "k-resize-handle k-resize-s", ref: U })),
l.resize && !e.vertical && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { className: "k-resize-handle k-resize-w", ref: L }), /* @__PURE__ */ t.createElement("span", { className: "k-resize-handle k-resize-e", ref: w })),
e.resizeHint && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-marquee-color", style: { borderColor: r, backgroundColor: r } }), /* @__PURE__ */ t.createElement("div", { className: "k-marquee-text" }, !e.tail && /* @__PURE__ */ t.createElement("div", { className: "k-label-top" }, c.formatDate(e.zonedStart, e.format)), !e.head && /* @__PURE__ */ t.createElement("div", { className: "k-label-bottom" }, c.formatDate(e.zonedEnd, e.format))))
);
}
);
Re.displayName = "KendoReactSchedulerItem";
export {
Re as SchedulerItem
};