103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
'use client';
|
|
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import * as React from 'react';
|
|
import { unstable_useControlled as useControlled, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
|
|
/**
|
|
* The basic building block for creating custom switches.
|
|
*
|
|
* Demos:
|
|
*
|
|
* - [Switch](https://mui.com/base-ui/react-switch/#hook)
|
|
*
|
|
* API:
|
|
*
|
|
* - [useSwitch API](https://mui.com/base-ui/react-switch/hooks-api/#use-switch)
|
|
*/
|
|
export function useSwitch(props) {
|
|
const {
|
|
checked: checkedProp,
|
|
defaultChecked,
|
|
disabled,
|
|
onBlur,
|
|
onChange,
|
|
onFocus,
|
|
onFocusVisible,
|
|
readOnly,
|
|
required
|
|
} = props;
|
|
const [checked, setCheckedState] = useControlled({
|
|
controlled: checkedProp,
|
|
default: Boolean(defaultChecked),
|
|
name: 'Switch',
|
|
state: 'checked'
|
|
});
|
|
const createHandleInputChange = otherProps => event => {
|
|
// Workaround for https://github.com/facebook/react/issues/9023
|
|
if (event.nativeEvent.defaultPrevented) {
|
|
return;
|
|
}
|
|
setCheckedState(event.target.checked);
|
|
onChange?.(event);
|
|
otherProps.onChange?.(event);
|
|
};
|
|
const {
|
|
isFocusVisibleRef,
|
|
onBlur: handleBlurVisible,
|
|
onFocus: handleFocusVisible,
|
|
ref: focusVisibleRef
|
|
} = useIsFocusVisible();
|
|
const [focusVisible, setFocusVisible] = React.useState(false);
|
|
if (disabled && focusVisible) {
|
|
setFocusVisible(false);
|
|
}
|
|
React.useEffect(() => {
|
|
isFocusVisibleRef.current = focusVisible;
|
|
}, [focusVisible, isFocusVisibleRef]);
|
|
const inputRef = React.useRef(null);
|
|
const createHandleFocus = otherProps => event => {
|
|
// Fix for https://github.com/facebook/react/issues/7769
|
|
if (!inputRef.current) {
|
|
inputRef.current = event.currentTarget;
|
|
}
|
|
handleFocusVisible(event);
|
|
if (isFocusVisibleRef.current === true) {
|
|
setFocusVisible(true);
|
|
onFocusVisible?.(event);
|
|
}
|
|
onFocus?.(event);
|
|
otherProps.onFocus?.(event);
|
|
};
|
|
const createHandleBlur = otherProps => event => {
|
|
handleBlurVisible(event);
|
|
if (isFocusVisibleRef.current === false) {
|
|
setFocusVisible(false);
|
|
}
|
|
onBlur?.(event);
|
|
otherProps.onBlur?.(event);
|
|
};
|
|
const handleInputRef = useForkRef(focusVisibleRef, inputRef);
|
|
const getInputProps = (otherProps = {}) => _extends({
|
|
checked: checkedProp,
|
|
defaultChecked,
|
|
disabled,
|
|
readOnly,
|
|
ref: handleInputRef,
|
|
required,
|
|
type: 'checkbox',
|
|
role: 'switch',
|
|
'aria-checked': checkedProp
|
|
}, otherProps, {
|
|
onChange: createHandleInputChange(otherProps),
|
|
onFocus: createHandleFocus(otherProps),
|
|
onBlur: createHandleBlur(otherProps)
|
|
});
|
|
return {
|
|
checked,
|
|
disabled: Boolean(disabled),
|
|
focusVisible,
|
|
getInputProps,
|
|
inputRef: handleInputRef,
|
|
readOnly: Boolean(readOnly)
|
|
};
|
|
} |