60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import React from "react";
|
|
import { FormLabel } from "@material-ui/core";
|
|
import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
|
|
import {
|
|
allPositions,
|
|
CandidatePosition,
|
|
getIconForPosition,
|
|
} from "./CandidatePositionLegend";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(2),
|
|
},
|
|
})
|
|
);
|
|
|
|
interface ToggleButtonGroupAnswerPositionProps {
|
|
position: CandidatePosition;
|
|
loading?: boolean;
|
|
|
|
onPositionChange(
|
|
e: React.MouseEvent<HTMLElement>,
|
|
newPosition: CandidatePosition
|
|
): void;
|
|
}
|
|
|
|
export default function ToggleButtonGroupAnswerPosition(
|
|
props: ToggleButtonGroupAnswerPositionProps
|
|
): React.ReactElement {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<FormLabel component="legend">Deine Position</FormLabel>
|
|
<ToggleButtonGroup
|
|
value={props.position}
|
|
exclusive
|
|
onChange={props.onPositionChange}
|
|
>
|
|
{allPositions.map((position) => (
|
|
<ToggleButton
|
|
disabled={props.loading}
|
|
key={position}
|
|
value={position}
|
|
aria-label={position.toString()}
|
|
>
|
|
{getIconForPosition(position, {
|
|
color: "primary",
|
|
fontSize: "small",
|
|
})}
|
|
</ToggleButton>
|
|
))}
|
|
</ToggleButtonGroup>
|
|
</div>
|
|
);
|
|
}
|