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 | 46x 40x | import { Box, Stack } from "@mui/material";
import { TrashIcon } from "@phosphor-icons/react";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import HFGiveIntegerInput from "@shared/HFInputs/HFGiveInput/HFGiveIntegerInput";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
type Props = { index: number; onDelete: () => void; canDelete: boolean };
// PAY Builder 031 — one seating-row line: a seat RANGE on a row. Inputs are
// label-less; the column headers (Row / First Seat / Last Seat / Label) are rendered
// once by SeatingConfigEditor. Row is a narrow 64px column; first seat, last seat and
// the optional category label fill the remaining width. The same row label may appear
// on several lines with disjoint ranges (validated in seating.helpers / the BE).
// Bound to DateLocation.seatingRows[i].
const SeatingRowRow = ({ index, onDelete, canDelete }: Props) => (
<Stack direction="row" gap="8px" alignItems="center">
<Box sx={{ width: "64px", flexShrink: 0 }}>
<HFGiveInput
name={`DateLocation.seatingRows.${index}.rowLabel`}
placeholder="A"
fullWidth
/>
</Box>
<Box sx={{ flex: 1 }}>
<HFGiveIntegerInput
name={`DateLocation.seatingRows.${index}.firstSeat`}
placeholder="1"
width="100%"
/>
</Box>
<Box sx={{ flex: 1 }}>
<HFGiveIntegerInput
name={`DateLocation.seatingRows.${index}.lastSeat`}
placeholder="5"
width="100%"
/>
</Box>
<Box sx={{ flex: 1 }}>
<HFGiveInput
name={`DateLocation.seatingRows.${index}.label`}
placeholder="VIP"
fullWidth
/>
</Box>
<GiveIconButton
Icon={TrashIcon}
onClick={onDelete}
disabled={!canDelete}
aria-label={`Delete row ${index + 1}`}
/>
</Stack>
);
export default SeatingRowRow;
|