@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),N={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"},h=class h 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))},this.focus=()=>{this._element&&this._element.focus()},this.update=(o,s,n,r=0,l=0)=>{if(s===0&&n===0&&!l&&!r)return;let c=!1;const p=this.state.positions.map(f=>Object.assign({},f)),i=p[o],m=p.find(f=>f.order===i.order+s);m&&m!==i&&(i.order+=s,m.order+=-s,c=!0);const g=i.col+n;n!==0&&g>=1&&g+i.colSpan<=(this.props.columns||3)+1&&(i.col=g,c=!0);const e=i.colSpan+l;l&&e>=1&&e+i.col<=(this.props.columns||3)+1&&(i.colSpan=e,c=!0);const u=i.rowSpan+r;r&&u>=1&&(i.rowSpan=u,c=!0),c&&(this.setState({positions:p}),y.dispatchEvent(this.props.onReposition,{},this,{value:p}))}}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:l="1fr",style:c,autoFlow:p="column",items:i=[]}=this.props,m=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,g={gridTemplateColumns:`repeat(${s}, minmax(0px, ${typeof n=="number"?n+"px":n}))`,gridAutoRows:`minmax(0px, ${typeof l=="number"?l+"px":l})`,gap:m,padding:m,...c};return a.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:y.classNames("k-tilelayout k-pos-relative",N[p],o),style:g,id:this.props.id,children:i.map((e,u)=>a.createElement(a.Fragment,{key:this.props.dataItemKey?y.getter(this.props.dataItemKey)(e):u},a.createElement(S.InternalTile,{update:this.update,defaultPosition:this.state.positions[u],index:u,resizable:e.resizable,reorderable:e.reorderable,style:e.style,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag},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("h5",{className:"k-card-title"},e.header)),a.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body)))))})}};h.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},h.displayName="KendoTileLayout";let b=h;exports.TileLayout=b;