@carbon/react
Version:
React components for the Carbon Design System
91 lines (89 loc) • 2.6 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/Layout/index.tsx
/**
* Copyright IBM Corp. 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const sizes = [
"xs",
"sm",
"md",
"lg",
"xl",
"2xl"
];
const densities = ["condensed", "normal"];
const Layout = React.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
const prefix = usePrefix();
const classes = classNames(className, `${prefix}--layout`, {
[`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
[`${prefix}--layout--density-${density}`]: density && densities.includes(density)
});
return /* @__PURE__ */ jsx(BaseComponent, {
...rest,
ref: forwardRef,
className: classes,
children
});
});
Layout.propTypes = {
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
PropTypes.elementType
]),
children: PropTypes.node,
className: PropTypes.string,
density: PropTypes.oneOf(densities),
size: PropTypes.oneOf(sizes)
};
const LayoutConstraint = React.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
const prefix = usePrefix();
const classes = classNames(className, Object.entries({
size,
density
}).map(([group, constraints]) => ({
[`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
[`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
[`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
})));
return /* @__PURE__ */ jsx(BaseComponent, {
...rest,
ref: forwardRef,
className: classes,
children
});
});
LayoutConstraint.propTypes = {
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
PropTypes.elementType
]),
children: PropTypes.node,
className: PropTypes.string,
density: PropTypes.shape({
min: PropTypes.oneOf(densities),
default: PropTypes.oneOf(densities),
max: PropTypes.oneOf(densities)
}),
size: PropTypes.shape({
min: PropTypes.oneOf(sizes),
default: PropTypes.oneOf(sizes),
max: PropTypes.oneOf(sizes)
})
};
//#endregion
export { Layout, LayoutConstraint };