@carbon/react
Version:
React components for the Carbon Design System
215 lines (213 loc) • 6.5 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 { useGridSettings } from "./GridContext.js";
import { enabled } from "@carbon/feature-flags";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/Grid/Column.tsx
/**
* 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.
*/
const Column = React.forwardRef(({ as, children, className: customClassName, sm, md, lg, xlg, max, ...rest }, ref) => {
const { mode } = useGridSettings();
const prefix = usePrefix();
const BaseComponent = as || "div";
if (mode === "css-grid") return /* @__PURE__ */ jsx(CSSGridColumn, {
as: BaseComponent,
className: customClassName,
sm,
md,
ref,
lg,
xlg,
max,
...rest,
children
});
const columnClassName = getClassNameForFlexGridBreakpoints([
sm,
md,
lg,
xlg,
max
], prefix);
return /* @__PURE__ */ jsx(BaseComponent, {
className: classNames(customClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0 }),
ref,
...rest,
children
});
});
const percentSpanType = PropTypes.oneOf([
"25%",
"50%",
"75%",
"100%"
]);
const spanPropType = enabled("enable-css-grid") ? PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.shape({
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
offset: PropTypes.number,
start: PropTypes.number,
end: PropTypes.number
}),
percentSpanType
]) : PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.shape({
span: PropTypes.number,
offset: PropTypes.number
})
]);
Column.propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
children: PropTypes.node,
className: PropTypes.string,
lg: spanPropType,
max: spanPropType,
md: spanPropType,
sm: spanPropType,
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
xlg: spanPropType
};
const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, className: containerClassName, sm, md, lg, xlg, max, span, ...rest }, ref) => {
const prefix = usePrefix();
return /* @__PURE__ */ jsx(BaseComponent, {
className: classNames(containerClassName, getClassNameForBreakpoints([
sm,
md,
lg,
xlg,
max
], prefix), getClassNameForSpan(span, prefix), { [`${prefix}--css-grid-column`]: true }),
ref,
...rest,
children
});
});
CSSGridColumn.propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
children: PropTypes.node,
className: PropTypes.string,
lg: spanPropType,
max: spanPropType,
md: spanPropType,
sm: spanPropType,
span: PropTypes.oneOfType([
PropTypes.number,
percentSpanType,
PropTypes.shape({
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
start: PropTypes.number,
end: PropTypes.number
})
]),
xlg: spanPropType
};
const breakpointNames = [
"sm",
"md",
"lg",
"xlg",
"max"
];
/**
* @typedef {object} Breakpoint
* @property {boolean|number} [span]
* @property {number} [offset]
*/
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === void 0 || breakpoint === null) continue;
const name = breakpointNames[i];
if (breakpoint === true) {
classNames.push(`${prefix}--${name}:col-span-auto`);
continue;
}
if (typeof breakpoint === "string") {
classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace("%", "")}`);
continue;
}
if (typeof breakpoint === "number") {
classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
continue;
}
if (typeof breakpoint === "object") {
const { span, offset, start, end } = breakpoint;
if (typeof offset === "number") classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : "auto"}`);
if (typeof start === "number") classNames.push(`${prefix}--${name}:col-start-${start ? start : "auto"}`);
if (typeof end === "number") classNames.push(`${prefix}--${name}:col-end-${end}`);
if (typeof span === "number") classNames.push(`${prefix}--${name}:col-span-${span}`);
else if (typeof span === "string") {
classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`);
continue;
}
}
}
return classNames.join(" ");
}
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === void 0 || breakpoint === null) continue;
const name = breakpointNames[i];
if (breakpoint === true) {
classNames.push(`${prefix}--col-${name}`);
continue;
}
if (typeof breakpoint === "number") {
classNames.push(`${prefix}--col-${name}-${breakpoint}`);
continue;
}
if (typeof breakpoint === "object") {
const { span, offset } = breakpoint;
if (typeof span === "number") classNames.push(`${prefix}--col-${name}-${span}`);
if (span === true) classNames.push(`${prefix}--col-${name}`);
if (typeof offset === "number") classNames.push(`${prefix}--offset-${name}-${offset}`);
}
}
return classNames.join(" ");
}
/**
* Build the appropriate className for a span value
*/
function getClassNameForSpan(value, prefix) {
const classNames = [];
if (typeof value === "number") classNames.push(`${prefix}--col-span-${value}`);
else if (typeof value === "string") classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
else if (typeof value === "object") {
const { span, start, end } = value;
if (span !== void 0 && span !== null) classNames.push(`${prefix}--col-span-${span}`);
if (start !== void 0 && start !== null) classNames.push(`${prefix}--col-start-${start}`);
if (end !== void 0 && end !== null) classNames.push(`${prefix}--col-end-${end}`);
}
return classNames.join("");
}
//#endregion
export { Column as default };