UNPKG

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