@carbon/ibm-products
Version:
Carbon for IBM Products
84 lines (80 loc) • 3.27 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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 require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/Cascade/Cascade.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--cascade`;
const componentName = "Cascade";
const defaults = { grid: false };
/**
This pattern is intended for use with cards, tiles, or similarly styled
components. Use this patterns in areas that are the primary focus on the page to
help the user along their journey or locate the most important information on
the page. It should not be used on a page if it is the secondary focus of the
page as that will distract the user.
*/
const Cascade = (0, react.forwardRef)((props, ref) => {
const { children, className, grid = defaults.grid, ...rest } = props;
const childProps = {
...rest,
className: (0, import_classnames.default)(blockClass, className),
ref,
...require_devtools.getDevtoolsProps(componentName)
};
const modifyChildren = (child) => {
const className = (0, import_classnames.default)(child.props.className, `${blockClass}__element`);
return react.default.cloneElement(child, { className });
};
const getModifiedChildren = () => {
return react.default.Children.map(children, (child) => modifyChildren(child));
};
if (grid) {
let colIdx = 0;
const gridElm = react.default.Children.map(children, (row) => {
if (react.default.isValidElement(row)) {
const cols = react.default.Children.map(row?.props.children, (col) => {
if (react.default.isValidElement(col)) {
colIdx = colIdx + 1;
const colClassnames = (0, import_classnames.default)(col.props.className, `${blockClass}__col`, `${blockClass}__col-${colIdx}`);
return react.default.cloneElement(col, { className: colClassnames });
}
});
return react.default.cloneElement(row, { children: cols });
}
return children;
});
return /* @__PURE__ */ react.default.createElement("div", childProps, /* @__PURE__ */ react.default.createElement(_carbon_react.Grid, null, gridElm));
}
return /* @__PURE__ */ react.default.createElement("div", childProps, getModifiedChildren());
});
Cascade.displayName = componentName;
Cascade.propTypes = {
/**
* Main content that is shown.
*/
children: prop_types.default.node,
/**
* Optional class name.
*/
className: prop_types.default.string,
/**
* Specifies whether or not to wrap the child content in a `<Grid />`.
* If this is set to true it's important that the children are being wrapped in rows in columns.
* Check the documentation for additional clarification.
*/
grid: prop_types.default.bool
};
//#endregion
exports.Cascade = Cascade;