@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
715 lines (714 loc) • 22.1 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 n from "react";
import { SchedulerOccurrenceDialog as Mt } from "../components/SchedulerOccurrenceDialog.mjs";
import { SchedulerForm as Kt } from "../components/SchedulerForm.mjs";
import { SchedulerRemoveDialog as Tt } from "../components/SchedulerRemoveDialog.mjs";
import { useId as Nt, Keys as z } from "@progress/kendo-react-common";
import { SchedulerDrag as Pt } from "../views/common/SchedulerDrag.mjs";
import { SchedulerResize as Ut } from "../views/common/SchedulerResize.mjs";
import { SchedulerViewItem as Vt } from "./SchedulerViewItem.mjs";
import { SchedulerEditItemContext as Xt } from "../context/SchedulerEditItemContext.mjs";
import { useFormItem as Yt, FORM_ITEM_ACTION as I } from "./hooks/use-form-item.mjs";
import { useShowOccurrenceDialog as Ht, SHOW_OCCURRENCE_DIALOG_ACTION as d } from "./hooks/use-show-occurrence-dialog.mjs";
import { useRemoveItem as Lt, REMOVE_ITEM_ACTION as C } from "./hooks/use-remove-item.mjs";
import { useShowRemoveDialog as Gt, SHOW_REMOVE_DIALOG_ACTION as A } from "./hooks/use-show-remove-item-dialog.mjs";
import { useDragItem as Wt, DRAG_ITEM_ACTION as y } from "./hooks/use-drag-item.mjs";
import { useResizeItem as Zt, RESIZE_ITEM_ACTION as m } from "./hooks/use-resize-item.mjs";
import { useSeries as jt, SERIES_ACTION as D } from "./hooks/use-series.mjs";
import { ITEMS_SELECT_ACTION as g } from "../hooks/use-items-selection.mjs";
import { useSchedulerViewSelectedItemsContext as qt, useSchedulerViewItemsContext as Jt, useSchedulerViewFocusedItemsContext as Qt, useSchedulerViewFocusedSlotsContext as $t } from "../context/SchedulerViewContext.mjs";
import { ITEMS_FOCUS_ACTION as X } from "../hooks/use-items-focus.mjs";
import { SchedulerItemSelectionContext as eo } from "../context/SchedulerContext.mjs";
import { useEditable as to } from "../hooks/useEditable.mjs";
import { SLOTS_FOCUS_ACTION as R } from "../hooks/use-slots-focus.mjs";
const oo = n.forwardRef(
(t, i) => {
const {
_ref: s,
itemRef: Ke,
onDataAction: M,
ignoreIsAllDay: K,
viewItem: Te,
series: Ne,
onSeriesChange: Pe,
form: Ue,
formItem: Ve,
onFormItemChange: Xe,
drag: Ye,
dragItem: He,
onDragItemChange: Le,
resize: Ge,
resizeItem: We,
onResizeItemChange: Ze,
removeDialog: je,
removeItem: qe,
onRemoveItemChange: Je,
occurrenceDialog: Qe,
showOccurrenceDialog: $e,
onShowOccurrenceDialogChange: et,
showRemoveDialog: tt,
onShowRemoveDialogChange: ot,
onFocus: Y,
onFocusAction: H,
onMouseDown: L,
onMouseDownAction: G,
onMouseUp: W,
onMouseUpAction: Z,
onClick: j,
onClickAction: q,
onDoubleClick: J,
onDoubleClickAction: Q,
onRemoveClick: $,
onRemoveClickAction: ee,
onPress: te,
onPressAction: oe,
onDrag: re,
onDragAction: ae,
onRelease: ie,
onReleaseAction: le,
onResizePress: ne,
onResizePressAction: ce,
onResizeStartDrag: se,
onResizeStartDragAction: me,
onResizeEndDrag: de,
onResizeEndDragAction: ye,
onResizeRelease: ue,
onResizeReleaseAction: ge,
onOccurrenceClick: fe,
onOccurrenceClickAction: Ie,
onSeriesClick: Ae,
onSeriesClickAction: Ee,
onKeyDown: he,
onKeyDownAction: Ce,
onKeyUp: De,
onKeyUpAction: Re,
onRemoveConfirm: ve,
onRemoveConfirmAction: Se,
onFormSubmit: pe,
onFormSubmitAction: be,
onCancel: ke,
onCancelAction: we
} = { ...k, ...t }, [rt, at] = n.useState(t.tabIndex), Be = n.useRef(null), l = n.useRef(null), it = Nt();
n.useImperativeHandle(Be, () => ({ props: t, element: l.current && l.current.element })), n.useImperativeHandle(i, () => Be.current), n.useImperativeHandle(s, () => l.current), n.useImperativeHandle(Ke, () => l.current);
const Oe = Te || k.viewItem, Fe = Ye || k.drag, Me = Ge || k.resize, lt = Ue || k.form, nt = Qe || k.occurrenceDialog, ct = je || k.removeDialog, T = to(t.editable), [N, v] = qt(), [P, , U] = jt(null, Ne, Pe), [w, st, O] = Yt({ series: P, onDataAction: M }, [
null,
Ve,
Xe
]), [E, mt, f] = Wt(
{ dataItem: t.dataItem, ignoreIsAllDay: t.ignoreIsAllDay, isAllDay: t.isAllDay, onDataAction: M },
[null, He, Le]
), [h, dt, u] = Zt(
{ dataItem: t.dataItem, onDataAction: M },
[null, We, Ze]
), [S, yt, _] = Lt({ series: P, onDataAction: M }, [
null,
qe,
Je
]), [V, ut, p] = Gt(
!1,
tt,
ot
), [x, gt, b] = Ht(
!1,
$e,
et
), [ze] = Jt(), [, _e] = Qt(), [, B] = $t(), xe = !!(l.current && N && N.some((o) => o.current === l.current)), c = n.useMemo(
() => ({
selected: xe,
series: P,
formItem: w,
dragItem: E,
resizeItem: h,
removeItem: S,
showRemoveDialog: V,
showOccurrenceDialog: x
}),
[E, w, S, h, xe, P, x, V]
), a = n.useMemo(
() => ({
[D.set]: U,
[D.toggle]: U,
[D.reset]: U,
[g.select]: v,
[g.add]: v,
[g.remove]: v,
[g.reset]: v,
[g.selectNext]: v,
[g.selectPrev]: v,
[I.set]: O,
[I.setMaster]: O,
[I.reset]: O,
[I.complete]: O,
[C.set]: _,
[C.reset]: _,
[C.complete]: _,
[d.close]: b,
[d.open]: b,
[d.set]: b,
[d.toggle]: b,
[d.reset]: b,
[A.close]: p,
[A.open]: p,
[A.set]: p,
[A.toggle]: p,
[A.reset]: p,
[y.start]: f,
[y.drag]: f,
[y.complete]: f,
[y.completeOccurrence]: f,
[y.completeSeries]: f,
[y.set]: f,
[y.reset]: f,
[y.dragSelected]: f,
[m.start]: u,
[m.startDrag]: u,
[m.startDragSelected]: u,
[m.endDrag]: u,
[m.endDragSelected]: u,
[m.complete]: u,
[m.completeOccurrence]: u,
[m.completeSeries]: u,
[m.set]: u,
[m.reset]: u,
[X.next]: _e,
[X.prev]: _e,
[R.left]: B,
[R.right]: B,
[R.up]: B,
[R.down]: B,
null: () => {
}
}),
[
f,
O,
v,
_,
u,
U,
b,
p,
_e,
B
]
), ft = n.useCallback(
(o) => {
if (H) {
const e = H(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
Y && Y.call(void 0, o);
},
[a, Y, H, t, c]
), It = n.useCallback(
(o) => {
if (G) {
const e = G(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
L && L.call(void 0, o);
},
[a, L, G, t, c]
), At = n.useCallback(
(o) => {
if (Z) {
const e = Z(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
W && W.call(void 0, o);
},
[a, W, Z, t, c]
), [, Et] = n.useContext(eo), ht = n.useCallback(
(o) => {
if (q) {
Et(l.current);
const e = q(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
j && j.call(void 0, o);
},
[a, j, q, t, c]
), Ct = n.useCallback(
(o) => {
if (Q) {
const e = Q(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
J && J.call(void 0, o);
},
[Q, J, t, a, c]
), Dt = n.useCallback(
(o) => {
if (ee) {
const e = ee(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }));
}
$ && $.call(void 0, o);
},
[ee, $, t, a, c]
), Rt = n.useCallback(
(o) => {
if (oe) {
const e = oe(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }, o));
}
te && te.call(void 0, o);
},
[oe, te, t, a, c]
), vt = n.useCallback(
(o) => {
if (ae) {
const e = ae(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
re && re.call(void 0, o);
},
[ae, re, t, a, c]
), St = n.useCallback(
(o) => {
if (le) {
const e = le(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
ie && ie.call(void 0, o);
},
[le, ie, t, a, c]
), pt = n.useCallback(
(o) => {
if (ce) {
const e = ce(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
ne && ne.call(void 0, o);
},
[ce, ne, t, c, a]
), bt = n.useCallback(
(o) => {
if (me) {
const e = me(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
se && se.call(void 0, o);
},
[se, me, t, a, c]
), kt = n.useCallback(
(o) => {
if (ye) {
const e = ye(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
de && de.call(void 0, o);
},
[de, ye, t, a, c]
), wt = n.useCallback(
(o) => {
if (ge) {
const e = ge(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.dragEvent.originalEvent
)
) : a[e.type](
{ ...e, item: l },
o.dragEvent.originalEvent
));
}
ue && ue.call(void 0, o);
},
[ge, ue, t, a, c]
), Ot = n.useCallback(
(o) => {
if (be) {
const e = be(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }, o));
}
pe && pe.call(void 0, o);
},
[be, pe, t, c, a]
), F = n.useCallback(
(o) => {
if (we) {
const e = we(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }, o));
}
ke && ke.call(void 0, o);
},
[we, ke, t, c, a]
), zt = n.useCallback(
(o) => {
if (Ie) {
const e = Ie(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }, o));
}
fe && fe.call(void 0, o);
},
[Ie, fe, t, c, a]
), _t = n.useCallback(
(o) => {
if (Ee) {
const e = Ee(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type]({ ...r, item: l }, o)
) : a[e.type]({ ...e, item: l }, o));
}
Ae && Ae.call(void 0, o);
},
[Ee, Ae, t, c, a]
), xt = n.useCallback(
(o) => {
if (Ce) {
const e = Ce(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.syntheticEvent
)
) : a[e.type]({ ...e, item: l }, o.syntheticEvent));
}
he && he.call(void 0, o);
},
[Ce, he, t, c, a]
), Bt = n.useCallback(
(o) => {
if (Re) {
const e = Re(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.syntheticEvent
)
) : a[e.type]({ ...e, item: l }, o.syntheticEvent));
}
De && De.call(void 0, o);
},
[Re, De, t, c, a]
), Ft = n.useCallback(
(o) => {
if (Se) {
const e = Se(o, t, c);
e && (Array.isArray(e) ? e.filter(Boolean).map(
(r) => r && a[r.type](
{ ...r, item: l },
o.syntheticEvent
)
) : a[e.type]({ ...e, item: l }, o.syntheticEvent));
}
ve && ve.call(void 0, o);
},
[Se, ve, t, c, a]
);
return n.useEffect(() => {
const o = ze.length && ze[0].current === l.current;
at(
t.tabIndex !== void 0 ? t.tabIndex === null ? void 0 : t.tabIndex : N.length === 0 && o ? 0 : void 0
);
}, [ze, t.tabIndex, N.length]), /* @__PURE__ */ n.createElement(
Xt,
{
props: t,
form: [w, st, O],
drag: [E, mt, f],
resize: [h, dt, u],
remove: [S, yt, _],
showRemoveDialog: [V, ut, p],
showOccurrenceDialog: [x, gt, b]
},
/* @__PURE__ */ n.createElement(
Oe,
{
...t,
_ref: l,
itemRef: l,
selected: xe,
tabIndex: rt,
id: it,
onKeyDown: xt,
onKeyUp: Bt,
onFocus: ft,
onMouseUp: At,
onMouseDown: It,
onClick: ht,
onDoubleClick: Ct,
onRemoveClick: Dt,
onPress: Rt,
onDrag: vt,
onRelease: St,
onResizePress: pt,
onResizeEndDrag: kt,
onResizeStartDrag: bt,
onResizeRelease: wt
}
),
E && T.drag && (Array.isArray(E) ? E.map((o, e) => /* @__PURE__ */ n.createElement(
Fe,
{
key: e,
ignoreIsAllDay: K,
dataItem: o,
vertical: t.vertical,
viewItem: Oe,
item: t.item
}
)) : /* @__PURE__ */ n.createElement(
Fe,
{
ignoreIsAllDay: K,
dataItem: E,
vertical: t.vertical,
viewItem: Oe,
item: t.item
}
)),
h && T.resize && (Array.isArray(h) ? h.map((o, e) => /* @__PURE__ */ n.createElement(
Me,
{
key: e,
format: t.format,
ignoreIsAllDay: K,
dataItem: o,
viewItem: t.viewItem,
item: t.item,
vertical: t.vertical
}
)) : /* @__PURE__ */ n.createElement(
Me,
{
format: t.format,
ignoreIsAllDay: K,
dataItem: h,
viewItem: t.viewItem,
item: t.item,
vertical: t.vertical
}
)),
w && !x && T.edit && /* @__PURE__ */ n.createElement(
lt,
{
dataItem: w,
onSubmit: Ot,
onClose: F,
onCancel: F
}
),
x && /* @__PURE__ */ n.createElement(
nt,
{
dataItem: w || E || h || S,
isRemove: S !== null,
onClose: F,
onOccurrenceClick: zt,
onSeriesClick: _t
}
),
V && S && T.remove && /* @__PURE__ */ n.createElement(
ct,
{
dataItem: S,
onClose: F,
onCancel: F,
onConfirm: Ft
}
)
);
}
), k = {
viewItem: Vt,
drag: Pt,
resize: Ut,
form: Kt,
occurrenceDialog: Mt,
removeDialog: Tt,
onClickAction: (t, i, s) => [
{
type: t.syntheticEvent.metaKey || t.syntheticEvent.ctrlKey ? s.selected && !s.dragItem && !s.resizeItem ? g.remove : g.add : g.select
}
],
onDoubleClickAction: (t, i) => i.editable ? [
{ type: I.set, payload: i.dataItem },
i.isRecurring && { type: d.open }
].filter(Boolean) : [],
onRemoveClickAction: (t, i) => i.editable ? [
{ type: C.set, payload: i.dataItem },
i.isRecurring ? { type: d.open } : { type: A.open }
] : [],
onPressAction: (t, i) => i.editable ? { type: y.start, payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY } } : [],
onDragAction: (t, i) => i.editable ? {
type: t.dragEvent.originalEvent.metaKey || t.dragEvent.originalEvent.ctrlKey ? y.dragSelected : y.drag,
payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY }
} : [],
onReleaseAction: (t, i, s) => i.editable && s.dragItem ? i.isRecurring && !i.isException && s.series === null ? { type: d.open } : {
type: i.isRecurring ? s.series ? y.completeSeries : y.completeOccurrence : y.complete,
payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY }
} : [],
onResizePressAction: (t, i) => i.editable ? { type: m.start, payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY } } : [],
onResizeStartDragAction: (t, i) => i.editable ? {
type: t.dragEvent.originalEvent.metaKey || t.dragEvent.originalEvent.ctrlKey ? m.startDragSelected : m.startDrag,
payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY }
} : [],
onResizeEndDragAction: (t, i) => i.editable ? {
type: t.dragEvent.originalEvent.metaKey || t.dragEvent.originalEvent.ctrlKey ? m.endDragSelected : m.endDrag,
payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY }
} : [],
onResizeReleaseAction: (t, i, s) => i.editable && s.resizeItem ? i.isRecurring && !i.isException && s.series === null ? { type: d.open } : {
type: i.isRecurring ? s.series ? m.completeSeries : m.completeOccurrence : m.complete,
payload: { x: t.dragEvent.clientX, y: t.dragEvent.clientY }
} : [],
onOccurrenceClickAction: (t, i, s) => s.dragItem ? [{ type: y.completeOccurrence }, { type: d.close }] : s.resizeItem ? [{ type: m.completeOccurrence }, { type: d.close }] : s.formItem ? [
{ type: D.set, payload: !1 },
{ type: I.set, payload: i.dataItem },
{ type: d.close }
] : s.removeItem ? [
{ type: D.set, payload: !1 },
{ type: C.set, payload: i.dataItem },
{ type: A.open },
{ type: d.close }
] : [],
onSeriesClickAction: (t, i, s) => s.dragItem ? [{ type: y.completeSeries }, { type: d.close }] : s.resizeItem ? [{ type: m.completeSeries }, { type: d.close }] : s.formItem ? [
{ type: D.set, payload: !0 },
{ type: I.setMaster, payload: i.dataItem },
{ type: d.close }
] : s.removeItem ? [
{ type: D.set, payload: !0 },
{ type: C.set, payload: i.dataItem },
{ type: A.open },
{ type: d.close }
] : [],
onKeyDownAction: (t, i) => {
switch (t.syntheticEvent.keyCode) {
case z.enter:
return [
{ type: I.set, payload: i.dataItem },
i.isRecurring && { type: d.open }
];
case z.tab:
return [
{
type: t.syntheticEvent.shiftKey ? X.prev : X.next,
ignoreIsAllDay: i.ignoreIsAllDay
},
{
type: t.syntheticEvent.shiftKey ? g.selectPrev : g.selectNext,
ignoreIsAllDay: i.ignoreIsAllDay
}
];
case z.up:
return [
!!(i.slots.length && i.slots[0]._ref.current) && {
type: R.up,
slot: i.slots[0]._ref
}
];
case z.right:
return [
!!(i.slots.length && i.slots[0]._ref.current) && {
type: R.right,
slot: i.slots[0]._ref
}
];
case z.down:
return [
!!(i.slots.length && i.slots[i.slots.length - 1]._ref.current) && {
type: R.down,
slot: i.slots[i.slots.length - 1]._ref
}
];
case z.left:
return [
!!(i.slots.length && i.slots[0]._ref.current) && {
type: R.left,
slot: i.slots[0]._ref
}
];
default:
return;
}
},
onFormSubmitAction: (t) => [
{ type: I.complete, payload: t.value }
],
onRemoveConfirmAction: () => [
{ type: C.complete },
{ type: d.close }
],
onCancelAction: () => [
{ type: D.reset },
{ type: C.reset },
{ type: I.reset },
{ type: y.reset },
{ type: m.reset },
{ type: A.reset },
{ type: d.reset }
]
};
oo.displayName = "KendoReactSchedulerEditItem";
export {
oo as SchedulerEditItem,
k as schedulerEditItemDefaultProps
};