@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
169 lines (168 loc) • 5.98 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 l from "react";
import { Keys as u } from "@progress/kendo-react-common";
import { setField as m, isGroupped as U, getField as j, findFirstItem as q } from "../utils/index.mjs";
import { SchedulerForm as z } from "../components/SchedulerForm.mjs";
import { SchedulerViewSlot as J } from "./SchedulerViewSlot.mjs";
import { useControlledState as M } from "../hooks/useControlledState.mjs";
import { useSchedulerFieldsContext as Q } from "../context/SchedulerContext.mjs";
import { SchedulerEditSlotContext as W } from "../context/SchedulerEditSlotContext.mjs";
import { SLOTS_SELECT_ACTION as X } from "../hooks/use-slots-selection.mjs";
import { DATA_ACTION as Y } from "../constants/index.mjs";
import { useEditable as Z } from "../hooks/useEditable.mjs";
import { useSchedulerViewSlotsContext as $, useSchedulerViewItemsContext as p, useSchedulerViewSelectedSlotsContext as ee, useSchedulerViewFocusedSlotsContext as te } from "../context/SchedulerViewContext.mjs";
import { SLOTS_FOCUS_ACTION as h } from "../hooks/use-slots-focus.mjs";
const le = l.forwardRef(
(t, D) => {
const {
_ref: v,
onDataAction: S,
viewSlot: x,
form: k,
formItem: w,
onFormItemChange: ne,
...T
} = t, [A, V] = l.useState(t.tabIndex), i = l.useRef(null), y = l.useRef(null);
l.useImperativeHandle(y, () => ({ props: t })), l.useImperativeHandle(D, () => y.current), l.useImperativeHandle(v, () => i.current);
const a = Z(t.editable), s = Q(), [r] = $(), [g] = p(), [b, I] = ee(), [, d] = te(), _ = k || F.form, O = x || F.viewSlot, [C, n] = M(null, w, t.onFormItemChange), R = b.some(
(e) => !!(e.current && e.current.props.start.getTime() === t.start.getTime() && e.current.props.end.getTime() === t.end.getTime() && e.current.props.index === t.index && e.current.props.group.index === t.group.index && e.current.props.range.index === t.range.index && e.current.props.isAllDay === t.isAllDay)
), f = l.useCallback(() => {
const e = {};
if (m(e, s.start, new Date(t.start.getTime())), m(e, s.end, new Date(t.end.getTime())), m(e, s.isAllDay, t.isAllDay), t.group.resources.length)
for (let o = 0; o < t.group.resources.length; o++) {
const c = t.group.resources[o];
if (U(t.group.resources)) {
const E = j(t.group.resources[o], c.valueField);
m(e, c.field, c.multiple ? [E] : E);
} else
m(e, c.field, c.multiple ? [] : void 0);
}
return e;
}, [s.start, s.end, s.isAllDay, t.start, t.end, t.isAllDay, t.group.resources]), K = l.useCallback(
(e) => {
a.select && I(
{
type: X.select,
slot: i
},
e.syntheticEvent
), t.onFocus && t.onFocus.call(void 0, e);
},
[I, a.select, t.onFocus]
), N = l.useCallback(
(e) => {
if (a.add) {
const o = f();
n(o, e);
}
t.onDoubleClick && t.onDoubleClick.call(void 0, e);
},
[f, a.add, t.onDoubleClick, n]
), H = l.useCallback(
(e) => {
let o;
switch (e.syntheticEvent.keyCode) {
case u.left:
if (!r)
return;
e.syntheticEvent.preventDefault(), d({ type: h.left, slot: i }, e.syntheticEvent);
break;
case u.right:
if (!r)
return;
e.syntheticEvent.preventDefault(), d({ type: h.right, slot: i }, e.syntheticEvent);
break;
case u.up:
if (!r)
return;
e.syntheticEvent.preventDefault(), d({ type: h.up, slot: i }, e.syntheticEvent);
break;
case u.down:
if (!r)
return;
e.syntheticEvent.preventDefault(), d({ type: h.down, slot: i }, e.syntheticEvent);
break;
case u.enter: {
if (!r || !a.add)
return;
const c = f();
n(c);
break;
}
case u.tab:
o = q(e.target);
break;
}
o && (e.syntheticEvent.preventDefault(), o.element && o.element.focus());
},
[f, d, a.add, n, r]
), L = l.useCallback(
(e) => {
S && S.call(
void 0,
{
type: Y.create,
series: !1,
dataItem: e.value
},
e
), n(null, e.syntheticEvent);
},
[S, n]
), P = l.useCallback(
(e) => {
n(null, e.syntheticEvent);
},
[n]
), B = l.useCallback(
(e) => {
n(null, e);
},
[n]
), G = l.useCallback(
(e, o) => {
n && n(e, o);
},
[n]
);
return l.useEffect(() => {
const e = r.length && r[0].current === i.current;
V(
t.tabIndex !== void 0 ? t.tabIndex === null ? void 0 : t.tabIndex : b.length === 0 && e && g.length === 0 ? 0 : void 0
);
}, [g, t.tabIndex, b.length, r]), /* @__PURE__ */ l.createElement(W, { props: t, form: [C, G] }, /* @__PURE__ */ l.createElement(
O,
{
...T,
_ref: i,
selected: R,
tabIndex: A,
onFocus: K,
onDoubleClick: N,
onKeyDown: H
}
), C && /* @__PURE__ */ l.createElement(
_,
{
dataItem: C,
onSubmit: L,
onClose: B,
onCancel: P
}
));
}
), F = {
viewSlot: J,
form: z
};
le.displayName = "KendoReactSchedulerEditSlot";
export {
le as SchedulerEditSlot,
F as schedulerEditSlotDefaultProps
};