Files F99562722

useSnackbar.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Sat, Jan 25, 10:49

useSnackbar.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import * as React from 'react';
	import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
	import extractEventHandlers from '../utils/extractEventHandlers';

	/**
	* The basic building block for creating custom snackbar.
	*
	* Demos:
	*
	* - [Snackbar](https://mui.com/base/react-snackbar/)
	*/
	export default function useSnackbar(parameters) {
	const {
	autoHideDuration = null,
	disableWindowBlurListener = false,
	onClose,
	open,
	ref,
	resumeHideDuration
	} = parameters;
	const timerAutoHide = React.useRef();
	React.useEffect(() => {
	if (!open) {
	return undefined;
	}

	/**
	* @param {KeyboardEvent} nativeEvent
	*/
	function handleKeyDown(nativeEvent) {
	if (!nativeEvent.defaultPrevented) {
	// IE11, Edge (prior to using Blink?) use 'Esc'
	if (nativeEvent.key === 'Escape' \|\| nativeEvent.key === 'Esc') {
	// not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
	onClose?.(nativeEvent, 'escapeKeyDown');
	}
	}
	}
	document.addEventListener('keydown', handleKeyDown);
	return () => {
	document.removeEventListener('keydown', handleKeyDown);
	};
	}, [open, onClose]);
	const handleClose = useEventCallback((event, reason) => {
	onClose?.(event, reason);
	});
	const setAutoHideTimer = useEventCallback(autoHideDurationParam => {
	if (!onClose \|\| autoHideDurationParam == null) {
	return;
	}
	clearTimeout(timerAutoHide.current);
	timerAutoHide.current = setTimeout(() => {
	handleClose(null, 'timeout');
	}, autoHideDurationParam);
	});
	React.useEffect(() => {
	if (open) {
	setAutoHideTimer(autoHideDuration);
	}
	return () => {
	clearTimeout(timerAutoHide.current);
	};
	}, [open, autoHideDuration, setAutoHideTimer]);
	const handleClickAway = event => {
	onClose?.(event, 'clickaway');
	};

	// Pause the timer when the user is interacting with the Snackbar
	// or when the user hide the window.
	const handlePause = () => {
	clearTimeout(timerAutoHide.current);
	};

	// Restart the timer when the user is no longer interacting with the Snackbar
	// or when the window is shown back.
	const handleResume = React.useCallback(() => {
	if (autoHideDuration != null) {
	setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
	}
	}, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
	const createHandleBlur = otherHandlers => event => {
	const onBlurCallback = otherHandlers.onBlur;
	onBlurCallback?.(event);
	handleResume();
	};
	const createHandleFocus = otherHandlers => event => {
	const onFocusCallback = otherHandlers.onFocus;
	onFocusCallback?.(event);
	handlePause();
	};
	const createMouseEnter = otherHandlers => event => {
	const onMouseEnterCallback = otherHandlers.onMouseEnter;
	onMouseEnterCallback?.(event);
	handlePause();
	};
	const createMouseLeave = otherHandlers => event => {
	const onMouseLeaveCallback = otherHandlers.onMouseLeave;
	onMouseLeaveCallback?.(event);
	handleResume();
	};
	React.useEffect(() => {
	// TODO: window global should be refactored here
	if (!disableWindowBlurListener && open) {
	window.addEventListener('focus', handleResume);
	window.addEventListener('blur', handlePause);
	return () => {
	window.removeEventListener('focus', handleResume);
	window.removeEventListener('blur', handlePause);
	};
	}
	return undefined;
	}, [disableWindowBlurListener, handleResume, open]);
	const getRootProps = (otherHandlers = {}) => {
	const propsEventHandlers = extractEventHandlers(parameters);
	const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
	return _extends({
	ref,
	// ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
	// See https://github.com/mui/material-ui/issues/29080
	role: 'presentation'
	}, externalEventHandlers, {
	onBlur: createHandleBlur(externalEventHandlers),
	onFocus: createHandleFocus(externalEventHandlers),
	onMouseEnter: createMouseEnter(externalEventHandlers),
	onMouseLeave: createMouseLeave(externalEventHandlers)
	});
	};
	return {
	getRootProps,
	onClickAway: handleClickAway
	};
	}

Event Timeline