@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 © 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 y=require("react"),a=require("prop-types"),u=require("@progress/kendo-react-common"),b=require("./ResizeHandlers.js");function E(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const d=E(y),f=200,p=class p extends d.Component{constructor(){super(...arguments),this.state={rtl:!1,visibleHint:!1},this.oldSize={},this.draggable=null,this.dragging=!1,this.resizing=!1,this.element=null,this.hintElement=null,this.ignoreDrag=!1,this.pressOffset={x:0,y:0},this.pressXY={x:0,y:0},this.currentTranslate={x:0,y:0},this.preventDataOps=void 0,this.handleResize=(t,e)=>{if(e.end){this.handleRelease();return}if(!this.element||!this.hintElement)return;const s=t.clientX,l=t.clientY;this.resizing=!0;const r=(e.direction!=="ns"?s-this.pressXY.x:0)*(this.state.rtl?-1:1),i=e.direction!=="ew"?l-this.pressXY.y:0;if(this.dragElement&&(this.state.rtl?this.dragElement.style.marginLeft=-r+"px":this.dragElement.style.marginRight=-r+"px",this.dragElement.style.height=`calc(100% + ${i}px)`),this.hintElement.classList.add("k-layout-item-hint-resize"),this.preventDataOps)return;let n=0,o=0;const h=this.element.getBoundingClientRect();r>h.width/this.props.defaultPosition.colSpan/3&&(n=1),r<-h.width/this.props.defaultPosition.colSpan/1.25&&(n=-1),i>h.height/this.props.defaultPosition.rowSpan/3&&(o=1),i<-h.height/this.props.defaultPosition.rowSpan/1.25&&(o=-1),(n!==0||o!==0)&&this.props.update(this.props.index,0,0,o,n)},this.handlePress=t=>{if(!this.dragElement)return;if(this.pressXY={x:t.event.clientX,y:t.event.clientY},this.ignoreDrag=!1,this.props.ignoreDrag&&this.props.ignoreDrag(t.event.originalEvent)){this.ignoreDrag=!0;return}this.element&&(this.element.style.zIndex="10",this.setState({visibleHint:!0})),this.dragElement.classList.remove("k-cursor-move"),this.dragElement.classList.add("k-cursor-grabbing");const e=this.dragElement.getBoundingClientRect();this.pressOffset={x:t.event.clientX-e.x,y:t.event.clientY-e.y},this.props.onPress()},this.handleDrag=t=>{var n;if(this.ignoreDrag)return;const e=this.dragElement;if(t.event.originalEvent.defaultPrevented||!e)return;this.dragging=!0,t.event.originalEvent.preventDefault();const s=e.getBoundingClientRect();if(this.currentTranslate={x:t.event.clientX-s.x-this.pressOffset.x+this.currentTranslate.x,y:t.event.clientY-s.y-this.pressOffset.y+this.currentTranslate.y},e.style.transform=`translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`,e.style.transition="transform 0s",this.preventDataOps)return;let l=0,r=0;this.currentTranslate.y>.7*s.height/this.props.defaultPosition.rowSpan&&(r=1),this.currentTranslate.y<.7*-s.height/this.props.defaultPosition.rowSpan&&(r=-1),this.currentTranslate.x>.7*s.width/this.props.defaultPosition.colSpan&&(l=1),this.currentTranslate.x<.7*-s.width/this.props.defaultPosition.colSpan&&(l=-1),this.props.update(this.props.index,r,this.state.rtl?-l:l,0,0);const i=(n=this.element)==null?void 0:n.closest(".k-tilelayout");if(i&&this.hintElement){const o=i.getBoundingClientRect(),h=u.getScrollbarWidth()||50;t.event.clientX<o.left-h||t.event.clientX>o.right-h||t.event.clientY<o.top||t.event.clientY>o.bottom?this.hintElement.style.display="none":this.hintElement.style.display="block"}},this.handleRelease=()=>{this.dragging=this.resizing=!1,this.currentTranslate={x:0,y:0},this.element&&this.hintElement&&(this.element.style.zIndex="1",this.hintElement.classList.remove("k-layout-item-hint-resize"),this.setState({visibleHint:!1}));const t=this.dragElement;t&&(t.style.transform="translate(0px, 0px)",t.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`,t.style.marginRight="0px",t.style.marginLeft="0px",t.style.height="100%",t.classList.remove("k-cursor-grabbing"),t.classList.add("k-cursor-move")),this.props.onRelease()},this.handleMouseDown=()=>{this.setInitialHintPosition()},this.handleMouseUp=()=>{setTimeout(()=>{this.setInitialHintPosition()},100)},this.calcNewHintPosition=()=>{if(!this.dragElement||!this.hintElement)return;const t=this.dragElement.getBoundingClientRect(),e=t.top+this.currentTranslate.y,s=t.left+this.currentTranslate.x;this.hintElement.style.top=`${e}px`,this.hintElement.style.left=`${s}px`,this.hintElement.style.display="block"}}get reorderable(){return this.props.reorderable!==void 0?this.props.reorderable:p.defaultProps.reorderable}get dragElement(){return this.draggable?this.draggable.element:void 0}componentDidMount(){this.element&&(getComputedStyle(this.element).direction==="rtl"&&this.setState({rtl:!0}),this.hintElement&&(this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"))}render(){u.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(this.preventDataOps),this.preventDataOps=window.setTimeout(()=>{this.preventDataOps=void 0},200));const t=this.props.defaultPosition,e=this.props.resizable!==void 0?this.props.resizable:p.defaultProps.resizable,s={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,outline:"none",order:t.order,display:"block",...this.props.hintStyle},l={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,order:t.order},r=d.createElement("div",{ref:i=>{this.draggable=i?{element:i}:null},role:"listitem",tabIndex:0,"aria-labelledby":typeof this.props.header=="string"?this.props.header:`tile-${this.props.index}`,"aria-keyshortcuts":"Enter",className:u.classNames("k-tilelayout-item k-card",{"k-cursor-move":this.reorderable},this.props.className),style:{height:"100%",...l,...this.props.style},onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp},this.props.children,d.createElement(b.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,resizable:e,rtl:this.state.rtl}));return d.createElement(d.Fragment,null,this.state.visibleHint&&d.createElement("div",{ref:i=>{this.hintElement=i},style:{position:"fixed",...s},className:u.classNames("k-layout-item-hint",this.props.hintClassName)}),d.createElement(u.Draggable,{ref:i=>{this.draggable=i,this.element=i?i.element:null},onDrag:this.props.reorderable?this.handleDrag:void 0,onRelease:this.props.reorderable?this.handleRelease:void 0,onPress:this.props.reorderable?this.handlePress:void 0},r))}getSnapshotBeforeUpdate(t){return this.oldSize={},this.dragElement&&(this.oldSize=this.dragElement.getBoundingClientRect()),null}setInitialHintPosition(){if(this.element&&this.hintElement){const t=this.element.getBoundingClientRect();this.hintElement.style.top=t.top+"px",this.hintElement.style.left=t.left+"px",this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"}}componentDidUpdate(t){const e=this.dragElement;if(!e)return;const s=e.getBoundingClientRect(),l=this.oldSize;if(this.resizing){const n=s.width-l.width;if(this.state.rtl){const g=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=g-n+"px"}else{const g=parseFloat(e.style.marginRight||"0");e.style.marginRight=g+n+"px"}this.pressXY.x+=this.state.rtl?-n:n;const o=s.height-l.height,h=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${h+o}px)`,this.pressXY.y+=o}const r=l.left-s.left,i=l.top-s.top;if(!(r===0&&i===0)){if(this.dragging){(t.defaultPosition.order!==this.props.defaultPosition.order||t.defaultPosition.col!==this.props.defaultPosition.col)&&(this.currentTranslate.x=0,this.currentTranslate.y=0,e.style.transform="",this.calcNewHintPosition());return}Math.abs(i)<15&&Math.abs(r)<15||requestAnimationFrame(()=>{const n=this.element;n&&(n.style.transform=`translate(${r}px, ${i}px)`,n.style.transition="transform 0s",requestAnimationFrame(()=>{n.style.transform="",n.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}}};p.propTypes={defaultPosition:a.object.isRequired,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},p.displayName="KendoTileLayoutItem",p.defaultProps={resizable:!0,reorderable:!0};let m=p;exports.InternalTile=m;