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 | 8x 8x 10x 10x 10x 20x 20x 2x 2x 10x 2x | import { MouseEvent, useState } from "react";
import { DotsThreeIcon, Icon } from "@phosphor-icons/react";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { EVENT_DETAIL_TABS } from "../constants";
import { useEventListActions } from "../hooks/useEventListActions";
const ACTIONS_ARIA_LABEL = "Ticket actions";
type Props = {
eventId?: string;
};
/**
* The Tickets tab's toolbar on mobile (frame 7397-90578): the 390px row fits a
* 302px search field and one 32px icon, so Filter and Export collapse into a
* single overflow control beside the search.
*/
const EventTicketsMobileActions = ({ eventId }: Props) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const close = () => setAnchorEl(null);
const { options, filtersAmount } = useEventListActions({
eventId,
tab: EVENT_DETAIL_TABS.TICKETS,
// Frame 7397-90578 leads with the glyphs here, unlike the event actions'
// bottom sheet.
withIcon: (Glyph: Icon) => ({ IconLeft: Glyph }),
wrap: (action) => () => {
close();
action();
},
});
return (
<>
<GiveIconButton
Icon={DotsThreeIcon}
// Filled while a filter is applied, so the collapsed control still shows
// that the list is narrowed.
variant={filtersAmount > 0 ? "filled" : "ghost"}
size="large"
aria-label={ACTIONS_ARIA_LABEL}
data-testid="event-tickets-mobile-actions"
onClick={(event: MouseEvent<HTMLElement>) =>
setAnchorEl(event.currentTarget)
}
/>
<ContextualMenu
anchorEl={anchorEl}
handleClose={close}
color="primary"
texture="solid"
options={options}
/>
</>
);
};
export default EventTicketsMobileActions;
|