demarches-normaliennes/app/javascript/components/shared/FlashMessage.tsx

47 lines
1,020 B
TypeScript
Raw Normal View History

2021-03-11 12:09:27 +01:00
import React from 'react';
import { createPortal } from 'react-dom';
import invariant from 'tiny-invariant';
2021-03-11 12:09:27 +01:00
export function FlashMessage({
message,
level,
sticky,
fixed
}: {
message: string;
level: string;
sticky?: boolean;
fixed?: boolean;
}) {
const element = document.getElementById('flash_messages');
invariant(element, 'Flash messages root element not found');
2021-03-11 12:09:27 +01:00
return createPortal(
<div className="flash_message center">
<div
className={flashClassName(level, sticky, fixed)}
role={roleName(level)}
>
{message}
</div>
2021-03-11 12:09:27 +01:00
</div>,
element
2021-03-11 12:09:27 +01:00
);
}
function flashClassName(level: string, sticky = false, fixed = false) {
2021-03-11 12:09:27 +01:00
const className =
level == 'notice' ? ['alert', 'alert-success'] : ['alert', 'alert-danger'];
if (sticky) {
className.push('sticky');
}
if (fixed) {
className.push('alert-fixed');
}
return className.join(' ');
}
function roleName(level: string) {
return level == 'notice' ? 'status' : 'alert';
}