From b12d8cd323d69e2fe98cd4b0606a597b2c44fa30 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sun, 16 May 2021 03:38:55 +0300 Subject: [PATCH] ExpandableCard --- src/components/common/ExpandableCard.js | 66 +++++++++++++++++++ .../advanced/keyOverwrite/KeyOverwriteCard.js | 65 +++--------------- 2 files changed, 76 insertions(+), 55 deletions(-) create mode 100644 src/components/common/ExpandableCard.js diff --git a/src/components/common/ExpandableCard.js b/src/components/common/ExpandableCard.js new file mode 100644 index 0000000..1903633 --- /dev/null +++ b/src/components/common/ExpandableCard.js @@ -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 ( + + + {Icon} + + } + action={ + + + + } + title={{title}} + subheader={subtitle} + /> + {Summary && {Summary}} + + {Content} + + + ); +}; + +ExpandableCard.propTypes = { + Icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + Summary: PropTypes.node, + Content: PropTypes.node.isRequired +}; + +export default ExpandableCard; diff --git a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js index 93287ce..9db7aa6 100644 --- a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js +++ b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js @@ -1,67 +1,22 @@ -import React, { useState } from "react"; +import React from "react"; import PropTypes from "prop-types"; -import styles from "../../../../../../components/common/styles/expandableCardStyles"; -import { makeStyles } from "@material-ui/core/styles"; -import { - Card, - CardHeader, - CardContent, - CardActions, - Collapse, - Avatar, - IconButton -} from "@material-ui/core"; +import ExpandableCard from "../../../../../../components/common/ExpandableCard"; import { useTranslation } from "react-i18next"; import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded"; -import clsx from "clsx"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; + import KeyOverwriteSummary from "./KeyOverwriteSummary"; -const useStyles = makeStyles(styles); - const KeyOverwriteCard = ({ data }) => { - const [expanded, setExpanded] = useState(false); - - const classes = useStyles(); const { t } = useTranslation(); - const handleExpandClick = () => { - setExpanded(!expanded); - }; - return ( - - - - - } - action={ - - - - } - title={{t("Server.ActiveSession")}} - subheader={t("Server.ActiveSessionSubtitle")} - /> - - - - - - -
CONTENT...
-
-
-
+ } + title={t("Server.ActiveSession")} + subtitle={t("Server.ActiveSessionSubtitle")} + Summary={} + Content={
CONTENT...
} + /> ); };