wix-style-react/dist/es/src/RadioGroup/RadioGroup.js

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import uniqueId from 'lodash/uniqueId';
import Radio from '../Radio/Radio';
import { st, classes } from './RadioGroup.st.css';
import { dataHooks } from './constants';
/**
 * component for easy radio group creation.
 *
 * similar to HTML `<input type="radio"/>` except you don't need to handle `name` or click handlers
 */

var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(RadioGroup, _React$PureComponent);

  var _super = _createSuper(RadioGroup);

  function RadioGroup() {
    _classCallCheck(this, RadioGroup);

    return _super.apply(this, arguments);
  }

  _createClass(RadioGroup, [{
    key: "_getSpacing",
    value: function _getSpacing(index) {
      var _this$props = this.props,
          orientation = _this$props.display,
          spacing = _this$props.spacing;
      return orientation === 'vertical' && index > 0 ? {
        marginTop: spacing
      } : orientation === 'horizontal' && index > 0 ? {
        marginInlineStart: spacing
      } : {};
    }
  }, {
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props2 = this.props,
          dataHook = _this$props2.dataHook,
          className = _this$props2.className,
          name = _this$props2.name,
          _onChange = _this$props2.onChange,
          disabledRadios = _this$props2.disabledRadios,
          value = _this$props2.value,
          vAlign = _this$props2.vAlign,
          orientation = _this$props2.display,
          lineHeight = _this$props2.lineHeight,
          selectionArea = _this$props2.selectionArea,
          selectionAreaSkin = _this$props2.selectionAreaSkin,
          selectionAreaPadding = _this$props2.selectionAreaPadding;
      var uniqueName = name || uniqueId('RadioGroup_');
      return /*#__PURE__*/React.createElement("div", {
        role: "radiogroup",
        "data-hook": dataHook,
        className: st(classes.root, {
          orientation: orientation
        }, className),
        "data-display": orientation,
        "data-lineheight": lineHeight
      }, React.Children.map(this.props.children, function (radio, index) {
        var checked = radio.props.value === value;
        var radioName = radio.props.name || uniqueName;
        var disabled = _this.props.disabled || disabledRadios.indexOf(radio.props.value) !== -1;
        var radioDataHook = "".concat(dataHooks.RadioContainer, "-").concat(radio.props.value);
        return /*#__PURE__*/React.createElement("div", {
          className: st(classes.optionContainer, {
            selectionArea: selectionArea,
            selectionAreaSkin: selectionAreaSkin,
            checked: checked,
            disabled: disabled
          }),
          "data-hook": dataHooks.RadioOptionContainer,
          style: _this._getSpacing(index)
        }, /*#__PURE__*/React.createElement("div", {
          className: classes.radioContainer,
          "data-hook": radioDataHook
        }, /*#__PURE__*/React.createElement(Radio, {
          style: {
            minHeight: lineHeight,
            padding: selectionAreaPadding
          },
          className: classes.radio,
          dataHook: radio.props.dataHook,
          value: radio.props.value,
          name: radioName,
          id: uniqueId("".concat(radioName, "_")),
          onChange: function onChange() {
            return _onChange(radio.props.value);
          },
          alignItems: vAlign,
          disabled: disabled,
          checked: checked,
          label: radio.props.children
        })), radio.props.content && /*#__PURE__*/React.createElement("div", {
          className: classes.content,
          "data-hook": dataHooks.RadioContent
        }, radio.props.content));
      }));
    }
  }]);

  return RadioGroup;
}(React.PureComponent);

RadioGroup.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element */
  className: PropTypes.string,

  /** Defines a callback function which is called every time user selects a different value */
  onChange: PropTypes.func,

  /** Specifies the selected radio value */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Specify the values of the disabled radio buttons */
  disabledRadios: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),

  /** Controls radio alignment to the label on Y axis */
  vAlign: PropTypes.oneOf(['center', 'top']),

  /** Disables the entire group */
  disabled: PropTypes.bool,

  /** Control options direction  */
  display: PropTypes.oneOf(['vertical', 'horizontal']),

  /** Controls selection area highlight visibility */
  selectionArea: PropTypes.oneOf(['none', 'hover', 'always']),

  /** Sets the design of the selection area */
  selectionAreaSkin: PropTypes.oneOf(['filled', 'outlined']),

  /** Sets the amount of white space around the radio label in pixels */
  selectionAreaPadding: PropTypes.string,

  /** Lists RadioGroup items. You're recommended to use it with <RadioGroup.Radio/>. */
  children: PropTypes.node,

  /** Controls the distance between options */
  spacing: PropTypes.string,

  /** Sets the min-height of <RadioGroup.Radio/> children */
  lineHeight: PropTypes.string,

  /** Sets a unique name of a radio group */
  name: PropTypes.string
};
RadioGroup.defaultProps = {
  disabledRadios: [],
  onChange: function onChange() {},
  value: '',
  vAlign: 'center',
  display: 'vertical',
  lineHeight: '24px',
  selectionArea: 'none',
  selectionAreaSkin: 'filled'
};
RadioGroup.Radio = Radio;
RadioGroup.displayName = 'RadioGroup';
export default RadioGroup;