@mskcc/carbon-react/es/components/TileGroup/TileGroup.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React__default from 'react';
import RadioTile from '../RadioTile/RadioTile.js';
import { warning } from '../../internal/warning.js';
import { PrefixContext } from '../../internal/usePrefix.js';

class TileGroup extends React__default.Component {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", {
      selected: this.props.valueSelected || this.props.defaultSelected || null,
      prevValueSelected: this.props.valueSelected
    });
    _defineProperty(this, "getRadioTiles", () => {
      const childrenArray = React__default.Children.toArray(this.props.children);
      const children = childrenArray.map(tileRadio => {
        const {
          value,
          ...other
        } = tileRadio.props;
        /* istanbul ignore if */
        if (typeof tileRadio.props.checked !== 'undefined') {
          process.env.NODE_ENV !== "production" ? warning(false, `Instead of using the checked property on the RadioTile, set
            the defaultSelected property or valueSelected property on the TileGroup.`) : void 0;
        }
        return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, other, {
          name: this.props.name,
          key: value,
          value: value,
          onChange: this.handleChange,
          checked: value === this.state.selected
        }));
      });
      return children;
    });
    _defineProperty(this, "handleChange", (newSelection, value, evt) => {
      if (newSelection !== this.state.selected) {
        this.setState({
          selected: newSelection
        });
        this.props.onChange(newSelection, this.props.name, evt);
      }
    });
    _defineProperty(this, "renderLegend", legend => {
      if (legend) {
        return /*#__PURE__*/React__default.createElement("legend", {
          className: `${this.context}--label`
        }, legend);
      }
    });
  }
  static getDerivedStateFromProps(_ref, state) {
    let {
      valueSelected,
      defaultSelected
    } = _ref;
    const {
      prevValueSelected
    } = state;
    return prevValueSelected === valueSelected ? null : {
      selected: valueSelected || defaultSelected || null,
      prevValueSelected: valueSelected
    };
  }
  render() {
    const {
      context: prefix
    } = this;
    const {
      disabled,
      className = `${prefix}--tile-group`,
      legend
    } = this.props;
    return /*#__PURE__*/React__default.createElement("fieldset", {
      className: className,
      disabled: disabled
    }, this.renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, this.getRadioTiles()));
  }
}
_defineProperty(TileGroup, "contextType", PrefixContext);
_defineProperty(TileGroup, "propTypes", {
  /**
   * Provide a collection of <RadioTile> components to render in the group
   */
  children: PropTypes.node,
  /**
   * Provide an optional className to be applied to the container node
   */
  className: PropTypes.string,
  /**
   * Specify the the value of <RadioTile> to be selected by default
   */
  defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /**
   * Specify whether the group is disabled
   */
  disabled: PropTypes.bool,
  /**
   * Provide an optional legend for this group
   */
  legend: PropTypes.string,
  /**
   * Specify the name of the underlying `<input>` nodes
   */
  name: PropTypes.string.isRequired,
  /**
   * Provide an optional `onChange` hook that is called whenever the value of
   * the group changes
   */
  onChange: PropTypes.func,
  /**
   * Specify the value that is currently selected in the group
   */
  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
});
_defineProperty(TileGroup, "defaultProps", {
  onChange: /* istanbul ignore next */() => {}
});

export { TileGroup as default };