Files F100895830

useSwitch.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 3, 17:27

useSwitch.js
View Options

	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:
	*
	* - [Switches](https://mui.com/components/switches/)
	*/
	export default 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 => {
	var _otherProps$onChange;
	// Workaround for https://github.com/facebook/react/issues/9023
	if (event.nativeEvent.defaultPrevented) {
	return;
	}
	setCheckedState(event.target.checked);
	onChange == null ? void 0 : onChange(event);
	(_otherProps$onChange = otherProps.onChange) == null ? void 0 : _otherProps$onChange.call(otherProps, 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 => {
	var _otherProps$onFocus;
	// 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 == null ? void 0 : onFocusVisible(event);
	}
	onFocus == null ? void 0 : onFocus(event);
	(_otherProps$onFocus = otherProps.onFocus) == null ? void 0 : _otherProps$onFocus.call(otherProps, event);
	};
	const createHandleBlur = otherProps => event => {
	var _otherProps$onBlur;
	handleBlurVisible(event);
	if (isFocusVisibleRef.current === false) {
	setFocusVisible(false);
	}
	onBlur == null ? void 0 : onBlur(event);
	(_otherProps$onBlur = otherProps.onBlur) == null ? void 0 : _otherProps$onBlur.call(otherProps, event);
	};
	const handleRefChange = useForkRef(focusVisibleRef, inputRef);
	const getInputProps = (otherProps = {}) => _extends({
	checked: checkedProp,
	defaultChecked,
	disabled,
	readOnly,
	ref: handleRefChange,
	required,
	type: 'checkbox'
	}, otherProps, {
	onChange: createHandleInputChange(otherProps),
	onFocus: createHandleFocus(otherProps),
	onBlur: createHandleBlur(otherProps)
	});
	return {
	checked,
	disabled: Boolean(disabled),
	focusVisible,
	getInputProps,
	readOnly: Boolean(readOnly)
	};
	}

Event Timeline