@6thquake/react-material/es/Radio/RadioButton.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 { withStyles, createGenerateClassName } from '../styles';
import FormControlLabel from '../FormControlLabel';
import Button from '../Button';
import Radio from '@material-ui/core/Radio';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const styles = theme => ({
  root: {
    background: '#fff',
    borderRadius: 0,
    // border: '1px solid  rgba(0, 0, 0, 0.23)',
    overflow: 'hidden'
  },
  label: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    borderRadius: 'inherit'
  },
  sizeSmall: {
    padding: `${theme.spacing(1) - 1}px ${theme.spacing(1)}px`,
    fontSize: theme.typography.pxToRem(13)
  },
  sizeLarge: {
    padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
    fontSize: theme.typography.pxToRem(15)
  },
  vertical: {
    width: theme.spacing(11),
    '& span': {
      '& label': {
        '& span:last-child': {
          borderBottom: 0
        }
      }
    },
    '&:first-child': {
      borderTopLeftRadius: 4,
      borderTopRightRadius: 4
    },
    '&:last-child': {
      borderBottomLeftRadius: 4,
      borderBottomRightRadius: 4,
      '& span': {
        '& label': {
          '& span:last-child': {
            borderBottom: '1px solid  rgba(0, 0, 0, 0.23)'
          }
        }
      }
    }
  },
  verticalMediumCircular: {
    '&:first-child': {
      borderTopLeftRadius: theme.spacing(5.5),
      borderTopRightRadius: theme.spacing(5.5)
    },
    '&:last-child': {
      borderBottomLeftRadius: theme.spacing(5.5),
      borderBottomRightRadius: theme.spacing(5.5)
    }
  },
  verticalSmallCircular: {
    '&:first-child': {
      borderTopLeftRadius: theme.spacing(4),
      borderTopRightRadius: theme.spacing(4)
    },
    '&:last-child': {
      borderBottomLeftRadius: theme.spacing(4),
      borderBottomRightRadius: theme.spacing(4)
    }
  },
  verticalLargeCircular: {
    '&:first-child': {
      borderTopLeftRadius: theme.spacing(7),
      borderTopRightRadius: theme.spacing(7)
    },
    '&:last-child': {
      borderBottomLeftRadius: theme.spacing(7),
      borderBottomRightRadius: theme.spacing(7)
    }
  },
  verticalSmall: {
    maxWidth: theme.spacing(8),
    minWidth: theme.spacing(8),
    minHeight: 32
  },
  verticalLarge: {
    width: theme.spacing(14),
    minHeight: 40
  },
  horizontal: {
    height: 36,
    '& span': {
      '& label': {
        '& span:last-child': {
          borderRight: 0
        }
      }
    },
    '&:first-child': {
      borderTopLeftRadius: 4,
      borderBottomLeftRadius: 4
    },
    '&:last-child': {
      borderTopRightRadius: 4,
      borderBottomRightRadius: 4,
      '& span': {
        '& label': {
          '& span:last-child': {
            borderRight: '1px solid  rgba(0, 0, 0, 0.23)'
          }
        }
      }
    }
  },
  horizontalSmall: {
    minWidth: theme.spacing(8),
    height: 32,
    minHeight: 32
  },
  horizontalLarge: {
    minWidth: theme.spacing(14),
    height: 40
  },
  horizontalSmallCircular: {
    '&:first-child': {
      borderTopLeftRadius: 16,
      borderBottomLeftRadius: 16
    },
    '&:last-child': {
      borderTopRightRadius: 16,
      borderBottomRightRadius: 16
    }
  },
  horizontalMediumCircular: {
    '&:first-child': {
      borderTopLeftRadius: 18,
      borderBottomLeftRadius: 18
    },
    '&:last-child': {
      borderTopRightRadius: 18,
      borderBottomRightRadius: 18
    }
  },
  horizontalLargeCircular: {
    '&:first-child': {
      borderTopLeftRadius: 20,
      borderBottomLeftRadius: 20
    },
    '&:last-child': {
      borderTopRightRadius: 20,
      borderBottomRightRadius: 20
    }
  }
});

class RadioButton extends Component {
  getButtonStyles() {
    const {
      row,
      size
    } = this.context;
    const position = row ? 'horizontal' : 'vertical';
    const postfix = size === 'small' ? 'Small' : 'Large';
    return position + postfix;
  }

  render() {
    const _this$props = this.props,
          {
      classes,
      className: classNamePro
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["classes", "className"]);

    const {
      disabled
    } = this.props;
    const {
      row,
      size,
      circular
    } = this.context;
    const Label = getLabel(other);
    const styles = this.getButtonStyles();
    const className = classNames({
      [classes.vertical]: !row,
      [classes.horizontal]: row,
      [classes[styles]]: size !== 'medium',
      [classes[`${styles}Circular`]]: circular
    }, classNamePro);
    return React.createElement(Button, {
      className: className,
      classes: {
        root: classes.root,
        label: classes.label
      },
      color: "primary",
      disabled: disabled
    }, React.createElement(Label, null));
  }

}

process.env.NODE_ENV !== "production" ? RadioButton.propTypes = {
  /**
   *  RadioButton 的value
   */
  value: PropTypes.string
} : void 0;
RadioButton.contextTypes = {
  row: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  circular: PropTypes.bool
};

function getLabel(props) {
  const styles = theme => ({
    root: {
      margin: 0,
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      borderRadius: 'inherit'
    },
    label: {
      width: '100%',
      height: '100%',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 'inherit',
      border: '1px solid  rgba(0, 0, 0, 0.23)'
    }
  });

  const {
    children
  } = props,
        other = _objectWithoutPropertiesLoose(props, ["children"]);

  function Label(props) {
    const {
      classes
    } = props;
    const Radio = getRadio(other);
    return React.createElement(FormControlLabel, _extends({
      classes: {
        root: classes.root,
        label: classes.label
      }
    }, other, {
      control: React.createElement(Radio, null),
      label: children
    }));
  }

  return withStyles(styles, {
    name: 'RMLabel'
  })(Label);
}

function getRadio(props) {
  const styles = theme => ({
    root: {
      borderRadius: 'inherit',
      display: 'none'
    },
    checked: {
      '&+span': {
        color: theme.palette.primary.contrastText,
        background: theme.palette.primary.main,
        border: `1px solid ${theme.palette.primary.light}`
      }
    }
  });

  const radioProps = props;

  function R(props, context) {
    const {
      classes
    } = props;
    let {
      classes: classesPro
    } = context;
    classesPro = classesPro || {};
    return React.createElement(Radio, _extends({}, radioProps, {
      classes: {
        checked: classNames(classesPro.checked, classes.checked),
        root: classes.root
      }
    }));
  }

  R.contextTypes = {
    classes: PropTypes.object
  };
  return withStyles(styles, {
    name: 'RMRadio'
  })(R);
}

export default withStyles(styles, {
  name: 'RMRadioButton'
})(RadioButton);