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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 35x 39x 39x 39x 39x 39x 2x 2x 39x 39x 2x 2x 39x 39x 2x | import { ListItemText, styled } from "@mui/material";
import Button from "components/Button";
import { CheckCircleIcon, 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";
import { theme } from "theme";
const StyledMenuListItem = styled(MenuItem)(() => ({
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 [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"}
color="primary"
disabled={disabled}
startIcon={isAttending ? <CheckCircleIcon sx={{ color: theme.palette.primary.main }} /> : undefined}
endIcon={isAttending ? open ? <ExpandLessIcon /> : <ExpandMoreIcon /> : undefined}
>
{isAttending ? t("communities:going_to_event") : t("communities:join_event")}
</Button>
<Menu
id={menuId}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
aria-hidden={!open}
slotProps={{
list: {
"aria-labelledby": buttonId,
},
}}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<StyledMenuListItem
onClick={() => {
handleChangeAttendanceState(AttendanceState.ATTENDANCE_STATE_GOING);
}}
>
<ListItemText primary={t("communities:going_to_event")} />
{attendanceState === AttendanceState.ATTENDANCE_STATE_GOING && <CheckIcon />}
</StyledMenuListItem>
<StyledMenuListItem
onClick={() => {
handleChangeAttendanceState(AttendanceState.ATTENDANCE_STATE_NOT_GOING);
}}
>
<ListItemText primary={t("communities:not_going_to_event")} />
{attendanceState === AttendanceState.ATTENDANCE_STATE_NOT_GOING && <CheckIcon />}
</StyledMenuListItem>
</Menu>
</>
);
}
|