ExpandableCard

master
Tudor Stanciu 2021-08-03 10:08:06 +03:00
parent 204461543f
commit 0b4d2b15da
3 changed files with 151 additions and 24 deletions

View File

@ -0,0 +1,97 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import styles from "./styles";
import { makeStyles } from "@material-ui/core/styles";
import {
Card,
CardHeader,
CardContent,
CardActions,
Collapse,
Avatar,
IconButton
} from "@material-ui/core";
import clsx from "clsx";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles(styles);
const ExpandableCard = ({
Icon,
iconVariant,
title,
subtitle,
smallHeader,
expandable,
Summary,
Actions,
Content
}) => {
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card>
<CardHeader
avatar={
<Avatar
aria-label="recipe"
className={smallHeader ? classes.avatarSmall : classes.avatar}
variant={iconVariant || "circle"}
>
{Icon}
</Avatar>
}
action={
<>
{expandable && (
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
size={smallHeader ? "small" : "medium"}
>
<ExpandMoreIcon />
</IconButton>
)}
</>
}
title={<strong>{title}</strong>}
subheader={subtitle}
/>
{Summary && <CardContent>{Summary}</CardContent>}
{Actions && <CardActions>{Actions}</CardActions>}
{expandable && Content && (
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>{Content}</CardContent>
</Collapse>
)}
</Card>
);
};
ExpandableCard.defaultProps = {
expandable: true
};
ExpandableCard.propTypes = {
Icon: PropTypes.node.isRequired,
iconVariant: PropTypes.oneOf(["circle", "circular", "rounded", "square"]),
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
smallHeader: PropTypes.bool,
expandable: PropTypes.bool,
Summary: PropTypes.node,
Actions: PropTypes.node,
Content: PropTypes.node
};
export default ExpandableCard;

View File

@ -0,0 +1,22 @@
const styles = (theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: theme.palette.primary.main
},
avatarSmall: {
backgroundColor: theme.palette.primary.main,
width: theme.spacing(3),
height: theme.spacing(3)
}
});
export default styles;

View File

@ -6,12 +6,13 @@ import PageTitle from "../../../../components/PageTitle";
import LanguageContainer from "./LanguageContainer"; import LanguageContainer from "./LanguageContainer";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete"; import Autocomplete from "@material-ui/lab/Autocomplete";
import SaveIcon from "@material-ui/icons/Save"; import {
Save as SaveIcon,
Vibration as VibrationIcon
} from "@material-ui/icons";
import ExpandableCard from "../../../../components/Card/ExpandableCard";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: {
minWidth: 275
},
formControl: { formControl: {
margin: theme.spacing(1), margin: theme.spacing(1),
width: 300 width: 300
@ -32,24 +33,31 @@ const AppearancePage = () => {
return ( return (
<> <>
<PageTitle title={t("Menu.Appearance")} /> <PageTitle title={t("Menu.Appearance")} />
<Card className={classes.root}>
<CardContent> <ExpandableCard
<LanguageContainer /> Icon={<VibrationIcon />}
<br /> title={t("Forward.Options.KeyOverwrite.Label")}
<Autocomplete subtitle={t("Forward.Options.KeyOverwrite.Tooltip")}
id="settings.appearance.theme.autocomplete" expandable={false}
size="small" Summary={
options={themes} <>
value={state.theme} <LanguageContainer />
onChange={handleThemeChange} <br />
getOptionLabel={(option) => option} <Autocomplete
className={classes.formControl} id="settings.appearance.theme.autocomplete"
renderInput={(params) => ( size="small"
<TextField {...params} label="Theme" variant="outlined" /> options={themes}
)} value={state.theme}
/> onChange={handleThemeChange}
</CardContent> getOptionLabel={(option) => option}
<CardActions> className={classes.formControl}
renderInput={(params) => (
<TextField {...params} label="Theme" variant="outlined" />
)}
/>
</>
}
Actions={
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
@ -58,8 +66,8 @@ const AppearancePage = () => {
> >
Save Save
</Button> </Button>
</CardActions> }
</Card> />
</> </>
); );
}; };