@carbon/ibm-products
Version:
Carbon for IBM Products
100 lines (93 loc) • 3.23 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* 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 React__default, { forwardRef } from 'react';
import { Grid } from '@carbon/react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';
// Copyright IBM Corp. 2021, 2024
//
// 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 blockClass = `${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.
*/
let Cascade = /*#__PURE__*/forwardRef((props, ref) => {
const {
children,
className,
grid = defaults.grid,
...rest
} = props;
const childProps = {
...rest,
className: cx(blockClass, className),
ref,
...getDevtoolsProps(componentName)
};
const modifyChildren = child => {
const className = cx(child.props.className, `${blockClass}__element`);
return /*#__PURE__*/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 (/*#__PURE__*/React__default.isValidElement(row)) {
const cols = React__default.Children.map(row?.props.children, col => {
if (/*#__PURE__*/React__default.isValidElement(col)) {
colIdx = colIdx + 1;
const colClassnames = cx(col.props.className, `${blockClass}__col`, `${blockClass}__col-${colIdx}`);
return /*#__PURE__*/React__default.cloneElement(col, {
className: colClassnames
});
}
});
return /*#__PURE__*/React__default.cloneElement(row, {
children: cols
});
}
return children;
});
return /*#__PURE__*/React__default.createElement("div", childProps, /*#__PURE__*/React__default.createElement(Grid, null, gridElm));
}
return /*#__PURE__*/React__default.createElement("div", childProps, getModifiedChildren());
});
Cascade = pkg.checkComponentEnabled(Cascade, componentName);
Cascade.displayName = componentName;
Cascade.propTypes = {
/**
* Main content that is shown.
*/
children: PropTypes.node,
/**
* Optional class name.
*/
className: PropTypes.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: PropTypes.bool
};
export { Cascade };