ExpansionPanel >>> Accordion
parent
f0817c30e5
commit
f75afd268f
|
@ -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>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue