101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import type { Icon } from '@phosphor-icons/react/dist/lib/types';
|
|
import { Bookmark as BookmarkIcon } from '@phosphor-icons/react/dist/ssr/Bookmark';
|
|
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
|
|
import { File as FileIcon } from '@phosphor-icons/react/dist/ssr/File';
|
|
import { PaperPlaneTilt as PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/ssr/PaperPlaneTilt';
|
|
import { Star as StarIcon } from '@phosphor-icons/react/dist/ssr/Star';
|
|
import { Tag as TagIcon } from '@phosphor-icons/react/dist/ssr/Tag';
|
|
import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
|
|
import { WarningCircle as WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';
|
|
|
|
import type { Label } from './types';
|
|
|
|
const systemLabelIcons: Record<string, Icon> = {
|
|
inbox: EnvelopeSimpleIcon,
|
|
sent: PaperPlaneTiltIcon,
|
|
trash: TrashIcon,
|
|
drafts: FileIcon,
|
|
spam: WarningCircleIcon,
|
|
starred: StarIcon,
|
|
important: BookmarkIcon,
|
|
};
|
|
|
|
function getIcon(label: Label): Icon {
|
|
if (label.type === 'system') {
|
|
return systemLabelIcons[label.id] ?? systemLabelIcons.inbox;
|
|
}
|
|
|
|
return TagIcon;
|
|
}
|
|
|
|
function getIconColor(label: Label, active?: boolean): string {
|
|
if (label.type === 'custom') {
|
|
return label.color ?? 'var(--mui-palette-text-secondary)';
|
|
}
|
|
|
|
return active ? 'var(--mui-palette-text-primary)' : 'var(--mui-palette-text-secondary)';
|
|
}
|
|
|
|
export interface LabelItemProps {
|
|
active?: boolean;
|
|
label: Label;
|
|
onSelect?: () => void;
|
|
}
|
|
|
|
export function LabelItem({ active, label, onSelect }: LabelItemProps): React.JSX.Element {
|
|
const Icon = getIcon(label);
|
|
const iconColor = getIconColor(label, active);
|
|
const showUnreadCount = (label.unreadCount ?? 0) > 0;
|
|
|
|
return (
|
|
<Box component="li" sx={{ userSelect: 'none' }}>
|
|
<Box
|
|
onClick={onSelect}
|
|
onKeyUp={(event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
onSelect?.();
|
|
}
|
|
}}
|
|
role="button"
|
|
sx={{
|
|
alignItems: 'center',
|
|
borderRadius: 1,
|
|
color: 'var(--mui-palette-text-secondary)',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
flex: '0 0 auto',
|
|
gap: 1,
|
|
p: '6px 16px',
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
...(active && { bgcolor: 'var(--mui-palette-action-selected)', color: 'var(--mui-palette-text-primary)' }),
|
|
'&:hover': {
|
|
...(!active && { bgcolor: 'var(--mui-palette-action-hover)', color: 'var(---mui-palette-text-primary)' }),
|
|
},
|
|
}}
|
|
tabIndex={0}
|
|
>
|
|
<Box sx={{ display: 'flex', flex: '0 0 auto' }}>
|
|
<Icon color={iconColor} fontSize="var(--icon-fontSize-md)" weight={active ? 'fill' : undefined} />
|
|
</Box>
|
|
<Box sx={{ flex: '1 1 auto' }}>
|
|
<Typography
|
|
component="span"
|
|
sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}
|
|
>
|
|
{label.name}
|
|
</Typography>
|
|
</Box>
|
|
{showUnreadCount ? (
|
|
<Typography color="inherit" variant="subtitle2">
|
|
{label.unreadCount}
|
|
</Typography>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|