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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));

var _Radio = _interopRequireDefault(require("../Radio/Radio"));

var _RadioGroupSt = require("./RadioGroup.st.css");

var _constants = require("./constants");

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }

/**
 * 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) {
  (0, _inherits2["default"])(RadioGroup, _React$PureComponent);

  var _super = _createSuper(RadioGroup);

  function RadioGroup() {
    (0, _classCallCheck2["default"])(this, RadioGroup);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(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 || (0, _uniqueId["default"])('RadioGroup_');
      return /*#__PURE__*/_react["default"].createElement("div", {
        role: "radiogroup",
        "data-hook": dataHook,
        className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.root, {
          orientation: orientation
        }, className),
        "data-display": orientation,
        "data-lineheight": lineHeight
      }, _react["default"].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(_constants.dataHooks.RadioContainer, "-").concat(radio.props.value);
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.optionContainer, {
            selectionArea: selectionArea,
            selectionAreaSkin: selectionAreaSkin,
            checked: checked,
            disabled: disabled
          }),
          "data-hook": _constants.dataHooks.RadioOptionContainer,
          style: _this._getSpacing(index)
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: _RadioGroupSt.classes.radioContainer,
          "data-hook": radioDataHook
        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          style: {
            minHeight: lineHeight,
            padding: selectionAreaPadding
          },
          className: _RadioGroupSt.classes.radio,
          dataHook: radio.props.dataHook,
          value: radio.props.value,
          name: radioName,
          id: (0, _uniqueId["default"])("".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["default"].createElement("div", {
          className: _RadioGroupSt.classes.content,
          "data-hook": _constants.dataHooks.RadioContent
        }, radio.props.content));
      }));
    }
  }]);
  return RadioGroup;
}(_react["default"].PureComponent);

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

  /** Specifies a CSS class name to be appended to the component’s root element */
  className: _propTypes["default"].string,

  /** Defines a callback function which is called every time user selects a different value */
  onChange: _propTypes["default"].func,

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

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

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

  /** Disables the entire group */
  disabled: _propTypes["default"].bool,

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

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

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

  /** Sets the amount of white space around the radio label in pixels */
  selectionAreaPadding: _propTypes["default"].string,

  /** Lists RadioGroup items. You're recommended to use it with <RadioGroup.Radio/>. */
  children: _propTypes["default"].node,

  /** Controls the distance between options */
  spacing: _propTypes["default"].string,

  /** Sets the min-height of <RadioGroup.Radio/> children */
  lineHeight: _propTypes["default"].string,

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