ExpandableCard

master
Tudor Stanciu 2021-05-16 03:38:55 +03:00
parent 77c5f38f5b
commit b12d8cd323
2 changed files with 76 additions and 55 deletions

View File

@ -0,0 +1,66 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import styles from "./styles/expandableCardStyles";
import { makeStyles } from "@material-ui/core/styles";
import {
Card,
CardHeader,
CardContent,
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, title, subtitle, Summary, Content }) => {
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
{Icon}
</Avatar>
}
action={
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
}
title={<strong>{title}</strong>}
subheader={subtitle}
/>
{Summary && <CardContent>{Summary}</CardContent>}
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>{Content}</CardContent>
</Collapse>
</Card>
);
};
ExpandableCard.propTypes = {
Icon: PropTypes.node.isRequired,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
Summary: PropTypes.node,
Content: PropTypes.node.isRequired
};
export default ExpandableCard;

View File

@ -1,67 +1,22 @@
import React, { useState } from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styles from "../../../../../../components/common/styles/expandableCardStyles"; import ExpandableCard from "../../../../../../components/common/ExpandableCard";
import { makeStyles } from "@material-ui/core/styles";
import {
Card,
CardHeader,
CardContent,
CardActions,
Collapse,
Avatar,
IconButton
} from "@material-ui/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded"; import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
import clsx from "clsx";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import KeyOverwriteSummary from "./KeyOverwriteSummary"; import KeyOverwriteSummary from "./KeyOverwriteSummary";
const useStyles = makeStyles(styles);
const KeyOverwriteCard = ({ data }) => { const KeyOverwriteCard = ({ data }) => {
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const { t } = useTranslation(); const { t } = useTranslation();
const handleExpandClick = () => {
setExpanded(!expanded);
};
return ( return (
<Card> <ExpandableCard
<CardHeader Icon={<SurroundSoundRoundedIcon />}
avatar={ title={t("Server.ActiveSession")}
<Avatar aria-label="recipe" className={classes.avatar}> subtitle={t("Server.ActiveSessionSubtitle")}
<SurroundSoundRoundedIcon /> Summary={<KeyOverwriteSummary data={data} />}
</Avatar> Content={<div>CONTENT...</div>}
}
action={
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
}
title={<strong>{t("Server.ActiveSession")}</strong>}
subheader={t("Server.ActiveSessionSubtitle")}
/> />
<CardContent>
<KeyOverwriteSummary data={data} />
</CardContent>
<CardActions disableSpacing></CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<div>CONTENT...</div>
</CardContent>
</Collapse>
</Card>
); );
}; };