xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UserMenu

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2022-07-30 10:02:20 +02:00
parent cc7584a223
commit abf5121b74
No known key found for this signature in database
GPG key ID: D1D45825D60C24D2
1 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/UserMenu.jsx → src/UserMenu.tsx
View file

@ -1,16 +1,26 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { useLocation } from "react-router-dom";
import { Button, LinkButton } from "./button"; import { Button, LinkButton } from "./button";
import { PopoverMenuTrigger } from "./popover/PopoverMenu"; import { PopoverMenuTrigger } from "./popover/PopoverMenu";
import { Menu } from "./Menu"; import { Menu } from "./Menu";
import { Tooltip, TooltipTrigger } from "./Tooltip"; import { TooltipTrigger } from "./Tooltip";
import { Avatar } from "./Avatar"; import { Avatar, Size } from "./Avatar";
import { ReactComponent as UserIcon } from "./icons/User.svg"; import { ReactComponent as UserIcon } from "./icons/User.svg";
import { ReactComponent as LoginIcon } from "./icons/Login.svg"; import { ReactComponent as LoginIcon } from "./icons/Login.svg";
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg"; import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
import styles from "./UserMenu.module.css";
import { useLocation } from "react-router-dom";
import { Body } from "./typography/Typography"; import { Body } from "./typography/Typography";
import styles from "./UserMenu.module.css";
interface UserMenuProps {
preventNavigation: boolean;
isAuthenticated: boolean;
isPasswordlessUser: boolean;
displayName: string;
avatarUrl: string;
onAction: (value: string) => void;
}
export function UserMenu({ export function UserMenu({
preventNavigation, preventNavigation,
@ -19,7 +29,7 @@ export function UserMenu({
displayName, displayName,
avatarUrl, avatarUrl,
onAction, onAction,
}) { }: UserMenuProps) {
const location = useLocation(); const location = useLocation();
const items = useMemo(() => { const items = useMemo(() => {
@ -62,11 +72,11 @@ export function UserMenu({
return ( return (
<PopoverMenuTrigger placement="bottom right"> <PopoverMenuTrigger placement="bottom right">
<TooltipTrigger placement="bottom left"> <TooltipTrigger tooltip={() => "Profile"} placement="bottom left">
<Button variant="icon" className={styles.userButton}> <Button variant="icon" className={styles.userButton}>
{isAuthenticated && (!isPasswordlessUser || avatarUrl) ? ( {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
<Avatar <Avatar
size="sm" size={Size.SM}
className={styles.avatar} className={styles.avatar}
src={avatarUrl} src={avatarUrl}
fallback={displayName.slice(0, 1).toUpperCase()} fallback={displayName.slice(0, 1).toUpperCase()}
@ -75,12 +85,11 @@ export function UserMenu({
<UserIcon /> <UserIcon />
)} )}
</Button> </Button>
{() => "Profile"}
</TooltipTrigger> </TooltipTrigger>
{(props) => ( {(props) => (
<Menu {...props} label="User menu" onAction={onAction}> <Menu {...props} label="User menu" onAction={onAction}>
{items.map(({ key, icon: Icon, label }) => ( {items.map(({ key, icon: Icon, label }) => (
<Item key={key} textValue={label} className={styles.menuItem}> <Item key={key} textValue={label}>
<Icon width={24} height={24} className={styles.menuIcon} /> <Icon width={24} height={24} className={styles.menuIcon} />
<Body overflowEllipsis>{label}</Body> <Body overflowEllipsis>{label}</Body>
</Item> </Item>