@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
58 lines • 2.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PreferencesCategories;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const react_headless_1 = require("@magicbell/react-headless");
const react_2 = require("react");
const CategoryPreferences_js_1 = tslib_1.__importDefault(require("./CategoryPreferences.js"));
function PreferencesCategories({ channels: selectedChannels, categories: selectedCategories, onChange, }) {
const preferences = (0, react_headless_1.useNotificationPreferences)();
const headerStyle = (0, react_1.css) `
opacity: 0.8;
text-transform: uppercase;
font-size: 0.7em !important;
`;
(0, react_2.useEffect)(() => {
if (!preferences.lastFetchedAt) {
preferences.fetch();
}
}, [preferences]);
const categories = (0, react_2.useMemo)(() => {
if (!preferences.categories?.length) {
return preferences.categories;
}
let categories = preferences.categories;
if (selectedCategories?.length) {
const categoriesSet = new Set(selectedCategories);
categories = categories.filter((category) => categoriesSet.has(category.slug));
}
if (selectedChannels?.length) {
const channelsSet = new Set(selectedChannels);
categories = categories.map((category) => ({
...category,
channels: category.channels.filter((channel) => channelsSet.has(channel.slug)),
}));
}
return categories;
}, [preferences.categories, selectedChannels, selectedCategories]);
if (!categories.length) {
// TODO: Consider providing an "empty" screen or some other way to let the
// user know they have no categories and could go create some.
return null;
}
const channelHeaders = categories[0].channels;
return ((0, jsx_runtime_1.jsx)("div", { css: (0, react_1.css) `
flex: 1;
height: 100%;
overflow-y: auto;
`, children: (0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
display: grid;
gap: 1em;
grid-template-columns: 2fr ${' 1fr'.repeat(channelHeaders.length).trim()};
padding: 16px 20px !important;
`, children: [(0, jsx_runtime_1.jsx)("div", {}), channelHeaders.map((header) => ((0, jsx_runtime_1.jsx)("div", { css: headerStyle, children: header.label }, header.slug))), categories.map((category) => ((0, jsx_runtime_1.jsx)(CategoryPreferences_js_1.default, { category: category, onChange: onChange }, category.slug)))] }) }));
}
//# sourceMappingURL=PreferencesCategories.js.map