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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'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 warning = require('../../internal/warning.js');
var usePrefix = require('../../internal/usePrefix.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);

class TileGroup extends React__default["default"].Component {
  constructor() {
    super(...arguments);
    _rollupPluginBabelHelpers.defineProperty(this, "state", {
      selected: this.props.valueSelected || this.props.defaultSelected || null,
      prevValueSelected: this.props.valueSelected
    });
    _rollupPluginBabelHelpers.defineProperty(this, "getRadioTiles", () => {
      const childrenArray = React__default["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.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["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, other, {
          name: this.props.name,
          key: value,
          value: value,
          onChange: this.handleChange,
          checked: value === this.state.selected
        }));
      });
      return children;
    });
    _rollupPluginBabelHelpers.defineProperty(this, "handleChange", (newSelection, value, evt) => {
      if (newSelection !== this.state.selected) {
        this.setState({
          selected: newSelection
        });
        this.props.onChange(newSelection, this.props.name, evt);
      }
    });
    _rollupPluginBabelHelpers.defineProperty(this, "renderLegend", legend => {
      if (legend) {
        return /*#__PURE__*/React__default["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["default"].createElement("fieldset", {
      className: className,
      disabled: disabled
    }, this.renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, this.getRadioTiles()));
  }
}
_rollupPluginBabelHelpers.defineProperty(TileGroup, "contextType", usePrefix.PrefixContext);
_rollupPluginBabelHelpers.defineProperty(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,
  /**
   * Specify the value that is currently selected in the group
   */
  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
});
_rollupPluginBabelHelpers.defineProperty(TileGroup, "defaultProps", {
  onChange: /* istanbul ignore next */() => {}
});

exports["default"] = TileGroup;