@progress/kendo-react-layout/tilelayout/TileLayout.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 w=require("react"),t=require("prop-types"),y=require("@progress/kendo-react-common"),S=require("./InternalTile.js");function k(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const s in d)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(d,s);Object.defineProperty(o,s,n.get?n:{enumerable:!0,get:()=>d[s]})}}return o.default=d,Object.freeze(o)}const a=k(w),v={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},g=class g extends a.Component{constructor(){super(...arguments),this._element=null,this.state={positions:(this.props.items||[]).map((o,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},o.defaultPosition)),activeHint:!1},this.focus=()=>{this._element&&this._element.focus()},this.update=(o,s,n,r=0,c=0)=>{if(s===0&&n===0&&!c&&!r)return;let p=!1;const m=this.state.positions.map(f=>Object.assign({},f)),i=m[o],u=m.find(f=>f.order===i.order+s);u&&u!==i&&(i.order+=s,u.order+=-s,p=!0);const h=i.col+n;n!==0&&h>=1&&h+i.colSpan<=(this.props.columns||3)+1&&(i.col=h,p=!0);const e=i.colSpan+c;c&&e>=1&&e+i.col<=(this.props.columns||3)+1&&(i.colSpan=e,p=!0);const l=i.rowSpan+r;r&&l>=1&&(i.rowSpan=l,p=!0),p&&(this.setState({positions:m}),y.dispatchEvent(this.props.onReposition,{},this,{value:m}))}}get element(){return this._element}static getDerivedStateFromProps(o,s){return o.positions?{positions:o.positions.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n))}:o.items&&(!s.positions||o.items.length!==s.positions.length)?{positions:o.items.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n.defaultPosition))}:null}render(){const{className:o,columns:s=3,columnWidth:n="1fr",gap:r,rowHeight:c="1fr",style:p,autoFlow:m="column",items:i=[]}=this.props,u=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,h={gridTemplateColumns:`repeat(${s}, minmax(0px, ${typeof n=="number"?n+"px":n}))`,gridAutoRows:`minmax(0px, ${typeof c=="number"?c+"px":c})`,gap:u,padding:u,...p};return a.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:y.classNames("k-tilelayout k-pos-relative",v[m],o),style:h,id:this.props.id,role:"list"},i.map((e,l)=>a.createElement(a.Fragment,{key:this.props.dataItemKey?y.getter(this.props.dataItemKey)(e):l},a.createElement(S.InternalTile,{update:this.update,defaultPosition:this.state.positions[l],index:l,resizable:e.resizable,reorderable:e.reorderable,style:e.style,header:e.header,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag,onPress:()=>this.setState({activeHint:!0}),onRelease:()=>this.setState({activeHint:!1})},e.item?e.item:a.createElement(a.Fragment,null,a.createElement("div",{className:"k-tilelayout-item-header k-card-header"},a.isValidElement(e.header)?e.header:a.createElement("div",{id:typeof e.header=="string"?e.header:this.props.id?`tilelayout-${this.props.id}-${l}`:`tilelayout-${l}`,className:"k-card-title"},e.header)),a.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))))),!this.state.activeHint&&a.createElement("div",{className:"k-layout-item-hint",style:{display:"none",zIndex:"1",height:"auto"}}))}};g.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func},g.displayName="KendoTileLayout";let b=g;exports.TileLayout=b;