@progress/kendo-react-scheduler/items/SchedulerItem.mjs

React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package

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