@krowdy-ui/views/RadioLabelGroup/RadioLabelGroup.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@krowdy-ui/core");

var _styles = require("@krowdy-ui/styles");

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

var styles = function styles(theme) {
  return {
    boxContainer: {
      display: 'flex',
      paddingTop: 12
    },
    isRow: {
      flexDirection: 'row'
    },
    isVert: {
      flexDirection: 'column'
    },
    label: {
      fontSize: 14
    },
    noLine: {
      margin: 0,
      padding: theme.spacing(1.5, 1)
    },
    outlineRow: {
      margin: theme.spacing(0, 1, 0, 0)
    },
    outlined: {
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary[400])
      },
      border: "1px solid ".concat(theme.palette.grey[300]),
      padding: theme.spacing(1.5, 1.25)
    },
    outlinedVert: {
      margin: theme.spacing(0.6, 0, 0.6, 0)
    },
    roundBorder: {
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary[400])
      },
      border: "1px solid ".concat(theme.palette.grey[300]),
      borderRadius: 8,
      minWidth: 120
    }
  };
};

exports.styles = styles;

var _ref = /*#__PURE__*/_react["default"].createElement(_core.Radio, {
  color: "primary",
  disableRipple: true,
  size: "small"
});

var RadioLabelGroup = function RadioLabelGroup(props) {
  var classes = props.classes,
      isRow = props.isRow,
      _props$items = props.items,
      items = _props$items === void 0 ? [] : _props$items,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      outlined = props.outlined,
      value = props.value,
      name = props.name;

  var _React$useState = _react["default"].useState(value),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      currentValue = _React$useState2[0],
      setValue = _React$useState2[1];

  var handleChange = function handleChange(event) {
    setValue(event.target.value);
    onChange(event);
  };

  return /*#__PURE__*/_react["default"].createElement(_core.RadioGroup, {
    className: (0, _clsx["default"])(classes.boxContainer, isRow ? classes.isRow : classes.isVert),
    name: name,
    onChange: handleChange,
    row: isRow,
    value: currentValue
  }, items.map(function (element, index) {
    return /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
      classes: {
        label: classes.label
      },
      className: (0, _clsx["default"])(outlined ? classes.outlined && classes["".concat(outlined, "Border")] : classes.noLine, isRow ? classes.outlineRow : classes.outlinedVert),
      control: _ref,
      key: index,
      label: element.label,
      value: element.value
    });
  }));
};

process.env.NODE_ENV !== "production" ? RadioLabelGroup.propTypes = {
  classes: _propTypes["default"].object,
  isRow: _propTypes["default"].bool,
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string,
    value: _propTypes["default"].any
  })),
  name: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  value: _propTypes["default"].any
} : void 0;
RadioLabelGroup.muiName = 'RadioLabelGroup';

var _default = (0, _styles.withStyles)(styles, {
  name: 'KrowdyRadioLabelGroup'
})(RadioLabelGroup);

exports["default"] = _default;