@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
35 lines • 1.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = useContainerBorderRadius;
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
/**
* Hook to get the right border radius for the notification inbox.
*
* E.g.: If the header is the first element, its defined border radius will be
* applied to the container top corners. If it is the last element, its border
* radius will be applied to the bottom corners of the container.
*
* @param layout Layout used to sort components in the notification inbox
* @returns An array containing the rules for the border radius sorted (CSS order).
*/
function useContainerBorderRadius(layout) {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { container: containerTheme, header: headerTheme, footer: footerTheme } = theme;
let firstComponentTheme = headerTheme;
if (layout[0] === 'footer')
firstComponentTheme = footerTheme;
else if (layout[0] === 'container')
firstComponentTheme = containerTheme;
let lastComponentTheme = footerTheme;
if (layout[layout.length - 1] === 'header')
lastComponentTheme = headerTheme;
else if (layout[layout.length - 1] === 'container')
lastComponentTheme = containerTheme;
return [
firstComponentTheme.borderRadius,
firstComponentTheme.borderRadius,
lastComponentTheme.borderRadius,
lastComponentTheme.borderRadius,
];
}
//# sourceMappingURL=useContainerBorderRadius.js.map