@ozen-ui/kit
Version:
React component library
89 lines (88 loc) • 5.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SnackbarProvider = exports.cnSnackbar = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var generateUniqKey_1 = require("../../utils/generateUniqKey");
var components_1 = require("./components");
var constants_1 = require("./constants");
var SnackbarContext_1 = require("./SnackbarContext");
var store_1 = require("./store");
exports.cnSnackbar = (0, classname_1.cn)('Snackbar');
exports.SnackbarProvider = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'SnackbarProvider',
});
var _a = props.anchorOrigin, anchorOrigin = _a === void 0 ? constants_1.SNACKBAR_DEFAULT_ANCHOR_ORIGIN : _a, _b = props.maxMessages, maxMessages = _b === void 0 ? constants_1.SNACKBAR_DEFAULT_MAX_MESSAGES : _b, _c = props.container, container = _c === void 0 ? constants_1.SNACKBAR_DEFAULT_CONTAINER : _c, _d = props.lifetime, lifetime = _d === void 0 ? constants_1.SNACKBAR_DEFAULT_LIFETIME : _d, _e = props.disableWindowBlurListener, disableWindowBlurListener = _e === void 0 ? constants_1.SNACKBAR_DEFAULT_DISABLE_WINDOW_BLUR_LISTENER : _e, _f = props.status, status = _f === void 0 ? constants_1.SNACKBAR_ITEM_DEFAULT_STATUS : _f, className = props.className, children = props.children, other = tslib_1.__rest(props, ["anchorOrigin", "maxMessages", "container", "lifetime", "disableWindowBlurListener", "status", "className", "children"]);
var providerProps = (0, react_1.useMemo)(function () { return ({
status: status,
anchorOrigin: anchorOrigin,
maxMessages: maxMessages,
lifetime: lifetime,
disableWindowBlurListener: disableWindowBlurListener,
}); }, [status, anchorOrigin, maxMessages, lifetime, disableWindowBlurListener]);
var _g = tslib_1.__read((0, react_1.useReducer)(store_1.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 tslib_1.__assign(tslib_1.__assign({}, acc), (_a = {}, _a[originKey] = tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(((!isVerticalOriginTop && currentOriginMessages) || [])), false), [
message
], false), tslib_1.__read(((isVerticalOriginTop && currentOriginMessages) || [])), false), _a));
}, {});
var pushMessage = (0, react_1.useCallback)(function (pushMessageProps) {
var messageId = pushMessageProps.messageId || (0, generateUniqKey_1.generateUniqKey)();
dispatch({
type: 'push-message',
payload: tslib_1.__assign(tslib_1.__assign({}, pushMessageProps), { messageId: messageId }),
});
return messageId;
}, []);
var closeMessage = (0, react_1.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 });
};
(0, react_1.useEffect)(function () {
dispatch({ type: 'update-messages-from-queue' });
}, [state]);
(0, react_1.useEffect)(function () {
dispatch({ type: 'set-provider-props', payload: providerProps });
}, [providerProps]);
var context = (0, react_1.useMemo)(function () { return ({ pushMessage: pushMessage, closeMessage: closeMessage }); }, []);
var snackbars = Object.keys(messagesByAnchorOrigin).map(function (origin) {
var _a;
var messages = messagesByAnchorOrigin[origin] || [];
return (react_1.default.createElement(components_1.Snackbar, tslib_1.__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_1.default.createElement(components_1.SnackbarItem, tslib_1.__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_1.default.createElement(SnackbarContext_1.SnackbarContext.Provider, { value: context },
children,
snackbars));
});
exports.SnackbarProvider.displayName = 'SnackbarProvider';