1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import { refType } from '@material-ui/utils';
|
7 | import useControlled from '../utils/useControlled';
|
8 | import useFormControl from '../FormControl/useFormControl';
|
9 | import withStyles from '../styles/withStyles';
|
10 | import IconButton from '../IconButton';
|
11 | export const styles = {
|
12 | root: {
|
13 | padding: 9
|
14 | },
|
15 | checked: {},
|
16 | disabled: {},
|
17 | input: {
|
18 | cursor: 'inherit',
|
19 | position: 'absolute',
|
20 | opacity: 0,
|
21 | width: '100%',
|
22 | height: '100%',
|
23 | top: 0,
|
24 | left: 0,
|
25 | margin: 0,
|
26 | padding: 0,
|
27 | zIndex: 1
|
28 | }
|
29 | };
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
|
35 | const {
|
36 | autoFocus,
|
37 | checked: checkedProp,
|
38 | checkedIcon,
|
39 | classes,
|
40 | className,
|
41 | defaultChecked,
|
42 | disabled: disabledProp,
|
43 | icon,
|
44 | id,
|
45 | inputProps,
|
46 | inputRef,
|
47 | name,
|
48 | onBlur,
|
49 | onChange,
|
50 | onFocus,
|
51 | readOnly,
|
52 | required,
|
53 | tabIndex,
|
54 | type,
|
55 | value
|
56 | } = props,
|
57 | other = _objectWithoutPropertiesLoose(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
|
58 |
|
59 | const [checked, setCheckedState] = useControlled({
|
60 | controlled: checkedProp,
|
61 | default: Boolean(defaultChecked),
|
62 | name: 'SwitchBase',
|
63 | state: 'checked'
|
64 | });
|
65 | const muiFormControl = useFormControl();
|
66 |
|
67 | const handleFocus = event => {
|
68 | if (onFocus) {
|
69 | onFocus(event);
|
70 | }
|
71 |
|
72 | if (muiFormControl && muiFormControl.onFocus) {
|
73 | muiFormControl.onFocus(event);
|
74 | }
|
75 | };
|
76 |
|
77 | const handleBlur = event => {
|
78 | if (onBlur) {
|
79 | onBlur(event);
|
80 | }
|
81 |
|
82 | if (muiFormControl && muiFormControl.onBlur) {
|
83 | muiFormControl.onBlur(event);
|
84 | }
|
85 | };
|
86 |
|
87 | const handleInputChange = event => {
|
88 | const newChecked = event.target.checked;
|
89 | setCheckedState(newChecked);
|
90 |
|
91 | if (onChange) {
|
92 |
|
93 | onChange(event, newChecked);
|
94 | }
|
95 | };
|
96 |
|
97 | let disabled = disabledProp;
|
98 |
|
99 | if (muiFormControl) {
|
100 | if (typeof disabled === 'undefined') {
|
101 | disabled = muiFormControl.disabled;
|
102 | }
|
103 | }
|
104 |
|
105 | const hasLabelFor = type === 'checkbox' || type === 'radio';
|
106 | return React.createElement(IconButton, _extends({
|
107 | component: "span",
|
108 | className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
|
109 | disabled: disabled,
|
110 | tabIndex: null,
|
111 | role: undefined,
|
112 | onFocus: handleFocus,
|
113 | onBlur: handleBlur,
|
114 | ref: ref
|
115 | }, other), React.createElement("input", _extends({
|
116 | autoFocus: autoFocus,
|
117 | checked: checkedProp,
|
118 | defaultChecked: defaultChecked,
|
119 | className: classes.input,
|
120 | disabled: disabled,
|
121 | id: hasLabelFor && id,
|
122 | name: name,
|
123 | onChange: handleInputChange,
|
124 | readOnly: readOnly,
|
125 | ref: inputRef,
|
126 | required: required,
|
127 | tabIndex: tabIndex,
|
128 | type: type,
|
129 | value: value
|
130 | }, inputProps)), checked ? checkedIcon : icon);
|
131 | });
|
132 |
|
133 |
|
134 | process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
|
135 | |
136 |
|
137 |
|
138 | autoFocus: PropTypes.bool,
|
139 |
|
140 | |
141 |
|
142 |
|
143 | checked: PropTypes.bool,
|
144 |
|
145 | |
146 |
|
147 |
|
148 | checkedIcon: PropTypes.node.isRequired,
|
149 |
|
150 | |
151 |
|
152 |
|
153 |
|
154 | classes: PropTypes.object.isRequired,
|
155 |
|
156 | |
157 |
|
158 |
|
159 | className: PropTypes.string,
|
160 |
|
161 | |
162 |
|
163 |
|
164 | defaultChecked: PropTypes.bool,
|
165 |
|
166 | |
167 |
|
168 |
|
169 | disabled: PropTypes.bool,
|
170 |
|
171 | |
172 |
|
173 |
|
174 | icon: PropTypes.node.isRequired,
|
175 |
|
176 | |
177 |
|
178 |
|
179 | id: PropTypes.string,
|
180 |
|
181 | |
182 |
|
183 |
|
184 | inputProps: PropTypes.object,
|
185 |
|
186 | |
187 |
|
188 |
|
189 | inputRef: refType,
|
190 |
|
191 | |
192 |
|
193 |
|
194 | name: PropTypes.string,
|
195 |
|
196 | |
197 |
|
198 |
|
199 | onBlur: PropTypes.func,
|
200 |
|
201 | |
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 | onChange: PropTypes.func,
|
208 |
|
209 | |
210 |
|
211 |
|
212 | onFocus: PropTypes.func,
|
213 |
|
214 | |
215 |
|
216 |
|
217 |
|
218 | readOnly: PropTypes.bool,
|
219 |
|
220 | |
221 |
|
222 |
|
223 | required: PropTypes.bool,
|
224 |
|
225 | |
226 |
|
227 |
|
228 | tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
229 |
|
230 | |
231 |
|
232 |
|
233 | type: PropTypes.string.isRequired,
|
234 |
|
235 | |
236 |
|
237 |
|
238 | value: PropTypes.any
|
239 | } : void 0;
|
240 | export default withStyles(styles, {
|
241 | name: 'PrivateSwitchBase'
|
242 | })(SwitchBase); |
\ | No newline at end of file |