RadioButtonIcon.js
2.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
'use client';
import PropTypes from 'prop-types';
import RadioButtonUncheckedIcon from "../internal/svg-icons/RadioButtonUnchecked.js";
import RadioButtonCheckedIcon from "../internal/svg-icons/RadioButtonChecked.js";
import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
import { styled } from "../zero-styled/index.js";
import memoTheme from "../utils/memoTheme.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RadioButtonIconRoot = styled('span', {
name: 'MuiRadioButtonIcon',
shouldForwardProp: rootShouldForwardProp
})({
position: 'relative',
display: 'flex'
});
const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
name: 'MuiRadioButtonIcon'
})({
// Scale applied to prevent dot misalignment in Safari
transform: 'scale(1)'
});
const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
name: 'MuiRadioButtonIcon'
})(memoTheme(({
theme
}) => ({
left: 0,
position: 'absolute',
transform: 'scale(0)',
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeIn,
duration: theme.transitions.duration.shortest
}),
variants: [{
props: {
checked: true
},
style: {
transform: 'scale(1)',
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.shortest
})
}
}]
})));
/**
* @ignore - internal component.
*/
function RadioButtonIcon(props) {
const {
checked = false,
classes = {},
fontSize
} = props;
const ownerState = {
...props,
checked
};
return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
className: classes.root,
ownerState: ownerState,
children: [/*#__PURE__*/_jsx(RadioButtonIconBackground, {
fontSize: fontSize,
className: classes.background,
ownerState: ownerState
}), /*#__PURE__*/_jsx(RadioButtonIconDot, {
fontSize: fontSize,
className: classes.dot,
ownerState: ownerState
})]
});
}
process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes /* remove-proptypes */ = {
/**
* If `true`, the component is checked.
*/
checked: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
*/
fontSize: PropTypes.oneOf(['small', 'medium'])
} : void 0;
export default RadioButtonIcon;