1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 |
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { refType } from '@material-ui/utils';
|
8 | import withStyles from '../styles/withStyles';
|
9 | import { alpha } from '../styles/colorManipulator';
|
10 | import capitalize from '../utils/capitalize';
|
11 | import SwitchBase from '../internal/SwitchBase';
|
12 | export const styles = theme => ({
|
13 |
|
14 | root: {
|
15 | display: 'inline-flex',
|
16 | width: 34 + 12 * 2,
|
17 | height: 14 + 12 * 2,
|
18 | overflow: 'hidden',
|
19 | padding: 12,
|
20 | boxSizing: 'border-box',
|
21 | position: 'relative',
|
22 | flexShrink: 0,
|
23 | zIndex: 0,
|
24 |
|
25 | verticalAlign: 'middle',
|
26 |
|
27 | '@media print': {
|
28 | colorAdjust: 'exact'
|
29 | }
|
30 | },
|
31 |
|
32 |
|
33 | edgeStart: {
|
34 | marginLeft: -8
|
35 | },
|
36 |
|
37 |
|
38 | edgeEnd: {
|
39 | marginRight: -8
|
40 | },
|
41 |
|
42 |
|
43 | switchBase: {
|
44 | position: 'absolute',
|
45 | top: 0,
|
46 | left: 0,
|
47 | zIndex: 1,
|
48 |
|
49 | color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
|
50 | transition: theme.transitions.create(['left', 'transform'], {
|
51 | duration: theme.transitions.duration.shortest
|
52 | }),
|
53 | '&$checked': {
|
54 | transform: 'translateX(20px)'
|
55 | },
|
56 | '&$disabled': {
|
57 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
58 | },
|
59 | '&$checked + $track': {
|
60 | opacity: 0.5
|
61 | },
|
62 | '&$disabled + $track': {
|
63 | opacity: theme.palette.type === 'light' ? 0.12 : 0.1
|
64 | }
|
65 | },
|
66 |
|
67 |
|
68 | colorPrimary: {
|
69 | '&$checked': {
|
70 | color: theme.palette.primary.main,
|
71 | '&:hover': {
|
72 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
73 | '@media (hover: none)': {
|
74 | backgroundColor: 'transparent'
|
75 | }
|
76 | }
|
77 | },
|
78 | '&$disabled': {
|
79 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
80 | },
|
81 | '&$checked + $track': {
|
82 | backgroundColor: theme.palette.primary.main
|
83 | },
|
84 | '&$disabled + $track': {
|
85 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
86 | }
|
87 | },
|
88 |
|
89 |
|
90 | colorSecondary: {
|
91 | '&$checked': {
|
92 | color: theme.palette.secondary.main,
|
93 | '&:hover': {
|
94 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
95 | '@media (hover: none)': {
|
96 | backgroundColor: 'transparent'
|
97 | }
|
98 | }
|
99 | },
|
100 | '&$disabled': {
|
101 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
102 | },
|
103 | '&$checked + $track': {
|
104 | backgroundColor: theme.palette.secondary.main
|
105 | },
|
106 | '&$disabled + $track': {
|
107 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
108 | }
|
109 | },
|
110 |
|
111 |
|
112 | sizeSmall: {
|
113 | width: 40,
|
114 | height: 24,
|
115 | padding: 7,
|
116 | '& $thumb': {
|
117 | width: 16,
|
118 | height: 16
|
119 | },
|
120 | '& $switchBase': {
|
121 | padding: 4,
|
122 | '&$checked': {
|
123 | transform: 'translateX(16px)'
|
124 | }
|
125 | }
|
126 | },
|
127 |
|
128 |
|
129 | checked: {},
|
130 |
|
131 |
|
132 | disabled: {},
|
133 |
|
134 |
|
135 | input: {
|
136 | left: '-100%',
|
137 | width: '300%'
|
138 | },
|
139 |
|
140 |
|
141 | thumb: {
|
142 | boxShadow: theme.shadows[1],
|
143 | backgroundColor: 'currentColor',
|
144 | width: 20,
|
145 | height: 20,
|
146 | borderRadius: '50%'
|
147 | },
|
148 |
|
149 |
|
150 | track: {
|
151 | height: '100%',
|
152 | width: '100%',
|
153 | borderRadius: 14 / 2,
|
154 | zIndex: -1,
|
155 | transition: theme.transitions.create(['opacity', 'background-color'], {
|
156 | duration: theme.transitions.duration.shortest
|
157 | }),
|
158 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
|
159 | opacity: theme.palette.type === 'light' ? 0.38 : 0.3
|
160 | }
|
161 | });
|
162 | const Switch = React.forwardRef(function Switch(props, ref) {
|
163 | const {
|
164 | classes,
|
165 | className,
|
166 | color = 'secondary',
|
167 | edge = false,
|
168 | size = 'medium'
|
169 | } = props,
|
170 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "edge", "size"]);
|
171 |
|
172 | const icon = React.createElement("span", {
|
173 | className: classes.thumb
|
174 | });
|
175 | return React.createElement("span", {
|
176 | className: clsx(classes.root, className, {
|
177 | 'start': classes.edgeStart,
|
178 | 'end': classes.edgeEnd
|
179 | }[edge], size === "small" && classes[`size${capitalize(size)}`])
|
180 | }, React.createElement(SwitchBase, _extends({
|
181 | type: "checkbox",
|
182 | icon: icon,
|
183 | checkedIcon: icon,
|
184 | classes: {
|
185 | root: clsx(classes.switchBase, classes[`color${capitalize(color)}`]),
|
186 | input: classes.input,
|
187 | checked: classes.checked,
|
188 | disabled: classes.disabled
|
189 | },
|
190 | ref: ref
|
191 | }, other)), React.createElement("span", {
|
192 | className: classes.track
|
193 | }));
|
194 | });
|
195 | process.env.NODE_ENV !== "production" ? Switch.propTypes = {
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 | |
202 |
|
203 |
|
204 | checked: PropTypes.bool,
|
205 |
|
206 | |
207 |
|
208 |
|
209 | checkedIcon: PropTypes.node,
|
210 |
|
211 | |
212 |
|
213 |
|
214 |
|
215 | classes: PropTypes.object,
|
216 |
|
217 | |
218 |
|
219 |
|
220 | className: PropTypes.string,
|
221 |
|
222 | |
223 |
|
224 |
|
225 | color: PropTypes.oneOf(['default', 'primary', 'secondary']),
|
226 |
|
227 | |
228 |
|
229 |
|
230 | defaultChecked: PropTypes.bool,
|
231 |
|
232 | |
233 |
|
234 |
|
235 | disabled: PropTypes.bool,
|
236 |
|
237 | |
238 |
|
239 |
|
240 | disableRipple: PropTypes.bool,
|
241 |
|
242 | |
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 | edge: PropTypes.oneOf(['end', 'start', false]),
|
249 |
|
250 | |
251 |
|
252 |
|
253 | icon: PropTypes.node,
|
254 |
|
255 | |
256 |
|
257 |
|
258 | id: PropTypes.string,
|
259 |
|
260 | |
261 |
|
262 |
|
263 | inputProps: PropTypes.object,
|
264 |
|
265 | |
266 |
|
267 |
|
268 | inputRef: refType,
|
269 |
|
270 | |
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 | onChange: PropTypes.func,
|
278 |
|
279 | |
280 |
|
281 |
|
282 | required: PropTypes.bool,
|
283 |
|
284 | |
285 |
|
286 |
|
287 |
|
288 | size: PropTypes.oneOf(['medium', 'small']),
|
289 |
|
290 | |
291 |
|
292 |
|
293 |
|
294 | value: PropTypes.any
|
295 | } : void 0;
|
296 | export default withStyles(styles, {
|
297 | name: 'MuiSwitch'
|
298 | })(Switch); |
\ | No newline at end of file |