@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
142 lines (141 loc) • 4.98 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import { useCallback as R, useRef as T, useMemo as F, useState as z, useEffect as Z } from "react";
import o from "prop-types";
import { dispatchEvent as ee, classNames as K, getter as oe } from "@progress/kendo-react-common";
import { InternalTile as te } from "./InternalTile.mjs";
const re = {
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: void 0
}, u = {
columns: 3,
columnWidth: "1fr",
rowHeight: "1fr",
autoFlow: "column",
items: []
}, U = t.forwardRef((j, O) => {
const {
className: V,
columns: i = u.columns,
columnWidth: d = u.columnWidth,
gap: a,
rowHeight: p = u.rowHeight,
style: L,
autoFlow: _ = u.autoFlow,
items: l = u.items,
positions: f,
onReposition: b,
dataItemKey: $,
id: v,
dir: M,
ignoreDrag: q
} = j, B = R(() => {
g.current && g.current.focus();
}, []), y = T(null), g = T(null);
t.useImperativeHandle(
y,
() => ({
element: g.current,
focus: B
})
), t.useImperativeHandle(O, () => y.current);
const c = f !== void 0, k = R((e) => e.map((r, s) => ({ order: s, rowSpan: 1, colSpan: 1, ...r.defaultPosition })), []), G = F(() => {
if (f)
return f.map(
(e, r) => ({ order: r, rowSpan: 1, colSpan: 1, ...e })
);
}, [f]), [J, W] = z(
() => k(l)
), [Q, A] = z(!1), C = T(l.length);
Z(() => {
!c && l.length !== C.current && (W(k(l)), C.current = l.length);
}, [l, c, k]);
const S = c ? G : J, X = R(
(e, r, s, h = 0, P = 0) => {
if (r === 0 && s === 0 && !P && !h)
return;
let m = !1;
const w = S.map((I) => ({ ...I })), n = w[e], E = w.find((I) => I.order === n.order + r);
E && E !== n && (n.order += r, E.order += -r, m = !0);
const x = n.col + s;
s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, m = !0);
const H = n.colSpan + P;
P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, m = !0);
const D = n.rowSpan + h;
h && D >= 1 && (n.rowSpan = D, m = !0), m && (c || W(w), b && ee(b, {}, y.current, { value: w }));
},
[S, i, c, b, y]
), N = F(() => a ? `${typeof a.rows == "number" ? a.rows + "px" : a.rows} ${typeof a.columns == "number" ? a.columns + "px" : a.columns}` : 16, [a]), Y = F(
() => ({
gridTemplateColumns: `repeat(${i}, minmax(0px, ${typeof d == "number" ? d + "px" : d}))`,
gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
gap: N,
padding: N,
...L
}),
[i, d, p, N, L]
);
return /* @__PURE__ */ t.createElement(
"div",
{
ref: g,
dir: M,
className: K("k-tilelayout", re[_], V),
style: Y,
id: v,
role: "list"
},
l.map((e, r) => {
let s;
return typeof e.header == "string" ? s = e.header : s = `tilelayout-${v ? `${v}-` : ""}${r}`, /* @__PURE__ */ t.createElement(t.Fragment, { key: $ ? oe($)(e) : r }, /* @__PURE__ */ t.createElement(
te,
{
update: X,
defaultPosition: S[r],
index: r,
resizable: e.resizable,
reorderable: e.reorderable,
style: e.style,
header: e.header,
className: e.className,
hintClassName: e.hintClassName,
hintStyle: e.hintStyle,
ignoreDrag: q,
onPress: () => A(!0),
onRelease: () => A(!1)
},
e.item ? e.item : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: K("k-tilelayout-item-header k-card-header", { "k-cursor-move": e.reorderable !== !1 }) }, t.isValidElement(e.header) ? e.header : /* @__PURE__ */ t.createElement("div", { id: s, className: "k-card-title" }, e.header)), /* @__PURE__ */ t.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
));
}),
!Q && /* @__PURE__ */ t.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
);
});
U.displayName = "KendoTileLayout";
U.propTypes = {
id: o.string,
style: o.object,
className: o.string,
dir: o.string,
gap: o.object,
columns: o.number,
columnWidth: o.oneOfType([o.number, o.string]),
rowHeight: o.oneOfType([o.number, o.string]),
dataItemKey: o.string,
items: o.array,
positions: o.array,
autoFlow: o.oneOf(["column", "row", "column dense", "row dense", "unset"]),
onReposition: o.func,
ignoreDrag: o.func
};
export {
U as TileLayout
};