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

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import clsx from 'clsx';
import { FormControlLabel, Radio, RadioGroup } from '@krowdy-ui/core';
import { withStyles } from '@krowdy-ui/styles';
import PropTypes from 'prop-types';
export 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
    }
  };
};

var _ref = /*#__PURE__*/React.createElement(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.useState(value),
      _React$useState2 = _slicedToArray(_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.createElement(RadioGroup, {
    className: clsx(classes.boxContainer, isRow ? classes.isRow : classes.isVert),
    name: name,
    onChange: handleChange,
    row: isRow,
    value: currentValue
  }, items.map(function (element, index) {
    return /*#__PURE__*/React.createElement(FormControlLabel, {
      classes: {
        label: classes.label
      },
      className: clsx(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.object,
  isRow: PropTypes.bool,
  items: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.any
  })),
  name: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.any
} : void 0;
RadioLabelGroup.muiName = 'RadioLabelGroup';
export default withStyles(styles, {
  name: 'KrowdyRadioLabelGroup'
})(RadioLabelGroup);