@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
71 lines (70 loc) • 2.48 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 s from "react";
import e from "prop-types";
import { useId as T, classNames as j } from "@progress/kendo-react-common";
const c = s.forwardRef((t, g) => {
const r = s.useRef(null), d = s.useCallback(
() => ({
element: r.current
}),
[]
);
s.useImperativeHandle(g, d);
const { className: m, style: u, id: h, children: y, gap: i = o.gap } = t, f = T(), a = s.useMemo(
() => t.align && t.align.horizontal ? t.align.horizontal : o.hAlign,
[t.align]
), l = s.useMemo(
() => t.align && t.align.vertical ? t.align.vertical : o.vAlign,
[t.align]
), p = s.useMemo(
() => j(
"k-grid-layout",
{
"k-justify-items-start": a === "start",
"k-justify-items-center": a === "center",
"k-justify-items-end": a === "end",
"k-justify-items-stretch": a === "stretch",
"k-align-items-start": l === "top",
"k-align-items-center": l === "middle",
"k-align-items-end": l === "bottom",
"k-align-items-stretch": l === "stretch"
},
m
),
[a, l, m]
), v = i ? `${typeof i.rows == "number" ? i.rows + "px" : i.rows} ${typeof i.cols == "number" ? i.cols + "px" : i.cols}` : void 0, b = t.rows && t.rows.map((n) => `${typeof n.height == "number" ? n.height + "px" : n.height}`).join(" "), k = t.cols && t.cols.map((n) => `${typeof n.width == "number" ? n.width + "px" : n.width}`).join(" "), w = {
gap: v,
gridTemplateColumns: k,
gridTemplateRows: b,
...u
};
return /* @__PURE__ */ s.createElement("div", { ref: r, className: p, style: w, id: h || f }, y);
}), o = {
hAlign: "stretch",
vAlign: "stretch",
gap: void 0
};
c.propTypes = {
className: e.string,
style: e.object,
children: e.any,
id: e.string,
gap: e.shape({
rows: e.oneOfType([e.string, e.number]),
columns: e.oneOfType([e.string, e.number])
}),
align: e.shape({
vertical: e.oneOf(["top", "middle", "bottom", "stretch"]),
horizontal: e.oneOf(["start", "center", "end", "stretch"])
})
};
c.displayName = "KendoReactGridLayout";
export {
c as GridLayout
};