UNPKG

3.21 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import * as React from 'react';
3import { unstable_useControlled as useControlled, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
4/**
5 * The basic building block for creating custom switches.
6 *
7 * Demos:
8 *
9 * - [Switch](https://mui.com/base/react-switch/#hook)
10 *
11 * API:
12 *
13 * - [useSwitch API](https://mui.com/base/react-switch/hooks-api/#use-switch)
14 */
15export default function useSwitch(props) {
16 const {
17 checked: checkedProp,
18 defaultChecked,
19 disabled,
20 onBlur,
21 onChange,
22 onFocus,
23 onFocusVisible,
24 readOnly,
25 required
26 } = props;
27 const [checked, setCheckedState] = useControlled({
28 controlled: checkedProp,
29 default: Boolean(defaultChecked),
30 name: 'Switch',
31 state: 'checked'
32 });
33 const createHandleInputChange = otherProps => event => {
34 var _otherProps$onChange;
35 // Workaround for https://github.com/facebook/react/issues/9023
36 if (event.nativeEvent.defaultPrevented) {
37 return;
38 }
39 setCheckedState(event.target.checked);
40 onChange == null ? void 0 : onChange(event);
41 (_otherProps$onChange = otherProps.onChange) == null ? void 0 : _otherProps$onChange.call(otherProps, event);
42 };
43 const {
44 isFocusVisibleRef,
45 onBlur: handleBlurVisible,
46 onFocus: handleFocusVisible,
47 ref: focusVisibleRef
48 } = useIsFocusVisible();
49 const [focusVisible, setFocusVisible] = React.useState(false);
50 if (disabled && focusVisible) {
51 setFocusVisible(false);
52 }
53 React.useEffect(() => {
54 isFocusVisibleRef.current = focusVisible;
55 }, [focusVisible, isFocusVisibleRef]);
56 const inputRef = React.useRef(null);
57 const createHandleFocus = otherProps => event => {
58 var _otherProps$onFocus;
59 // Fix for https://github.com/facebook/react/issues/7769
60 if (!inputRef.current) {
61 inputRef.current = event.currentTarget;
62 }
63 handleFocusVisible(event);
64 if (isFocusVisibleRef.current === true) {
65 setFocusVisible(true);
66 onFocusVisible == null ? void 0 : onFocusVisible(event);
67 }
68 onFocus == null ? void 0 : onFocus(event);
69 (_otherProps$onFocus = otherProps.onFocus) == null ? void 0 : _otherProps$onFocus.call(otherProps, event);
70 };
71 const createHandleBlur = otherProps => event => {
72 var _otherProps$onBlur;
73 handleBlurVisible(event);
74 if (isFocusVisibleRef.current === false) {
75 setFocusVisible(false);
76 }
77 onBlur == null ? void 0 : onBlur(event);
78 (_otherProps$onBlur = otherProps.onBlur) == null ? void 0 : _otherProps$onBlur.call(otherProps, event);
79 };
80 const handleInputRef = useForkRef(focusVisibleRef, inputRef);
81 const getInputProps = (otherProps = {}) => _extends({
82 checked: checkedProp,
83 defaultChecked,
84 disabled,
85 readOnly,
86 ref: handleInputRef,
87 required,
88 type: 'checkbox'
89 }, otherProps, {
90 onChange: createHandleInputChange(otherProps),
91 onFocus: createHandleFocus(otherProps),
92 onBlur: createHandleBlur(otherProps)
93 });
94 return {
95 checked,
96 disabled: Boolean(disabled),
97 focusVisible,
98 getInputProps,
99 inputRef: handleInputRef,
100 readOnly: Boolean(readOnly)
101 };
102}
\No newline at end of file