Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-02-11 04:27:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish settings modal

Browse Source
This commit is contained in:
Robert Long
2021-12-06 17:34:10 -08:00
parent 4e2d1c5dcd
commit 94f42019df
28 changed files with 975 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/OverflowMenu.jsx
View File

@@ -1,31 +1,70 @@
import React, { useCallback } from "react";
import { ButtonTooltip, RoomButton } from "./RoomButton";
import { Popover, PopoverMenu, PopoverMenuItem } from "./PopoverMenu";
import { Menu } from "./Menu";
import { PopoverMenuTrigger } from "./PopoverMenu";
import { Item } from "@react-stately/collections";
import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
import { ReactComponent as OverflowIcon } from "./icons/Overflow.svg";
import { useModalTriggerState } from "./Modal";
import { SettingsModal } from "./SettingsModal";
import { InviteModal } from "./InviteModal";
export function OverflowMenu({ roomUrl }) {
const onAction = useCallback((e) => console.log(e));
export function OverflowMenu({
roomUrl,
setShowInspector,
showInspector,
client,
}) {
const { modalState: inviteModalState, modalProps: inviteModalProps } =
useModalTriggerState();
const { modalState: settingsModalState, modalProps: settingsModalProps } =
useModalTriggerState();
// TODO: On closing modal, focus should be restored to the trigger button
// https://github.com/adobe/react-spectrum/issues/2444
const onAction = useCallback((key) => {
switch (key) {
case "invite":
inviteModalState.open();
break;
case "settings":
settingsModalState.open();
break;
}
});
return (
<PopoverMenu onAction={onAction}>
<RoomButton>
<ButtonTooltip>More</ButtonTooltip>
<OverflowIcon />
</RoomButton>
{(props) => (
<Popover {...props} label="More menu">
<PopoverMenuItem key="invite" textValue="Invite people">
<AddUserIcon />
<span>Invite people</span>
</PopoverMenuItem>
<PopoverMenuItem key="settings" textValue="Settings">
<SettingsIcon />
<span>Settings</span>
</PopoverMenuItem>
</Popover>
<>
<PopoverMenuTrigger>
<RoomButton>
<ButtonTooltip>More</ButtonTooltip>
<OverflowIcon />
</RoomButton>
{(props) => (
<Menu {...props} label="More menu" onAction={onAction}>
<Item key="invite" textValue="Invite people">
<AddUserIcon />
<span>Invite people</span>
</Item>
<Item key="settings" textValue="Settings">
<SettingsIcon />
<span>Settings</span>
</Item>
</Menu>
)}
</PopoverMenuTrigger>
{settingsModalState.isOpen && (
<SettingsModal
{...settingsModalProps}
setShowInspector={setShowInspector}
showInspector={showInspector}
client={client}
/>
)}
</PopoverMenu>
{inviteModalState.isOpen && (
<InviteModal roomUrl={roomUrl} {...inviteModalProps} />
)}
</>
);
}