1
0
Fork 0
web2019/static/js/shop/options/Notification.jsx

26 lines
843 B
React
Raw Normal View History

import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useState} from "react";
export function Notification({id, tip, content}) {
const [show, setShow] = useState(true);
2024-01-05 13:15:43 +08:00
const onClickHandler = (event) => {
// prevent removing badge on touchables
if (!event.target.classList.contains("options-badge"))
setShow(false);
};
return (
2024-01-05 13:15:43 +08:00
<div className="options-notification" onClick={onClickHandler}>
{content}
2024-01-05 13:15:43 +08:00
{show ? <OverlayTrigger
placement="auto"
trigger={['click', 'hover', 'focus']}
2024-01-05 13:15:43 +08:00
style={{display: 'inline'}}
overlay={<Tooltip id={id}>{tip}</Tooltip>}
>
2024-01-05 13:15:43 +08:00
<span className="options-badge"></span>
</OverlayTrigger> : null}
</div>
)
}