112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
import FloatingActionButton from "./FloatingActionButton";
|
||
import PopoverWrapper from "./PopoverWrapper";
|
||
import MoreIcon from "../icons/MoreIcon";
|
||
import { 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";
|
||
import { useClickAway } from "@uidotdev/usehooks";
|
||
|
||
function ControlsPopover() {
|
||
const [isOpened, setIsOpened] = useState(false);
|
||
|
||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||
|
||
const ref = useClickAway<HTMLDivElement>(() => setIsOpened(false));
|
||
|
||
const { setPopup } = usePopupStore();
|
||
const { setModal } = useModalStore();
|
||
|
||
function handleClickOpenChatPopup() {
|
||
setIsOpened(false);
|
||
setPopup(<ChatPopup />);
|
||
}
|
||
|
||
function handleClickOpenParticipantsPopup() {
|
||
setIsOpened(false);
|
||
setPopup(<ParticipantsPopup />);
|
||
}
|
||
|
||
function handleClickOpenSharePopup() {
|
||
setIsOpened(false);
|
||
setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />);
|
||
}
|
||
|
||
function handleClickOpenSettingsModal() {
|
||
setIsOpened(false);
|
||
setModal(<SettingsModal />);
|
||
}
|
||
|
||
return (
|
||
<div className="order-3 2xl:hidden" ref={ref}>
|
||
<FloatingActionButton
|
||
ref={buttonRef}
|
||
className={clsx(isOpened && "!bg-[#7B60F3]")}
|
||
onClick={() => setIsOpened(!isOpened)}
|
||
>
|
||
<div className="text-white size-4">
|
||
<MoreIcon />
|
||
</div>
|
||
</FloatingActionButton>
|
||
<PopoverWrapper
|
||
isOpened={isOpened}
|
||
parentElRef={buttonRef}
|
||
position="center"
|
||
className="w-[248px]"
|
||
>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={handleClickOpenChatPopup}
|
||
>
|
||
<div className="size-4">
|
||
<ChatFilledIcon />
|
||
</div>
|
||
Чат
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={handleClickOpenParticipantsPopup}
|
||
>
|
||
<div className="size-4">
|
||
<UsersFilledIcon />
|
||
</div>
|
||
Участники
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={handleClickOpenSharePopup}
|
||
>
|
||
<div className="size-4">
|
||
<ShareFilledIcon />
|
||
</div>
|
||
Пригласить
|
||
</Button>
|
||
<Button
|
||
variant="tertiary"
|
||
className="w-full !justify-start"
|
||
onClick={handleClickOpenSettingsModal}
|
||
>
|
||
<div className="size-4">
|
||
<CogFilledIcon />
|
||
</div>
|
||
Настройки
|
||
</Button>
|
||
</PopoverWrapper>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ControlsPopover;
|