ExpansionPanel >>> Accordion

master
Tudor Stanciu 2021-05-16 02:01:05 +03:00
parent f0817c30e5
commit f75afd268f
2 changed files with 21 additions and 24 deletions

View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { import {
ExpansionPanel, Accordion,
ExpansionPanelSummary, AccordionSummary,
ExpansionPanelDetails AccordionDetails
} from "@material-ui/core"; } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
@ -23,7 +23,7 @@ const ReleaseNotesListComponent = ({
const classes = useStyles(); const classes = useStyles();
const { t } = useTranslation(); const { t } = useTranslation();
const getCollapsed = (version) => { const getCollapsed = version => {
const flag = notesFlags[version]; const flag = notesFlags[version];
const collapsed = !flag || flag === false; const collapsed = !flag || flag === false;
return collapsed; return collapsed;
@ -36,13 +36,10 @@ const ReleaseNotesListComponent = ({
<Spinner /> <Spinner />
) : ( ) : (
releaseNotes.loaded && releaseNotes.loaded &&
releaseNotes.map((note) => { releaseNotes.map(note => {
return ( return (
<ExpansionPanel <Accordion key={note.version} onChange={handleToggle(note.version)}>
key={note.version} <AccordionSummary
onChange={handleToggle(note.version)}
>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
id={`panel-${note.version}-header`} id={`panel-${note.version}-header`}
> >
@ -50,11 +47,11 @@ const ReleaseNotesListComponent = ({
releaseNote={note} releaseNote={note}
collapsed={getCollapsed(note.version)} collapsed={getCollapsed(note.version)}
/> />
</ExpansionPanelSummary> </AccordionSummary>
<ExpansionPanelDetails> <AccordionDetails>
<ReleaseNotesComponent releaseNote={note} /> <ReleaseNotesComponent releaseNote={note} />
</ExpansionPanelDetails> </AccordionDetails>
</ExpansionPanel> </Accordion>
); );
}) })
)} )}

View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { import {
ExpansionPanel, Accordion,
ExpansionPanelSummary, AccordionSummary,
ExpansionPanelDetails AccordionDetails
} from "@material-ui/core"; } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
@ -31,28 +31,28 @@ const SessionListComponent = ({
<Spinner /> <Spinner />
) : ( ) : (
sessions.loaded && sessions.loaded &&
sessions.map((session) => { sessions.map(session => {
return ( return (
<ExpansionPanel <Accordion
key={session.sessionId} key={session.sessionId}
onChange={handleToggle(session.sessionId)} onChange={handleToggle(session.sessionId)}
> >
<ExpansionPanelSummary <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls={`panel-${session.sessionId}-content`} aria-controls={`panel-${session.sessionId}-content`}
id={`panel-${session.sessionId}-header`} id={`panel-${session.sessionId}-header`}
> >
<SessionSummary session={session} /> <SessionSummary session={session} />
</ExpansionPanelSummary> </AccordionSummary>
<ExpansionPanelDetails> <AccordionDetails>
<SessionForwardsComponent <SessionForwardsComponent
session={session} session={session}
forwards={forwards[session.sessionId]} forwards={forwards[session.sessionId]}
openOptionsDialog={openOptionsDialog} openOptionsDialog={openOptionsDialog}
showSessionInfo={true} showSessionInfo={true}
/> />
</ExpansionPanelDetails> </AccordionDetails>
</ExpansionPanel> </Accordion>
); );
}) })
)} )}