@ozen-ui/kit
Version:
React component library
86 lines (85 loc) • 5.5 kB
JavaScript
import { __assign, __read, __rest, __spreadArray } from "tslib";
import React, { forwardRef, useCallback, useReducer, useEffect, useMemo, } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { generateUniqKey } from '../../utils/generateUniqKey';
import { Snackbar, SnackbarItem } from './components';
import { SNACKBAR_DEFAULT_ANCHOR_ORIGIN, SNACKBAR_DEFAULT_MAX_MESSAGES, SNACKBAR_DEFAULT_CONTAINER, SNACKBAR_DEFAULT_LIFETIME, SNACKBAR_ITEM_DEFAULT_STATUS, SNACKBAR_DEFAULT_DISABLE_WINDOW_BLUR_LISTENER, } from './constants';
import { SnackbarContext } from './SnackbarContext';
import { snackbarReducer } from './store';
export var cnSnackbar = cn('Snackbar');
export var SnackbarProvider = forwardRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'SnackbarProvider',
});
var _a = props.anchorOrigin, anchorOrigin = _a === void 0 ? SNACKBAR_DEFAULT_ANCHOR_ORIGIN : _a, _b = props.maxMessages, maxMessages = _b === void 0 ? SNACKBAR_DEFAULT_MAX_MESSAGES : _b, _c = props.container, container = _c === void 0 ? SNACKBAR_DEFAULT_CONTAINER : _c, _d = props.lifetime, lifetime = _d === void 0 ? SNACKBAR_DEFAULT_LIFETIME : _d, _e = props.disableWindowBlurListener, disableWindowBlurListener = _e === void 0 ? SNACKBAR_DEFAULT_DISABLE_WINDOW_BLUR_LISTENER : _e, _f = props.status, status = _f === void 0 ? SNACKBAR_ITEM_DEFAULT_STATUS : _f, className = props.className, children = props.children, other = __rest(props, ["anchorOrigin", "maxMessages", "container", "lifetime", "disableWindowBlurListener", "status", "className", "children"]);
var providerProps = useMemo(function () { return ({
status: status,
anchorOrigin: anchorOrigin,
maxMessages: maxMessages,
lifetime: lifetime,
disableWindowBlurListener: disableWindowBlurListener,
}); }, [status, anchorOrigin, maxMessages, lifetime, disableWindowBlurListener]);
var _g = __read(useReducer(snackbarReducer, {
providerProps: providerProps,
messages: [],
queue: [],
}), 2), state = _g[0], dispatch = _g[1];
var messagesByAnchorOrigin = state.messages.reduce(function (acc, message) {
var _a;
var anchorOrigin = message.anchorOrigin;
var originKey = "".concat(anchorOrigin.horizontal, "-").concat(anchorOrigin.vertical);
var currentOriginMessages = acc[originKey] || [];
var isVerticalOriginTop = (anchorOrigin === null || anchorOrigin === void 0 ? void 0 : anchorOrigin.vertical) === 'top';
return __assign(__assign({}, acc), (_a = {}, _a[originKey] = __spreadArray(__spreadArray(__spreadArray([], __read(((!isVerticalOriginTop && currentOriginMessages) || [])), false), [
message
], false), __read(((isVerticalOriginTop && currentOriginMessages) || [])), false), _a));
}, {});
var pushMessage = useCallback(function (pushMessageProps) {
var messageId = pushMessageProps.messageId || generateUniqKey();
dispatch({
type: 'push-message',
payload: __assign(__assign({}, pushMessageProps), { messageId: messageId }),
});
return messageId;
}, []);
var closeMessage = useCallback(function (messageId) {
dispatch({ type: 'close-message', payload: messageId });
}, []);
var handleExitedSnackbarItem = function (messageId) {
dispatch({ type: 'delete-message', payload: messageId });
};
var handleEnteredSnackbarItem = function (messageId) {
dispatch({ type: 'message-opening-done', payload: messageId });
};
useEffect(function () {
dispatch({ type: 'update-messages-from-queue' });
}, [state]);
useEffect(function () {
dispatch({ type: 'set-provider-props', payload: providerProps });
}, [providerProps]);
var context = useMemo(function () { return ({ pushMessage: pushMessage, closeMessage: closeMessage }); }, []);
var snackbars = Object.keys(messagesByAnchorOrigin).map(function (origin) {
var _a;
var messages = messagesByAnchorOrigin[origin] || [];
return (React.createElement(Snackbar, __assign({}, other, { key: origin, anchorOrigin: (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.anchorOrigin, className: className, container: container, ref: ref }), !!messages.length &&
messages.map(function (message) { return (React.createElement(SnackbarItem, __assign({}, message, { key: message.key, onClose: function (messageId) {
var _a;
closeMessage(messageId);
(_a = message.onClose) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
}, onExited: function (messageId) {
var _a;
handleExitedSnackbarItem(messageId);
(_a = message.onExited) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
}, onEntered: function (messageId) {
var _a;
handleEnteredSnackbarItem(messageId);
(_a = message.onEntered) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
} }))); })));
});
return (React.createElement(SnackbarContext.Provider, { value: context },
children,
snackbars));
});
SnackbarProvider.displayName = 'SnackbarProvider';