79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import FloatingActionButton from "./FloatingActionButton";
|
||
import Popover from "./Popover";
|
||
import MoreIcon from "../icons/MoreIcon";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import Button from "./Button";
|
||
import ChatFilledIcon from "../icons/ChatFilledIcon";
|
||
import UsersFilledIcon from "../icons/UsersFilledIcon";
|
||
import ShareFilledIcon from "../icons/ShareFilledIcon";
|
||
import CogFilledIcon from "../icons/CogFilledIcon";
|
||
|
||
function ControlsPopover() {
|
||
const [isOpened, setIsOpened] = useState(false);
|
||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||
|
||
useEffect(() => {
|
||
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
|
||
if (
|
||
buttonRef.current &&
|
||
!buttonRef.current.contains(event.target as Node)
|
||
) {
|
||
setIsOpened(false);
|
||
}
|
||
};
|
||
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
document.addEventListener("touchstart", handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener("mousedown", handleClickOutside);
|
||
document.removeEventListener("touchstart", handleClickOutside);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="2xl:hidden order-3 relative">
|
||
<FloatingActionButton
|
||
ref={buttonRef}
|
||
className="!bg-[#7B60F3]"
|
||
onClick={() => setIsOpened(!isOpened)}
|
||
>
|
||
<div className="size-4 text-white">
|
||
<MoreIcon />
|
||
</div>
|
||
</FloatingActionButton>
|
||
<Popover
|
||
isOpened={isOpened}
|
||
buttonRef={buttonRef}
|
||
className="w-[248px] bottom-[72px]"
|
||
>
|
||
<Button variant="tertiary" className="w-full !justify-start">
|
||
<div className="size-4">
|
||
<ChatFilledIcon />
|
||
</div>
|
||
Чат
|
||
</Button>
|
||
<Button variant="tertiary" className="w-full !justify-start">
|
||
<div className="size-4">
|
||
<UsersFilledIcon />
|
||
</div>
|
||
Участники
|
||
</Button>
|
||
<Button variant="tertiary" className="w-full !justify-start">
|
||
<div className="size-4">
|
||
<ShareFilledIcon />
|
||
</div>
|
||
Пригласить
|
||
</Button>
|
||
<Button variant="tertiary" className="w-full !justify-start">
|
||
<div className="size-4">
|
||
<CogFilledIcon />
|
||
</div>
|
||
Настройки
|
||
</Button>
|
||
</Popover>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ControlsPopover;
|