@6thquake/react-material/es/RadioGroup/RadioGroup.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import RadioGroupStandalone from '@material-ui/core/RadioGroup';
import FormHelperText from '../FormHelperText';
import FormControl from '../FormControl';
import FormLabel from '../FormLabel';
import { withFormsy, propTypes } from 'formsy-react';
import { compose } from 'recompose';
import withFormItem from '../Form/withFormItem';
import withForm from '../Form/withForm';
import omit from '../utils/omit';

const style = theme => ({
  formHelpTextContainer: {
    marginTop: '-8px',
    minHeight: '12px'
  },
  formHelperTextRoot: {
    marginTop: 0
  }
});

class RadioGroup extends Component {
  constructor(...args) {
    super(...args);

    this.onChange = event => {
      // setValue() will set the value of the component, which in
      // turn will validate it and the rest of the form
      // Important: Don't skip this step. This pattern is required
      // for Formsy to work.
      const value = event.target.value;
      this.props.setValue(value);
      const {
        onChange
      } = this.props;
      onChange && onChange(event, value);
    };
  }

  renderFormComponent() {
    const _this$props = this.props,
          {
      classes,
      getErrorMessage,
      getValue,
      isFormDisabled,
      isValid,
      isPristine,
      // colon,
      // required,
      // label,
      children,
      formInputRef
    } = _this$props,
          rest = _objectWithoutPropertiesLoose(_this$props, ["classes", "getErrorMessage", "getErrorMessages", "getValue", "hasValue", "isFormDisabled", "isValid", "isPristine", "isFormSubmitted", "isRequired", "isValidValue", "resetValue", "setValidations", "setValue", "showRequired", "showError", "validationError", "validationErrors", "validations", "innerRef", "value", "onChange", "children", "formInputRef"]);

    let error = false;
    let helperText = null;
    const isDisabled = isFormDisabled();

    if (!isDisabled) {
      if (!isPristine()) {
        helperText = getErrorMessage();
        error = !isValid();
      }
    }

    const helpTextClasses = {
      root: classes.formHelperTextRoot
    };
    const restClasses = omit(classes, ['formHelpTextContainer', 'formHelperTextRoot']);
    return React.createElement(FormControl, {
      component: "fieldset",
      required: this.props.required,
      error: error
    }, this.props.label && React.createElement(FormLabel, {
      component: "legend"
    }, this.props.label), React.createElement(RadioGroupStandalone, _extends({
      classes: restClasses,
      value: getValue(),
      disabled: isDisabled,
      onChange: this.onChange,
      ref: formInputRef
    }, rest), children), React.createElement("div", {
      className: classes.formHelpTextContainer
    }, error && React.createElement(FormHelperText, {
      classes: helpTextClasses,
      error: true
    }, helperText)));
  }

  render() {
    return this.renderFormComponent();
  }

}

RadioGroup.displayName = 'RadioGroup';
process.env.NODE_ENV !== "production" ? RadioGroup.propTypes = _extends({
  classes: PropTypes.object.isRequired
}, propTypes) : void 0;
RadioGroup.defaultProps = {
  formInputRef: React.createRef()
};
const FormComponent = compose(withFormsy, withFormItem, withStyles(style, {
  name: 'RMRadioGroup'
}))(RadioGroup);

class C extends Component {
  getChildContext() {
    const {
      row,
      size,
      circular,
      classes
    } = this.props;
    return {
      row,
      size,
      circular,
      classes
    };
  }

  render() {
    let _this$props2 = this.props,
        {
      classes
    } = _this$props2,
        props = _objectWithoutPropertiesLoose(_this$props2, ["circular", "size", "classes"]);

    classes = classes || {};

    const classesPro = _objectWithoutPropertiesLoose(classes, ["checked"]);

    return React.createElement(RadioGroupStandalone, _extends({}, props, {
      classes: classesPro
    }));
  }

}

C.childContextTypes = {
  row: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  circular: PropTypes.bool,
  classes: PropTypes.object
};
process.env.NODE_ENV !== "production" ? C.propTypes = {
  /**
   * @ignore
   */
  children: PropTypes.node,

  /**
   *  是否圆角，只对按钮样式生效
   */
  circular: PropTypes.bool,

  /**
   * The name used to reference the value of the control.
   */
  name: PropTypes.string,

  /**
   * @ignore
   */
  onBlur: PropTypes.func,

  /**
   * Callback fired when a radio button is selected.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value`.
   * @param {string} value The `value` of the selected radio button
   */
  onChange: PropTypes.func,

  /**
   * @ignore
   */
  onKeyDown: PropTypes.func,

  /**
   *  大小，只对按钮样式生效
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),

  /**
   * Value of the selected radio button.
   */
  value: PropTypes.string
} : void 0;
C.defaultProps = {
  size: 'medium',
  circular: false
};
export default compose(withForm)(FormComponent, C);