Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | import { Collapse, ListItem, ListItemIcon, ListItemProps, ListItemText, styled, Typography, } from "@mui/material"; import { ExpandLessIcon, ExpandMoreIcon } from "components/Icons"; import { NOTIFICATIONS } from "i18n/namespaces"; import { useTranslation } from "next-i18next"; import { useState } from "react"; import { GroupAction, NotificationType } from "./EditNotificationSettingsPage"; import NotificationSettingsSubListItem from "./NotificationSettingsSubListItem"; import { mapNotificationSettingsTypeToIcon } from "./utils/constants"; export interface NotificationSettingsListItemProps { items: GroupAction[]; type: NotificationType; } const StyledListItem = styled(ListItem)<ListItemProps>(({ theme }) => ({ background: "transparent", border: "none", "&:hover": { backgroundColor: "transparent", }, "&:not(:first-of-type)": { borderTop: `1px solid ${theme.palette.divider}`, }, })); export default function NotificationSettingsListItem({ items, type, }: NotificationSettingsListItemProps) { const notificationType = type as `notifications:notification_settings.edit_preferences.list_items.${NotificationType}`; const { t } = useTranslation([NOTIFICATIONS], { keyPrefix: "notification_settings.edit_preferences.list_items", }); const [isCollapseOpen, setIsCollapseOpen] = useState<boolean>(false); const handleCollapseClick = () => { setIsCollapseOpen(!isCollapseOpen); }; const renderItems = () => items .filter((item) => item.userEditable) .map((item) => ( <NotificationSettingsSubListItem key={`${item.topic}:${item.action}`} topic={item.topic} action={item.action} push={item.push} email={item.email} /> )); return ( <> <StyledListItem component="button" onClick={handleCollapseClick}> <ListItemIcon>{mapNotificationSettingsTypeToIcon[type]}</ListItemIcon> <ListItemText> <Typography variant="h3">{t(notificationType)}</Typography> </ListItemText> {isCollapseOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />} </StyledListItem> <Collapse in={isCollapseOpen}>{renderItems()}</Collapse> </> ); } |