UNPKG

@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
/** * @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 };