@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
32 lines (30 loc) • 1.45 kB
JavaScript
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { InfiniteScroll } from '../../polyfills/infinite-scroll-module.js';
import ClickableNotification from '../ClickableNotification/index.js';
import Loader from './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} />
*/
export default function NotificationList({ notifications: store, onItemClick, height, queryParams, scrollableTarget, ListItem = ClickableNotification, }) {
const style = css `
height: 100%;
& .infinite-scroll-component__outerdiv {
height: 100%;
}
& .infinite-scroll-component {
min-height: 100%;
}
`;
return (_jsx("div", { css: style, children: _jsx(InfiniteScroll, { dataLength: store.notifications.length, hasMore: store.hasNextPage, next: () => store.fetchNextPage(queryParams), loader: _jsx(Loader, {}), height: height, scrollableTarget: scrollableTarget, children: store.notifications.map((notification) => (_jsx(ListItem, { notification: notification, onClick: onItemClick }, notification.id))) }) }));
}
//# sourceMappingURL=NotificationList.js.map