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

React components that implement Google's Material Design.

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 const styles = theme => ({
  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 ${theme.palette.primary[400]}`
    },
    border: `1px solid ${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 ${theme.palette.primary[400]}`
    },
    border: `1px solid ${theme.palette.grey[300]}`,
    borderRadius: 8,
    minWidth: 120
  }
});

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

const RadioLabelGroup = props => {
  const {
    classes,
    isRow,
    items = [],
    onChange = () => {},
    outlined,
    value,
    name
  } = props;
  const [currentValue, setValue] = React.useState(value);

  const 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((element, index) => /*#__PURE__*/React.createElement(FormControlLabel, {
    classes: {
      label: classes.label
    },
    className: clsx(outlined ? classes.outlined && classes[`${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);