@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
69 lines (68 loc) • 2.53 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 o from "react";
import n from "prop-types";
import { useId as z, classNames as b } from "@progress/kendo-react-common";
const m = o.forwardRef((e, g) => {
const c = o.useRef(null), d = o.useCallback(
() => ({
element: c.current
}),
[]
);
o.useImperativeHandle(g, d);
const { className: r, style: h, id: u, children: y } = e, k = z(), s = o.useMemo(() => e.orientation || l.orientation, [e.orientation]), t = s === "horizontal", a = o.useMemo(
() => e.align && e.align.horizontal ? e.align.horizontal : l.hAlign,
[e.align]
), i = o.useMemo(
() => e.align && e.align.vertical ? e.align.vertical : l.vAlign,
[e.align]
), f = o.useMemo(
() => b(
"k-stack-layout",
{
"k-hstack": s === "horizontal",
"k-vstack": s === "vertical",
"k-justify-content-start": t && a === "start" || !t && i === "top",
"k-justify-content-center": t && a === "center" || !t && i === "middle",
"k-justify-content-end": t && a === "end" || !t && i === "bottom",
"k-justify-content-stretch": t && a === "stretch" || !t && i === "stretch",
"k-align-items-start": !t && a === "start" || t && i === "top",
"k-align-items-center": !t && a === "center" || t && i === "middle",
"k-align-items-end": !t && a === "end" || t && i === "bottom",
"k-align-items-stretch": !t && a === "stretch" || t && i === "stretch"
},
r
),
[s, t, a, i, r]
), v = {
gap: `${typeof e.gap == "number" ? e.gap + "px" : e.gap}`,
...h
};
return /* @__PURE__ */ o.createElement("div", { ref: c, className: f, style: v, id: u || k }, y);
}), l = {
orientation: "horizontal",
hAlign: "stretch",
vAlign: "stretch"
};
m.propTypes = {
className: n.string,
style: n.object,
children: n.any,
id: n.string,
orientation: n.oneOf(["horizontal", "vertical"]),
gap: n.oneOfType([n.string, n.number]),
align: n.shape({
vertical: n.oneOf(["top", "middle", "bottom", "stretch"]),
horizontal: n.oneOf(["start", "center", "end", "stretch"])
})
};
m.displayName = "KendoReactStackLayout";
export {
m as StackLayout
};