forked from M-Labs/web2019
26 lines
843 B
JavaScript
26 lines
843 B
JavaScript
import {OverlayTrigger, Tooltip} from "react-bootstrap";
|
|
import React, {useState} from "react";
|
|
|
|
export function Notification({id, tip, content}) {
|
|
const [show, setShow] = useState(true);
|
|
const onClickHandler = (event) => {
|
|
// prevent removing badge on touchables
|
|
if (!event.target.classList.contains("options-badge"))
|
|
setShow(false);
|
|
};
|
|
|
|
return (
|
|
<div className="options-notification" onClick={onClickHandler}>
|
|
{content}
|
|
{show ? <OverlayTrigger
|
|
placement="auto"
|
|
trigger={['click', 'hover', 'focus']}
|
|
style={{display: 'inline'}}
|
|
overlay={<Tooltip id={id}>{tip}</Tooltip>}
|
|
>
|
|
<span className="options-badge"></span>
|
|
</OverlayTrigger> : null}
|
|
|
|
</div>
|
|
)
|
|
} |