@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
36 lines (34 loc) • 1.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationList;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const infinite_scroll_module_js_1 = require("../../polyfills/infinite-scroll-module.js");
const index_js_1 = tslib_1.__importDefault(require("../ClickableNotification/index.js"));
const Loader_js_1 = tslib_1.__importDefault(require("./Loader.js"));
/**
* Infinite scroll list of notifications. Fetches the next page of the
* notifications store when the user scrolls to the bottom of the list.
*
* @example
* <NotificationList
* notifications={new NotificationStore()}
* queryParams={{ read: false }}
* onItemClick={openNotification}
* ListItem={Notification} />
*/
function NotificationList({ notifications: store, onItemClick, height, queryParams, scrollableTarget, ListItem = index_js_1.default, }) {
const style = (0, react_1.css) `
height: 100%;
& .infinite-scroll-component__outerdiv {
height: 100%;
}
& .infinite-scroll-component {
min-height: 100%;
}
`;
return ((0, jsx_runtime_1.jsx)("div", { css: style, children: (0, jsx_runtime_1.jsx)(infinite_scroll_module_js_1.InfiniteScroll, { dataLength: store.notifications.length, hasMore: store.hasNextPage, next: () => store.fetchNextPage(queryParams), loader: (0, jsx_runtime_1.jsx)(Loader_js_1.default, {}), height: height, scrollableTarget: scrollableTarget, children: store.notifications.map((notification) => ((0, jsx_runtime_1.jsx)(ListItem, { notification: notification, onClick: onItemClick }, notification.id))) }) }));
}
//# sourceMappingURL=NotificationList.js.map