@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
125 lines (124 loc) • 4.74 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as a from "react";
import t from "prop-types";
import { dispatchEvent as y, classNames as w, getter as b } from "@progress/kendo-react-common";
import { InternalTile as S } from "./InternalTile.mjs";
const k = {
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(
(r, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, r.defaultPosition)
)
}, this.focus = () => {
this._element && this._element.focus();
}, this.update = (r, n, i, s = 0, l = 0) => {
if (n === 0 && i === 0 && !l && !s)
return;
let m = !1;
const p = this.state.positions.map((g) => Object.assign({}, g)), o = p[r], c = p.find((g) => g.order === o.order + n);
c && c !== o && (o.order += n, c.order += -n, m = !0);
const d = o.col + i;
i !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
const e = o.colSpan + l;
l && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
const u = o.rowSpan + s;
s && u >= 1 && (o.rowSpan = u, m = !0), m && (this.setState({ positions: p }), y(this.props.onReposition, {}, this, { value: p }));
};
}
/**
* Gets the HTML element of the TileLayout component.
*/
get element() {
return this._element;
}
/**
* @hidden
*/
static getDerivedStateFromProps(r, n) {
return r.positions ? {
positions: r.positions.map((i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i))
} : r.items && (!n.positions || r.items.length !== n.positions.length) ? {
positions: r.items.map(
(i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
)
} : null;
}
render() {
const {
className: r,
columns: n = 3,
columnWidth: i = "1fr",
gap: s,
rowHeight: l = "1fr",
style: m,
autoFlow: p = "column",
items: o = []
} = this.props, c = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof i == "number" ? i + "px" : i}))`,
gridAutoRows: `minmax(0px, ${typeof l == "number" ? l + "px" : l})`,
gap: c,
padding: c,
...m
};
return /* @__PURE__ */ a.createElement(
"div",
{
ref: (e) => {
this._element = e;
},
dir: this.props.dir,
className: w("k-tilelayout k-pos-relative", k[p], r),
style: d,
id: this.props.id,
children: o.map((e, u) => /* @__PURE__ */ a.createElement(a.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : u }, /* @__PURE__ */ a.createElement(
S,
{
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 : /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, a.isValidElement(e.header) ? e.header : /* @__PURE__ */ a.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ 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 f = h;
export {
f as TileLayout
};