@carbon/react
Version:
React components for the Carbon Design System
83 lines (81 loc) • 3.38 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_utils = require("../../internal/utils.js");
const require_index = require("../RadioTile/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/TileGroup/TileGroup.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 TileGroup = ({ children, className, defaultSelected, disabled, legend, name, onChange = require_noopFn.noopFn, valueSelected, required }) => {
const prefix = require_usePrefix.usePrefix();
const [selected, setSelected] = (0, react.useState)(valueSelected ?? defaultSelected);
(0, react.useEffect)(() => {
if (typeof valueSelected !== "undefined" && valueSelected !== selected) setSelected(valueSelected);
}, [valueSelected, selected]);
const handleChange = (value, name, evt) => {
if (value !== selected) {
setSelected(value);
onChange(value, name ?? "", evt);
}
};
const getRadioTilesWithWrappers = (elements) => {
const traverseAndModifyChildren = (elements) => {
return react.Children.map(elements, (child) => {
if (!(0, react.isValidElement)(child)) return child;
if (require_utils.isComponentElement(child, require_index.default)) {
const { value, ...otherProps } = child.props;
return /* @__PURE__ */ (0, react.createElement)(require_index.default, {
...otherProps,
required,
name,
key: value,
value,
onChange: handleChange,
checked: value === selected
});
}
const children = child.props.children;
if (react.Children.count(children) > 0) return (0, react.cloneElement)(child, void 0, traverseAndModifyChildren(children));
return child;
});
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: traverseAndModifyChildren(elements) });
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
className: className ?? `${prefix}--tile-group`,
disabled,
children: [legend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
className: `${prefix}--label`,
children: legend
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: getRadioTilesWithWrappers(children) })]
});
};
TileGroup.displayName = "TileGroup";
TileGroup.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
defaultSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
disabled: prop_types.default.bool,
legend: prop_types.default.string,
name: prop_types.default.string.isRequired,
onChange: prop_types.default.func,
required: prop_types.default.bool,
valueSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])
};
//#endregion
exports.TileGroup = TileGroup;