@progress/kendo-react-scheduler/items/SchedulerViewItem.js

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("react"),re=require("./SchedulerItem.js"),I=require("../utils/index.js"),_=require("../views/common/utils.js"),h=require("../constants/index.js"),ie=require("@progress/kendo-react-intl"),M=require("./SchedulerItemContent.js"),w=require("@progress/kendo-react-common"),b=require("@progress/kendo-svg-icons"),ce=require("../hooks/useRowSync.js"),le=require("../hooks/useEditable.js"),N=require("../context/SchedulerViewContext.js"),se=require("../context/SchedulerContext.js");function oe(e){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const d in e)if(d!=="default"){const S=Object.getOwnPropertyDescriptor(e,d);Object.defineProperty(f,d,S.get?S:{enumerable:!0,get:()=>e[d]})}}return f.default=e,Object.freeze(f)}const t=oe(ne),ae=1,j=t.forwardRef((e,f)=>{const{item:d,_ref:S,itemRef:$,...L}=e,E=t.useRef(void 0),c=t.useRef(null),A=t.useRef(null),q=t.useRef(null),G=le.useEditable(e.editable);t.useImperativeHandle(A,()=>({props:e,element:c.current&&c.current.element})),t.useImperativeHandle(f,()=>A.current),t.useImperativeHandle(S,()=>c.current),t.useImperativeHandle($,()=>c.current);const K=d||F.item,v=ie.useInternationalization(),[J]=N.useSchedulerViewItemsContext(),[Q]=N.useSchedulerViewSlotsContext(),R=se.useSchedulerElementContext(),[U,y]=t.useState(!0),[X,Y]=t.useState(!1),u=t.useRef(e.order),P=t.useRef(0),T=w.useDir(R),C=t.useMemo(()=>e.isAllDay?v.toString(e.zonedStart,"t"):v.format("{0:t} - {1:t}",e.zonedStart,e.zonedEnd),[v,e.isAllDay,e.zonedEnd,e.zonedStart]),k=t.useMemo(()=>`(${C}): ${e.title}`,[C,e.title]),V=(n,r)=>{let l=1;return n.forEach(i=>{const a=r.filter(g=>D(i.current.props,g.props));a.length>l&&(l=a.length)}),l},Z=(n,r)=>n.map(i=>r.filter(a=>D(i.current.props,a.props))),D=(n,r)=>I.intersects(n.start,n.end,r.start,r.end)&&n.group.index===r.group.index&&n.range.index===r.range.index&&(e.ignoreIsAllDay||n.isAllDay===r.isAllDay),H=()=>{const n=(Q||[]).filter(s=>s.current&&D(s.current.props,e)),r=c.current&&c.current.element,l=I.first(n);if(n.length===0){y(!1);return}if(!l.current||!r)return;const i=_.getRect(l.current.element),a=[],g=[],x=[];(J||[]).forEach(s=>{s.current&&(s.current.props.dragHint?g.push(s.current):s.current.props.resizeHint?x.push(s.current):a.push(s.current))}),u.current=e.dragHint||e.resizeHint?I.calculateOrder(c.current,e.dragHint?g:x,n,e.ignoreIsAllDay):e.order||0;let m=e.dragHint||e.resizeHint?V(n,e.dragHint?g:x):V(n,a);const ee=Z(n,a);let z=0;if(ee.forEach(s=>{let O=0;s.forEach(o=>{I.intersects(o.props.start,o.props.end,e.start,e.end)&&!(e.dragHint||e.resizeHint)&&o._maxSiblingsPerSlot&&o._maxSiblingsPerSlot>m&&o.element!==r&&(m=o._maxSiblingsPerSlot);const B=_.getRect(o.element);o.props.order!==null&&o.props.order<u.current&&(O=B.top+B.height-i.top-h.BORDER_WIDTH*u.current+ae)}),O>z&&(z=O)}),n.length===0){y(!1);return}const te=G.add?20:0;i.width=e.vertical?i.width/m-h.BORDER_WIDTH-te/m:i.width*n.length-h.BORDER_WIDTH,i.height=e.vertical?i.height*n.length-h.BORDER_WIDTH:(e.resizeHint||e.dragHint)&&m<=1?i.height:e.style&&e.style.height?e.style.height:25,i.left=e.vertical?i.left+u.current*i.width+h.BORDER_WIDTH*u.current:i.left,i.top=e.vertical?i.top:i.top+z+h.BORDER_WIDTH*u.current,P.current=m,_.setRect(r,i),Y(!0),y(!0)},W=t.useCallback(n=>{const r=n&&n[0],l=q.current;E.current!==void 0&&window.cancelAnimationFrame(E.current),l&&r&&(l.width!==r.contentRect.width||l.height!==r.contentRect.height)&&(E.current=window.requestAnimationFrame(()=>{H()})),q.current={width:r.contentRect.width,height:r.contentRect.height}},[H]);t.useEffect(H);const p=c.current&&c.current.element?c.current.element.closest(".k-scheduler-layout"):null;return ce.useRowSync({element:p,selector:".k-resource-row",horizontalAttribute:"data-depth-index",verticalAttribute:"data-resource-index",applyTo:".k-resource-cell",syncHeight:e.isLast}),t.useEffect(()=>{if(!R.current)return;const n=window.ResizeObserver,r=n&&new n(W);return r&&r.observe(R.current),()=>{r&&r.disconnect()}},[W,R]),t.createElement(K,{...L,_ref:c,_maxSiblingsPerSlot:P,_order:u,itemRef:c,style:{visibility:X?void 0:"hidden",display:U?void 0:"none",...e.style}},!e.resizeHint&&t.createElement("span",{className:"k-event-actions"},e.tail&&t.createElement(w.IconWrap,{name:T==="rtl"?"caret-alt-right":"caret-alt-left",icon:T==="rtl"?b.caretAltRightIcon:b.caretAltLeftIcon}),e.isRecurring&&!e.isException&&t.createElement(w.IconWrap,{name:"arrow-rotate-cw",icon:b.arrowRotateCwIcon}),!e.isRecurring&&e.isException&&t.createElement(w.IconWrap,{name:"arrows-no-repeat",icon:b.arrowsNoRepeatIcon})),!e.resizeHint&&t.createElement("div",{title:k},!e.isAllDay&&t.createElement(M.SchedulerItemContent,{className:"k-event-time"},k),t.createElement(M.SchedulerItemContent,null,e.title)))}),F={item:re.SchedulerItem};j.displayName="KendoReactSchedulerViewItem";exports.SchedulerViewItem=j;exports.schedulerViewItemDefaultProps=F;