@carbon/react/lib/components/TileGroup/TileGroup.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 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.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var RadioTile = require('../RadioTile/RadioTile.js');
var usePrefix = require('../../internal/usePrefix.js');
var noopFn = require('../../internal/noopFn.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const TileGroup = ({
  children,
  className,
  defaultSelected,
  disabled,
  legend,
  name,
  onChange = noopFn.noopFn,
  valueSelected,
  required
}) => {
  const prefix = usePrefix.usePrefix();
  const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
  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 (! /*#__PURE__*/React.isValidElement(child)) return child;

        // If a `RadioTile` is found, return it with necessary props,
        if (/*#__PURE__*/React.isValidElement(child) && child.type === RadioTile["default"]) {
          const {
            value,
            ...otherProps
          } = child.props;
          return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, otherProps, {
            required: required,
            name: name,
            key: value,
            value: value,
            onChange: handleChange,
            checked: value === selected
          }));
        }

        // If the child is not RadioTile and has children, recheck the children
        const children = child.props.children;
        const hasChildren = React.Children.count(children) > 0;
        if (hasChildren) {
          return /*#__PURE__*/React.cloneElement(child, undefined, traverseAndModifyChildren(children));
        }

        // If the child is neither a RadioTile nor has children, return it as is
        return child;
      });
    };
    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, traverseAndModifyChildren(elements));
  };
  return /*#__PURE__*/React__default["default"].createElement("fieldset", {
    className: className ?? `${prefix}--tile-group`,
    disabled: disabled
  }, legend && /*#__PURE__*/React__default["default"].createElement("legend", {
    className: `${prefix}--label`
  }, legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
};
TileGroup.displayName = 'TileGroup';
TileGroup.propTypes = {
  /**
   * Provide a collection of <RadioTile> components to render in the group
   */
  children: PropTypes__default["default"].node,
  /**
   * Provide an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify the the value of <RadioTile> to be selected by default
   */
  defaultSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
  /**
   * Specify whether the group is disabled
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Provide an optional legend for this group
   */
  legend: PropTypes__default["default"].string,
  /**
   * Specify the name of the underlying `<input>` nodes
   */
  name: PropTypes__default["default"].string.isRequired,
  /**
   * Provide an optional `onChange` hook that is called whenever the value of
   * the group changes
   */
  onChange: PropTypes__default["default"].func,
  /**
   * `true` to specify if input selection in group is required.
   */
  required: PropTypes__default["default"].bool,
  /**
   * Specify the value that is currently selected in the group
   */
  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
};

exports.TileGroup = TileGroup;