@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"),l=require("prop-types"),g=require("@progress/kendo-react-common"),b=require("./ResizeHandlers.js");function x(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 p=x(y),f=200,h=class h extends p.Component{constructor(){super(...arguments),this.state={rtl:!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,n=t.clientY;this.resizing=!0;const a=(e.direction!=="ns"?s-this.pressXY.x:0)*(this.state.rtl?-1:1),i=e.direction!=="ew"?n-this.pressXY.y:0;if(this.dragElement&&(this.state.rtl?this.dragElement.style.marginLeft=-a+"px":this.dragElement.style.marginRight=-a+"px",this.dragElement.style.height=`calc(100% + ${i}px)`),this.hintElement.classList.add("k-layout-item-hint-resize"),this.preventDataOps)return;let r=0,o=0;const d=this.element.getBoundingClientRect();a>d.width/this.props.defaultPosition.colSpan/3&&(r=1),a<-d.width/this.props.defaultPosition.colSpan/1.25&&(r=-1),i>d.height/this.props.defaultPosition.rowSpan/3&&(o=1),i<-d.height/this.props.defaultPosition.rowSpan/1.25&&(o=-1),(r!==0||o!==0)&&this.props.update(this.props.index,0,0,o,r)},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.hintElement&&(this.element.style.zIndex="10",this.hintElement.style.display="block"),this.dragElement.classList.remove("k-cursor-grab"),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.handleDrag=t=>{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 n=0,a=0;this.currentTranslate.y>.7*s.height/this.props.defaultPosition.rowSpan&&(a=1),this.currentTranslate.y<.7*-s.height/this.props.defaultPosition.rowSpan&&(a=-1),this.currentTranslate.x>.7*s.width/this.props.defaultPosition.colSpan&&(n=1),this.currentTranslate.x<.7*-s.width/this.props.defaultPosition.colSpan&&(n=-1),this.props.update(this.props.index,a,this.state.rtl?-n:n,0,0)},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.hintElement.style.display="none");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-grab"))}}get reorderable(){return this.props.reorderable!==void 0?this.props.reorderable:h.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(){g.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:h.defaultProps.resizable,s={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,outline:"none",order:t.order,display:"none",...this.props.hintStyle},n={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,order:t.order},a=p.createElement("div",{ref:i=>{this.draggable=i?{element:i}:null},className:g.classNames("k-tilelayout-item k-card",{"k-cursor-grab":this.reorderable},this.props.className),style:{height:"100%",...n,...this.props.style}},this.props.children,p.createElement(b.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,resizable:e,rtl:this.state.rtl}));return p.createElement("div",{ref:i=>{this.element=i},style:n},p.createElement("div",{ref:i=>{this.hintElement=i},style:{position:"absolute",...s},className:g.classNames("k-layout-item-hint",this.props.hintClassName)}),p.createElement(g.Draggable,{ref:i=>{this.draggable=i},onDrag:this.props.reorderable?this.handleDrag:void 0,onRelease:this.props.reorderable?this.handleRelease:void 0,onPress:this.props.reorderable?this.handlePress:void 0},a))}getSnapshotBeforeUpdate(t){return this.oldSize={},this.dragElement&&(this.oldSize=this.dragElement.getBoundingClientRect()),null}componentDidUpdate(t){const e=this.dragElement;if(!e)return;const s=e.getBoundingClientRect(),n=this.oldSize;if(this.resizing){const r=s.width-n.width;if(this.state.rtl){const u=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=u-r+"px"}else{const u=parseFloat(e.style.marginRight||"0");e.style.marginRight=u+r+"px"}this.pressXY.x+=this.state.rtl?-r:r;const o=s.height-n.height,d=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${d+o}px)`,this.pressXY.y+=o}const a=n.left-s.left,i=n.top-s.top;if(!(a===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="");return}Math.abs(i)<15&&Math.abs(a)<15||requestAnimationFrame(()=>{const r=this.element;r&&(r.style.transform=`translate(${a}px, ${i}px)`,r.style.transition="transform 0s",requestAnimationFrame(()=>{r.style.transform="",r.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}}};h.propTypes={defaultPosition:l.object.isRequired,style:l.object,className:l.string,hintStyle:l.object,hintClassName:l.string,header:l.any,body:l.any,item:l.any,resizable:l.oneOf(["horizontal","vertical",!0,!1]),reorderable:l.bool},h.displayName="KendoTileLayoutItem",h.defaultProps={resizable:!0,reorderable:!0};let m=h;exports.InternalTile=m;