@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
138 lines (137 loc) • 5.25 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 r 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 r.Component {
constructor() {
super(...arguments), this._element = null, this.state = {
positions: (this.props.items || []).map(
(i, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
),
activeHint: !1
}, this.focus = () => {
this._element && this._element.focus();
}, this.update = (i, n, a, s = 0, p = 0) => {
if (n === 0 && a === 0 && !p && !s)
return;
let m = !1;
const c = this.state.positions.map((f) => Object.assign({}, f)), o = c[i], u = c.find((f) => f.order === o.order + n);
u && u !== o && (o.order += n, u.order += -n, m = !0);
const d = o.col + a;
a !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
const e = o.colSpan + p;
p && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
const l = o.rowSpan + s;
s && l >= 1 && (o.rowSpan = l, m = !0), m && (this.setState({ positions: c }), y(this.props.onReposition, {}, this, { value: c }));
};
}
/**
* Gets the HTML element of the TileLayout component.
*/
get element() {
return this._element;
}
/**
* @hidden
*/
static getDerivedStateFromProps(i, n) {
return i.positions ? {
positions: i.positions.map((a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a))
} : i.items && (!n.positions || i.items.length !== n.positions.length) ? {
positions: i.items.map(
(a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a.defaultPosition)
)
} : null;
}
render() {
const {
className: i,
columns: n = 3,
columnWidth: a = "1fr",
gap: s,
rowHeight: p = "1fr",
style: m,
autoFlow: c = "column",
items: o = []
} = this.props, u = 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 a == "number" ? a + "px" : a}))`,
gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
gap: u,
padding: u,
...m
};
return /* @__PURE__ */ r.createElement(
"div",
{
ref: (e) => {
this._element = e;
},
dir: this.props.dir,
className: w("k-tilelayout k-pos-relative", k[c], i),
style: d,
id: this.props.id,
role: "list"
},
o.map((e, l) => /* @__PURE__ */ r.createElement(r.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : l }, /* @__PURE__ */ r.createElement(
S,
{
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 : /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, r.isValidElement(e.header) ? e.header : /* @__PURE__ */ r.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
)), /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
))),
!this.state.activeHint && /* @__PURE__ */ r.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
);
}
};
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 g = h;
export {
g as TileLayout
};