108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import FloatingActionButton from "./FloatingActionButton";
|
||
import PopoverWrapper from "./PopoverWrapper";
|
||
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";
|
||
import usePopupStore from "../../store/popupStore";
|
||
import useModalStore from "../../store/modalStore";
|
||
import ChatPopup from "../popups/ChatPopup";
|
||
import ParticipantsPopup from "../popups/ParticipantsPopup";
|
||
import SharePopup from "../popups/SharePopup";
|
||
import SettingsModal from "../modals/SettingsModal";
|
||
import clsx from "clsx";
|
||
|
||
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);
|
||
};
|
||
}, []);
|
||
|
||
const { setPopup } = usePopupStore();
|
||
const { setModal } = useModalStore();
|
||
|
||
return (
|
||
<div className="2xl:hidden order-3 relative">
|
||
<FloatingActionButton
|
||
ref={buttonRef}
|
||
className={clsx(isOpened && "!bg-[#7B60F3]")}
|
||
onClick={() => setIsOpened(!isOpened)}
|
||
>
|
||
<div className="size-4 text-white">
|
||
<MoreIcon />
|
||
</div>
|
||
</FloatingActionButton>
|
||
<PopoverWrapper
|
||
isOpened={isOpened}
|
||
buttonRef={buttonRef}
|
||
className="w-[248px] !bottom-[72px] min-h-full !fixed left-1/2 -translate-x-1/2"
|
||
>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={() => setPopup(<ChatPopup />)}
|
||
>
|
||
<div className="size-4">
|
||
<ChatFilledIcon />
|
||
</div>
|
||
Чат
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={() => setPopup(<ParticipantsPopup />)}
|
||
>
|
||
<div className="size-4">
|
||
<UsersFilledIcon />
|
||
</div>
|
||
Участники
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={() =>
|
||
setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />)
|
||
}
|
||
>
|
||
<div className="size-4">
|
||
<ShareFilledIcon />
|
||
</div>
|
||
Пригласить
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={() => setModal(<SettingsModal />)}
|
||
>
|
||
<div className="size-4">
|
||
<CogFilledIcon />
|
||
</div>
|
||
Настройки
|
||
</Button>
|
||
</PopoverWrapper>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ControlsPopover;
|