@material-ui/core
Version:
React components that implement Google's Material Design.
70 lines (66 loc) • 2.02 kB
JavaScript
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
import withStyles from '../styles/withStyles';
export var styles = function styles(theme) {
return {
root: {
position: 'relative',
display: 'flex',
'&$checked $layer': {
transform: 'scale(1)',
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.shortest
})
}
},
layer: {
left: 0,
position: 'absolute',
transform: 'scale(0)',
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeIn,
duration: theme.transitions.duration.shortest
})
},
checked: {}
};
};
/**
* @ignore - internal component.
*/
function RadioButtonIcon(props) {
var checked = props.checked,
classes = props.classes,
fontSize = props.fontSize;
return /*#__PURE__*/React.createElement("div", {
className: clsx(classes.root, checked && classes.checked)
}, /*#__PURE__*/React.createElement(RadioButtonUncheckedIcon, {
fontSize: fontSize
}), /*#__PURE__*/React.createElement(RadioButtonCheckedIcon, {
fontSize: fontSize,
className: classes.layer
}));
}
process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
/**
* If `true`, the component is checked.
*/
checked: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* The size of the radio.
* `small` is equivalent to the dense radio styling.
*/
fontSize: PropTypes.oneOf(['small', 'medium'])
} : void 0;
export default withStyles(styles, {
name: 'PrivateRadioButtonIcon'
})(RadioButtonIcon);