46 lines
1,020 B
TypeScript
46 lines
1,020 B
TypeScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import invariant from 'tiny-invariant';
|
|
|
|
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');
|
|
return createPortal(
|
|
<div className="flash_message center">
|
|
<div
|
|
className={flashClassName(level, sticky, fixed)}
|
|
role={roleName(level)}
|
|
>
|
|
{message}
|
|
</div>
|
|
</div>,
|
|
element
|
|
);
|
|
}
|
|
|
|
function flashClassName(level: string, sticky = false, fixed = false) {
|
|
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';
|
|
}
|