mirror of https://github.com/usememos/memos.git
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { locationService, userService } from "../services";
|
|
import showAboutSiteDialog from "./AboutSiteDialog";
|
|
import "../less/menu-btns-popup.less";
|
|
|
|
interface Props {
|
|
shownStatus: boolean;
|
|
setShownStatus: (status: boolean) => void;
|
|
}
|
|
|
|
const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
|
|
const { shownStatus, setShownStatus } = props;
|
|
const popupElRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (shownStatus) {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (!popupElRef.current?.contains(event.target as Node)) {
|
|
event.stopPropagation();
|
|
}
|
|
setShownStatus(false);
|
|
};
|
|
window.addEventListener("click", handleClickOutside, {
|
|
capture: true,
|
|
once: true,
|
|
});
|
|
}
|
|
}, [shownStatus]);
|
|
|
|
const handleAboutBtnClick = () => {
|
|
showAboutSiteDialog();
|
|
};
|
|
|
|
const handleSignOutBtnClick = async () => {
|
|
userService.doSignOut().catch(() => {
|
|
// do nth
|
|
});
|
|
locationService.replaceHistory("/signin");
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
|
|
<button className="btn action-btn" onClick={handleAboutBtnClick}>
|
|
<span className="icon">🤠</span> About
|
|
</button>
|
|
<button className="btn action-btn" onClick={handleSignOutBtnClick}>
|
|
<span className="icon">👋</span> Sign out
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuBtnsPopup;
|