@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
77 lines • 4.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTheme = void 0;
exports.MagicBellThemeProvider = MagicBellThemeProvider;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const color_js_1 = require("../lib/color.js");
const merge_js_1 = require("../lib/merge.js");
const Theme_js_1 = require("./Theme.js");
const MagicBellThemeContext = (0, react_1.createContext)(Theme_js_1.defaultTheme);
function MagicBellThemeProvider({ value: partialTheme = {}, ...props }) {
const theme = (0, react_1.useMemo)(() => {
// don't run backwards compatibility code if no partial theme was provided
if (!partialTheme || Object.keys(partialTheme).length === 0)
return Theme_js_1.defaultTheme;
const merged = (0, merge_js_1.merge)(Theme_js_1.defaultTheme, partialTheme);
// backwards compatibility for prose
if (!partialTheme.prose) {
for (const key of Object.keys(merged.prose).filter((x) => !/code|pre/i.test(x))) {
merged.prose[key] = merged.notification.default.textColor;
}
}
// backwards compatibility for notification titles
if (!partialTheme.notification?.default?.title?.textColor) {
merged.notification.default.title.textColor = merged.notification.default.textColor;
}
// make notification unseen & unread state fallback to custom default state before falling back to default theme
for (const variant of ['unseen', 'unread']) {
merged.notification[variant] = (0, merge_js_1.merge)(merged.notification[variant], partialTheme.notification?.default, partialTheme.notification?.[variant]);
}
// backwards compatibility for notification hover styles. We only compute hover styles if
// the partially provided theme doesn't define them for any of the notification states.
const hasDeclaredHoverStyles = ['default', 'unseen', 'unread'].some((variant) => Boolean(partialTheme.notification?.[variant]?.hover));
if (!hasDeclaredHoverStyles) {
for (const variant of ['default', 'unseen', 'unread']) {
const current = merged.notification[variant];
merged.notification[variant].backgroundOpacity = variant === 'default' ? 0 : 0.05;
merged.notification[variant].hover = (0, merge_js_1.merge)({
backgroundColor: (0, color_js_1.darken)(current.backgroundColor, 5),
backgroundOpacity: 0.15,
}, partialTheme.notification?.default?.hover, partialTheme.notification?.[variant]?.hover);
}
}
// backwards compatibility for status styles. We only compute status style if
// the partially provided theme doesn't define them for any of the notification states.
const hasDeclaredStateStyles = ['default', 'unseen', 'unread'].some((variant) => Boolean(partialTheme.notification?.[variant]?.state));
if (!hasDeclaredStateStyles) {
for (const variant of ['default', 'unseen', 'unread']) {
const current = merged.notification[variant];
// note that default was technically `toRGBA(current.textColor, 0.5)`, but it also didn't show
// the state dot back then, as it was hidden behind the menu button when the notification was read.
// so this color differs, but the result is closer to the old behavior - don't show the dot -.
const color = variant === 'default' ? 'transparent' : merged.header.backgroundColor;
merged.notification[variant].state = (0, merge_js_1.merge)(current.state, { color });
}
}
// backwards compatibility for unseenBadge
merged.unseenBadge.borderColor = partialTheme?.unseenBadge?.borderColor || 'transparent';
// backwards compatibility for container
merged.container.borderColor = partialTheme?.container?.borderColor || '';
// backwards compatibility for banner style
merged.banner = (0, merge_js_1.merge)(merged.banner, {
backgroundColor: merged.notification.unseen.backgroundColor,
backgroundOpacity: 0.1,
textColor: merged.notification.unseen.textColor,
fontFamily: merged.footer.fontFamily,
textAlign: merged.footer.textAlign,
fontSize: merged.footer.fontSize,
}, partialTheme.banner);
return merged;
}, [partialTheme]);
return react_1.default.createElement(MagicBellThemeContext.Provider, { value: theme, ...props });
}
const useTheme = () => (0, react_1.useContext)(MagicBellThemeContext);
exports.useTheme = useTheme;
exports.default = MagicBellThemeContext;
//# sourceMappingURL=MagicBellThemeContext.js.map