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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 8x 1x 17x 17x 17x 17x 17x 17x 2x 2x 17x 17x 2x 2x 17x 17x 17x 2x | import { ListItemText } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; import Button from "components/Button"; import { CheckIcon, ExpandLessIcon, ExpandMoreIcon } from "components/Icons"; import Menu, { MenuItem } from "components/Menu"; import { useTranslation } from "i18n"; import { COMMUNITIES } from "i18n/namespaces"; import { AttendanceState } from "proto/events_pb"; import { useState } from "react"; const useStyles = makeStyles((theme) => ({ menuListItem: { display: "flex", gap: theme.spacing(2), }, })); export default function AttendanceMenu({ loading, onChangeAttendanceState, attendanceState, id, disabled = false, }: { loading: boolean; onChangeAttendanceState: (attendanceState: AttendanceState) => void; attendanceState: AttendanceState; id: string; disabled: boolean; }) { const { t } = useTranslation([COMMUNITIES]); const classes = useStyles(); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const open = Boolean(anchorEl); const isAttending = attendanceState === AttendanceState.ATTENDANCE_STATE_GOING; const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { Iif (!isAttending) { onChangeAttendanceState(AttendanceState.ATTENDANCE_STATE_GOING); } else { setAnchorEl(event.currentTarget); } }; const handleClose = () => { setAnchorEl(null); }; const handleChangeAttendanceState = (attendanceState: AttendanceState) => { onChangeAttendanceState(attendanceState); setAnchorEl(null); }; /* @todo: this id can be unique and not passed from outside when we have React 18 useId */ const buttonId = `${id}-button`; const menuId = `${id}-menu`; return ( <> <Button id={buttonId} aria-controls={open ? menuId : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} onClick={handleClick} loading={loading} variant={isAttending ? "outlined" : "contained"} disabled={disabled} > {isAttending ? t("communities:going_to_event") : t("communities:join_event")} {isAttending && (open ? <ExpandLessIcon /> : <ExpandMoreIcon />)} </Button> <Menu id={menuId} anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{ "aria-labelledby": buttonId, }} getContentAnchorEl={null} anchorOrigin={{ vertical: "bottom", horizontal: "right", }} transformOrigin={{ vertical: "top", horizontal: "right", }} > <MenuItem onClick={() => { handleChangeAttendanceState(AttendanceState.ATTENDANCE_STATE_GOING); }} classes={{ root: classes.menuListItem }} > <ListItemText primary={t("communities:going_to_event")} /> {attendanceState === AttendanceState.ATTENDANCE_STATE_GOING && ( <CheckIcon /> )} </MenuItem> <MenuItem onClick={() => { handleChangeAttendanceState( AttendanceState.ATTENDANCE_STATE_NOT_GOING ); }} classes={{ root: classes.menuListItem }} > <ListItemText primary={t("communities:not_going_to_event")} /> {attendanceState === AttendanceState.ATTENDANCE_STATE_NOT_GOING && ( <CheckIcon /> )} </MenuItem> </Menu> </> ); } |