UNPKG

2.58 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import * as React from 'react';
3import PropTypes from 'prop-types';
4import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
5import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
6import styled from '../styles/styled';
7import { jsx as _jsx } from "react/jsx-runtime";
8import { jsxs as _jsxs } from "react/jsx-runtime";
9var RadioButtonIconRoot = styled('span')({
10 position: 'relative',
11 display: 'flex'
12});
13var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
14 // Scale applied to prevent dot misalignment in Safari
15 transform: 'scale(1)'
16});
17var RadioButtonIconDot = styled(RadioButtonCheckedIcon)(function (_ref) {
18 var theme = _ref.theme,
19 ownerState = _ref.ownerState;
20 return _extends({
21 left: 0,
22 position: 'absolute',
23 transform: 'scale(0)',
24 transition: theme.transitions.create('transform', {
25 easing: theme.transitions.easing.easeIn,
26 duration: theme.transitions.duration.shortest
27 })
28 }, ownerState.checked && {
29 transform: 'scale(1)',
30 transition: theme.transitions.create('transform', {
31 easing: theme.transitions.easing.easeOut,
32 duration: theme.transitions.duration.shortest
33 })
34 });
35});
36/**
37 * @ignore - internal component.
38 */
39
40function RadioButtonIcon(props) {
41 var _props$checked = props.checked,
42 checked = _props$checked === void 0 ? false : _props$checked,
43 _props$classes = props.classes,
44 classes = _props$classes === void 0 ? {} : _props$classes,
45 fontSize = props.fontSize;
46
47 var ownerState = _extends({}, props, {
48 checked: checked
49 });
50
51 return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
52 className: classes.root,
53 ownerState: ownerState,
54 children: [/*#__PURE__*/_jsx(RadioButtonIconBackground, {
55 fontSize: fontSize,
56 className: classes.background,
57 ownerState: ownerState
58 }), /*#__PURE__*/_jsx(RadioButtonIconDot, {
59 fontSize: fontSize,
60 className: classes.dot,
61 ownerState: ownerState
62 })]
63 });
64}
65
66process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
67 /**
68 * If `true`, the component is checked.
69 */
70 checked: PropTypes.bool,
71
72 /**
73 * Override or extend the styles applied to the component.
74 * See [CSS API](#css) below for more details.
75 */
76 classes: PropTypes.object,
77
78 /**
79 * The size of the component.
80 * `small` is equivalent to the dense radio styling.
81 */
82 fontSize: PropTypes.oneOf(['small', 'medium'])
83} : void 0;
84export default RadioButtonIcon;
\No newline at end of file