93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import Accordion from "@material-ui/core/Accordion";
|
|
import AccordionDetails from "@material-ui/core/AccordionDetails";
|
|
import AccordionSummary from "@material-ui/core/AccordionSummary";
|
|
import AccordionActions from "@material-ui/core/AccordionActions";
|
|
import DeleteIcon from "@material-ui/icons/Delete";
|
|
import EditIcon from "@material-ui/icons/Edit";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import { IconButton } from "@material-ui/core";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
width: "100%",
|
|
marginBottom: theme.spacing(1),
|
|
},
|
|
heading: {
|
|
fontSize: theme.typography.pxToRem(15),
|
|
flexGrow: 1,
|
|
},
|
|
secondaryHeading: {
|
|
fontSize: theme.typography.pxToRem(15),
|
|
color: theme.palette.text.secondary,
|
|
},
|
|
details: {
|
|
alignItems: "center",
|
|
},
|
|
})
|
|
);
|
|
|
|
interface AccordionWithEditProps {
|
|
key: string;
|
|
title: string;
|
|
description: string | null;
|
|
subTitle?: string | null;
|
|
|
|
onEditButtonClick?(): void;
|
|
|
|
onDeleteButtonClick?(): void;
|
|
}
|
|
|
|
export default function AccordionWithEdit(
|
|
props: AccordionWithEditProps
|
|
): React.ReactElement {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel1c-content"
|
|
id="panel1c-header"
|
|
>
|
|
<div className={classes.heading}>
|
|
<Typography>{props.title}</Typography>
|
|
</div>
|
|
<div className={classes.secondaryHeading}>
|
|
<Typography>{props.subTitle}</Typography>
|
|
</div>
|
|
</AccordionSummary>
|
|
<AccordionDetails className={classes.details}>
|
|
<Typography color="textSecondary" style={{ whiteSpace: "pre-line" }}>
|
|
{props.description}
|
|
</Typography>
|
|
</AccordionDetails>
|
|
<Divider />
|
|
<AccordionActions>
|
|
<IconButton
|
|
data-testid="edit-icon-button"
|
|
size={"small"}
|
|
aria-label="edit"
|
|
onClick={props.onEditButtonClick}
|
|
>
|
|
<EditIcon titleAccess="Anpassen" />
|
|
</IconButton>
|
|
<IconButton
|
|
data-testid="delete-icon-button"
|
|
size={"small"}
|
|
aria-label="delete"
|
|
onClick={props.onDeleteButtonClick}
|
|
>
|
|
<DeleteIcon titleAccess="Löschen" />
|
|
</IconButton>
|
|
</AccordionActions>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|