1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { refType } from '@mui/utils';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import { alpha } from '@mui/system';
|
9 | import SwitchBase from '../internal/SwitchBase';
|
10 | import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
|
11 | import CheckBoxIcon from '../internal/svg-icons/CheckBox';
|
12 | import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
|
13 | import capitalize from '../utils/capitalize';
|
14 | import useThemeProps from '../styles/useThemeProps';
|
15 | import styled, { rootShouldForwardProp } from '../styles/styled';
|
16 | import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
|
17 | import { jsx as _jsx } from "react/jsx-runtime";
|
18 |
|
19 | const useUtilityClasses = ownerState => {
|
20 | const {
|
21 | classes,
|
22 | indeterminate,
|
23 | color
|
24 | } = ownerState;
|
25 | const slots = {
|
26 | root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`]
|
27 | };
|
28 | const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
|
29 | return _extends({}, classes, composedClasses);
|
30 | };
|
31 |
|
32 | const CheckboxRoot = styled(SwitchBase, {
|
33 | shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
34 | name: 'MuiCheckbox',
|
35 | slot: 'Root',
|
36 | overridesResolver: (props, styles) => {
|
37 | const {
|
38 | ownerState
|
39 | } = props;
|
40 | return [styles.root, ownerState.indeterminate && styles.indeterminate, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
|
41 | }
|
42 | })(({
|
43 | theme,
|
44 | ownerState
|
45 | }) => _extends({
|
46 | color: (theme.vars || theme).palette.text.secondary
|
47 | }, !ownerState.disableRipple && {
|
48 | '&:hover': {
|
49 | backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
50 |
|
51 | '@media (hover: none)': {
|
52 | backgroundColor: 'transparent'
|
53 | }
|
54 | }
|
55 | }, ownerState.color !== 'default' && {
|
56 | [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
|
57 | color: (theme.vars || theme).palette[ownerState.color].main
|
58 | },
|
59 | [`&.${checkboxClasses.disabled}`]: {
|
60 | color: (theme.vars || theme).palette.action.disabled
|
61 | }
|
62 | }));
|
63 |
|
64 | const defaultCheckedIcon = _jsx(CheckBoxIcon, {});
|
65 |
|
66 | const defaultIcon = _jsx(CheckBoxOutlineBlankIcon, {});
|
67 |
|
68 | const defaultIndeterminateIcon = _jsx(IndeterminateCheckBoxIcon, {});
|
69 |
|
70 | const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
|
71 | const props = useThemeProps({
|
72 | props: inProps,
|
73 | name: 'MuiCheckbox'
|
74 | });
|
75 |
|
76 | const {
|
77 | checkedIcon = defaultCheckedIcon,
|
78 | color = 'primary',
|
79 | icon: iconProp = defaultIcon,
|
80 | indeterminate = false,
|
81 | indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
|
82 | inputProps,
|
83 | size = 'medium'
|
84 | } = props,
|
85 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
86 |
|
87 | const icon = indeterminate ? indeterminateIconProp : iconProp;
|
88 | const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
|
89 |
|
90 | const ownerState = _extends({}, props, {
|
91 | color,
|
92 | indeterminate,
|
93 | size
|
94 | });
|
95 |
|
96 | const classes = useUtilityClasses(ownerState);
|
97 | return _jsx(CheckboxRoot, _extends({
|
98 | type: "checkbox",
|
99 | inputProps: _extends({
|
100 | 'data-indeterminate': indeterminate
|
101 | }, inputProps),
|
102 | icon: React.cloneElement(icon, {
|
103 | fontSize: icon.props.fontSize ?? size
|
104 | }),
|
105 | checkedIcon: React.cloneElement(indeterminateIcon, {
|
106 | fontSize: indeterminateIcon.props.fontSize ?? size
|
107 | }),
|
108 | ownerState: ownerState,
|
109 | ref: ref
|
110 | }, other, {
|
111 | classes: classes
|
112 | }));
|
113 | });
|
114 | process.env.NODE_ENV !== "production" ? Checkbox.propTypes
|
115 |
|
116 | = {
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | |
123 |
|
124 |
|
125 | checked: PropTypes.bool,
|
126 |
|
127 | |
128 |
|
129 |
|
130 |
|
131 | checkedIcon: PropTypes.node,
|
132 |
|
133 | |
134 |
|
135 |
|
136 | classes: PropTypes.object,
|
137 |
|
138 | |
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | color: PropTypes
|
145 |
|
146 | .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
147 |
|
148 | |
149 |
|
150 |
|
151 | defaultChecked: PropTypes.bool,
|
152 |
|
153 | |
154 |
|
155 |
|
156 | disabled: PropTypes.bool,
|
157 |
|
158 | |
159 |
|
160 |
|
161 | disableRipple: PropTypes.bool,
|
162 |
|
163 | |
164 |
|
165 |
|
166 |
|
167 | icon: PropTypes.node,
|
168 |
|
169 | |
170 |
|
171 |
|
172 | id: PropTypes.string,
|
173 |
|
174 | |
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 | indeterminate: PropTypes.bool,
|
182 |
|
183 | |
184 |
|
185 |
|
186 |
|
187 | indeterminateIcon: PropTypes.node,
|
188 |
|
189 | |
190 |
|
191 |
|
192 | inputProps: PropTypes.object,
|
193 |
|
194 | |
195 |
|
196 |
|
197 | inputRef: refType,
|
198 |
|
199 | |
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | onChange: PropTypes.func,
|
206 |
|
207 | |
208 |
|
209 |
|
210 | required: PropTypes.bool,
|
211 |
|
212 | |
213 |
|
214 |
|
215 |
|
216 |
|
217 | size: PropTypes
|
218 |
|
219 | .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
220 |
|
221 | |
222 |
|
223 |
|
224 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
225 |
|
226 | |
227 |
|
228 |
|
229 |
|
230 | value: PropTypes.any
|
231 | } : void 0;
|
232 | export default Checkbox; |
\ | No newline at end of file |