79 lines
2.5 KiB
TypeScript
79 lines
2.5 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) {
|
|
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>
|
|
)
|
|
}
|