UNPKG

@mui/base

Version:

A library of headless ('unstyled') React UI components and low-level hooks.

143 lines (139 loc) 6.18 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = useSnackbar; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var React = _interopRequireWildcard(require("react")); var _utils = require("@mui/utils"); var _extractEventHandlers = _interopRequireDefault(require("../utils/extractEventHandlers")); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /** * The basic building block for creating custom snackbar. * * Demos: * * - [Snackbar](https://mui.com/base/react-snackbar/#hook) * * API: * * - [useSnackbar API](https://mui.com/base/react-snackbar/hooks-api/#use-snackbar) */ function useSnackbar(parameters) { const { autoHideDuration = null, disableWindowBlurListener = false, onClose, open, 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 == null ? void 0 : onClose(nativeEvent, 'escapeKeyDown'); } } } document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [open, onClose]); const handleClose = (0, _utils.unstable_useEventCallback)((event, reason) => { onClose == null ? void 0 : onClose(event, reason); }); const setAutoHideTimer = (0, _utils.unstable_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 == null ? void 0 : 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 == null ? void 0 : onBlurCallback(event); handleResume(); }; const createHandleFocus = otherHandlers => event => { const onFocusCallback = otherHandlers.onFocus; onFocusCallback == null ? void 0 : onFocusCallback(event); handlePause(); }; const createMouseEnter = otherHandlers => event => { const onMouseEnterCallback = otherHandlers.onMouseEnter; onMouseEnterCallback == null ? void 0 : onMouseEnterCallback(event); handlePause(); }; const createMouseLeave = otherHandlers => event => { const onMouseLeaveCallback = otherHandlers.onMouseLeave; onMouseLeaveCallback == null ? void 0 : 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 = (0, _extractEventHandlers.default)(parameters); const externalEventHandlers = (0, _extends2.default)({}, propsEventHandlers, otherHandlers); return (0, _extends2.default)({ // 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 }; }