@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
26 lines • 1.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationInbox;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const MagicBellContext_js_1 = require("../../context/MagicBellContext.js");
const NotificationsView_js_1 = tslib_1.__importDefault(require("./private/NotificationsView.js"));
const PreferencesView_js_1 = tslib_1.__importDefault(require("./private/PreferencesView.js"));
const StyledContainer_js_1 = tslib_1.__importDefault(require("./StyledContainer.js"));
/**
* Component that renders all notifications as well as a header and a footer.
*
* @example
* <NotificationInbox
* storeId="unread"
* onNotificationClick={openTicket}
* onAllRead={showAlert} />
*/
function NotificationInbox({ height, layout = ['header', 'content', 'push-notifications-banner', 'footer'], tabs, ...props }) {
const [view, setView] = (0, react_1.useState)('inbox');
const { isFetchingConfig } = (0, MagicBellContext_js_1.useMagicBellContext)();
if (isFetchingConfig)
return null;
return (react_1.default.createElement(StyledContainer_js_1.default, { height: height, layout: layout }, view === 'preferences' ? (react_1.default.createElement(PreferencesView_js_1.default, { ...props, layout: layout, setView: setView })) : (react_1.default.createElement(NotificationsView_js_1.default, { ...props, tabs: tabs, layout: layout, setView: setView }))));
}
//# sourceMappingURL=NotificationInbox.js.map