@progress/kendo-react-layout/tilelayout/InternalTile.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 J=require("react"),a=require("prop-types"),k=require("@progress/kendo-react-common"),Q=require("./ResizeHandlers.js");function Z(t){const R=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const v in t)if(v!=="default"){const c=Object.getOwnPropertyDescriptor(t,v);Object.defineProperty(R,v,c.get?c:{enumerable:!0,get:()=>t[v]})}}return R.default=t,Object.freeze(R)}const n=Z(J),j=200,O={resizable:!0,reorderable:!0},D=t=>{var q,X,Y;const R=(q=t.reorderable)!=null?q:O.reorderable,v=(X=t.resizable)!=null?X:O.resizable,c=n.useRef(null),s=n.useRef(null),w=n.useRef(null),z=n.useRef(!1),T=n.useRef(!1),N=n.useRef(!1),$=n.useRef({x:0,y:0}),P=n.useRef({x:0,y:0}),u=n.useRef({x:0,y:0}),S=n.useRef(void 0),x=n.useRef(t),[b,p]=n.useState(!1),[H,M]=n.useState(!1),d=n.useCallback(()=>w.current?w.current.element:void 0,[]),E=n.useCallback(()=>{if(c.current&&s.current){const e=c.current.getBoundingClientRect();s.current.style.top=e.top+"px",s.current.style.left=e.left+"px",s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"}},[]),F=n.useCallback(()=>{E()},[E]),A=n.useCallback(()=>{setTimeout(()=>{E()},100)},[E]),U=n.useCallback(()=>{const e=d();if(!e||!s.current)return;const r=e.getBoundingClientRect(),i=r.top+u.current.y,o=r.left+u.current.x;s.current.style.top=`${i}px`,s.current.style.left=`${o}px`,s.current.style.display="block"},[d]),L=n.useCallback(()=>{z.current=T.current=!1,u.current={x:0,y:0},c.current&&s.current&&(c.current.style.zIndex="1",s.current.classList.remove("k-layout-item-hint-resize"),M(!1));const e=d();e&&(e.style.transform="translate(0px, 0px)",e.style.transition=`transform ${j}ms cubic-bezier(0.2, 0, 0, 1) 0s`,e.style.marginRight="0px",e.style.marginLeft="0px",e.style.height="100%",e.classList.remove("k-cursor-grabbing"),R&&e.classList.add("k-cursor-move")),t.onRelease()},[t,R,d]),W=n.useCallback((e,r)=>{if(r.end){L();return}if(!c.current||!s.current)return;const i=e.clientX,o=e.clientY;T.current=!0;const f=(r.direction!=="ns"?i-P.current.x:0)*(b?-1:1),l=r.direction!=="ew"?o-P.current.y:0,h=d();if(h&&(b?h.style.marginLeft=-f+"px":h.style.marginRight=-f+"px",h.style.height=`calc(100% + ${l}px)`),s.current.classList.add("k-layout-item-hint-resize"),S.current)return;let g=0,y=0;const C=c.current.getBoundingClientRect();f>C.width/t.defaultPosition.colSpan/3&&(g=1),f<-C.width/t.defaultPosition.colSpan/1.25&&(g=-1),l>C.height/t.defaultPosition.rowSpan/3&&(y=1),l<-C.height/t.defaultPosition.rowSpan/1.25&&(y=-1),(g!==0||y!==0)&&t.update(t.index,0,0,y,g)},[b,t,L,d]),I=n.useCallback(e=>{var o;const r=d();if(!r)return;if(P.current={x:e.event.clientX,y:e.event.clientY},N.current=!1,(o=t.ignoreDrag)!=null&&o.call(t,e.event.originalEvent)){N.current=!0;return}c.current&&(c.current.style.zIndex="10",M(!0)),r.classList.remove("k-cursor-move"),r.classList.add("k-cursor-grabbing");const i=r.getBoundingClientRect();$.current={x:e.event.clientX-i.x,y:e.event.clientY-i.y},t.onPress()},[t,d]),_=n.useCallback(e=>{var h;if(N.current)return;const r=d();if(e.event.originalEvent.defaultPrevented||!r)return;z.current=!0,e.event.originalEvent.preventDefault();const i=r.getBoundingClientRect();if(u.current={x:e.event.clientX-i.x-$.current.x+u.current.x,y:e.event.clientY-i.y-$.current.y+u.current.y},r.style.transform=`translate(${u.current.x}px, ${u.current.y}px)`,r.style.transition="transform 0s",S.current)return;let o=0,f=0;u.current.y>.7*i.height/t.defaultPosition.rowSpan&&(f=1),u.current.y<.7*-i.height/t.defaultPosition.rowSpan&&(f=-1),u.current.x>.7*i.width/t.defaultPosition.colSpan&&(o=1),u.current.x<.7*-i.width/t.defaultPosition.colSpan&&(o=-1),t.update(t.index,f,b?-o:o,0,0);const l=(h=c.current)==null?void 0:h.closest(".k-tilelayout");if(l&&s.current){const g=l.getBoundingClientRect(),y=k.getScrollbarWidth()||50;e.event.clientX<g.left-y||e.event.clientX>g.right-y||e.event.clientY<g.top||e.event.clientY>g.bottom?s.current.style.display="none":s.current.style.display="block"}},[t,b,d]);n.useEffect(()=>{c.current&&(getComputedStyle(c.current).direction==="rtl"&&p(!0),s.current&&(s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"))},[]);const B=n.useRef(null);(Y=w.current)!=null&&Y.element&&(B.current=w.current.element.getBoundingClientRect()),n.useLayoutEffect(()=>{const e=d();if(!e)return;const r=e.getBoundingClientRect(),i=B.current;if(!(i!=null&&i.width)){x.current=t;return}if(T.current){const l=r.width-i.width;if(b){const y=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=y-l+"px"}else{const y=parseFloat(e.style.marginRight||"0");e.style.marginRight=y+l+"px"}P.current.x+=b?-l:l;const h=r.height-i.height,g=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${g+h}px)`,P.current.y+=h}const o=i.left-r.left,f=i.top-r.top;if(o===0&&f===0){x.current=t;return}if(z.current){(x.current.defaultPosition.order!==t.defaultPosition.order||x.current.defaultPosition.col!==t.defaultPosition.col)&&(u.current.x=0,u.current.y=0,e.style.transform="",U()),x.current=t;return}if(Math.abs(f)<15&&Math.abs(o)<15){x.current=t;return}requestAnimationFrame(()=>{const l=c.current;l&&(l.style.transform=`translate(${o}px, ${f}px)`,l.style.transition="transform 0s",requestAnimationFrame(()=>{l.style.transform="",l.style.transition=`transform ${j}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))}),x.current=t}),k.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(S.current),S.current=window.setTimeout(()=>{S.current=void 0},200));const m=t.defaultPosition,K={gridColumnStart:m.col,gridColumnEnd:`span ${m.colSpan}`,gridRowStart:m.row,gridRowEnd:`span ${m.rowSpan}`,outline:"none",order:m.order,display:"block",...t.hintStyle},V={gridColumnStart:m.col,gridColumnEnd:`span ${m.colSpan}`,gridRowStart:m.row,gridRowEnd:`span ${m.rowSpan}`,order:m.order},G=n.createElement("div",{role:"listitem",tabIndex:0,"aria-labelledby":typeof t.header=="string"?t.header:`tile-${t.index}`,"aria-keyshortcuts":"Enter","aria-dropeffect":"execute","aria-grabbed":!1,className:k.classNames("k-tilelayout-item k-card",t.className),style:{height:"100%",...V,...t.style},onMouseDown:F,onMouseUp:A},t.children,n.createElement(Q.ResizeHandlers,{onPress:I,onResize:W,resizable:v,rtl:b}));return n.createElement(n.Fragment,null,H&&n.createElement("div",{ref:e=>{s.current=e},style:{position:"fixed",...K},className:k.classNames("k-layout-item-hint",t.hintClassName)}),n.createElement(k.Draggable,{ref:e=>{w.current=e,c.current=e?e.element:null},onDrag:R?_:void 0,onRelease:R?L:void 0,onPress:R?I:void 0},G))};D.propTypes={update:a.func.isRequired,index:a.number.isRequired,defaultPosition:a.object.isRequired,ignoreDrag:a.func,onPress:a.func.isRequired,onRelease:a.func.isRequired,children:a.node,style:a.object,className:a.string,hintStyle:a.object,hintClassName:a.string,header:a.any,body:a.any,item:a.any,resizable:a.oneOf(["horizontal","vertical",!0,!1]),reorderable:a.bool};D.displayName="KendoTileLayoutItem";D.defaultProps=O;exports.InternalTile=D;